PSD( Private-Self-Development )

타입스크립트 기타 특성 본문

Frontend/Typescript

타입스크립트 기타 특성

chjysm 2022. 9. 29. 14:39

TS 클로저

클로저는 지속되는 유효 범위(persistence scope)를 의미. JS 고유의 기능이 아니라 함수형 프로그래밍의 기능

const add = (x: number) => {          // 바깥쪽* *유효* *범위* *시작*
	return (y:number): number => {      // 안쪽* *유효* *범위* *시작*
		return x + y;                     // 클로저*
	}                                   // 안쪽* *유효* *범위* *끝*
}                                     // 바깥쪽* *유효* *범위* *끝*

console.log(add(1)(2));                       // 3*

함수 안쪽 유효 범위만 놓고 본다면 'x'는 존재하지 않는 변수. 이처럼 범위 안에서 의미를 알 수 없는 변수를 자유 변수. TS는 자유 변수가 존재한다면 바깥쪽 유효 범위에서 'x'라는 변수를 찾아 컴파일함.

다음과 같이 사용하는 경우 'add1'은 'x' 값의 메모리를 유지

const add1 = add(1);

커리 기능을 사용하지 않는 것 처럼 함수를 호출 가능

console.log(add1(2))   *// 3*

Type assertions

type assertion이란, any라는 type으로 선언된 변수를 사용할 시점에 확실히 타입을 알았을 때 사용하는 것.

1.  angle-bracket 방식

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

2.  as 방식

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

두 방법 다 유효하지만 JSX에서는 as만 허용

3. 인덱싱 타입

TS는 인터페이스를 이용하여 인덱싱 타입을 정의할 수 있음

const arr: string[] = ['Thor', 'Hulk'];
const arr: Array<string> = ['Thor', 'Hulk'];
interface StringArray {
  [index: number]: string;
}

const arr: StringArray = ['Thor', 'Hulk'];
arr[0]; // 'Thor'

유틸리티 타입

이미 정의된 타입을 변환해 사용가능하게 함

1. Partial

타입은 특정 타입의 부분 집합을 만족하는 타입을 정의

5장의 매핑 타입과 같음 매핑타입 Subset 예시코드 보다 훨씬 사용하기 간단해 보임

interface Address {
  email: string;
  address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능
const all: MayHaveEmail = { email: 'capt@hero.com', address: 'Pangyo' }; // 가능

2. Exclude

Omit과 역할이 유사하나, union타입에서 멤버타입을 제외한 타입을 생성하고자 할 때 사용. Omit은 객체타입, Exclude는 union 타입

type Color = 'red' | 'blue' | 'pink' | 'orange'; 

type RedishColor = Exclude<Color, 'blue'>; // 색상 중 blue를 제외한 붉은 컬러만 union 타입으로 구성한다.