타입스크립트 TypeScript | 유니언과 리터럴 Union & Literal

“코드 정보에 입각한 추론”

유니언Union

값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것

let songwriter = Math.random() > 0.5 // let songwriter: string | undefined
    ? undefined
    : "Bon Iver"

let singer: string | number = number; // 초기값은 number이지만 잠재적으로 string이 될 수도 있다

singer.toString();  // OK
singer.toUpperCase();  // Error - number 타입에 없음
singer.toFixed();  // Error - string 타입에 없음 (소수점 처리 방법)

 

내로잉Narrowing

값에 허용된 타입을 하나로 좁히는 것

 

타입 가드Type Guard
타입을 좁히는 데 사용할 수 있는 논리적 검사

 

 

값 할당을 통한 내로잉

let admiral: number | string = "Hedy"; // 초기값으로 문자열이 할당되어 즉시 string 타입으로 내로잉
let admiral.toFixed(); // Error

let admiral: number | string = "Hedy"; // 초기값으로 문자열이 할당되어 즉시 string 타입으로 내로잉
let admiral.toFixed(); // Error

typeof 검사를 통한 내로잉

let researcher = Math.random() > 0.5
    ? "Anyone"
    : 51;

if (!(typeof researcher === "string")) {
    researcher.toFixed(); // OK
} else {
    researcher.toUpperCase(); // OK
}

// 위의 if구문은 아래의 삼항 연산자와 같음
typeof researcher === "string"
    ? researcher.toUpperCase() // OK
    : researcher.toFixed();

 

리터럴 타입Literal Type

“좀 더 구체적인 원시 타입”

 

const philosopher = "Hypatia"; philosopher는 언뜻 보면 string 타입이지만… “Hypatia”라는 특별한 값이다.
⇒ 따라서, 변수 philosopher의 타입은 기술적으로 더 구체적인 “Hypatia”이다. ⇒ 특정 원싯값 = Literal Type

let lifespan: number | "ongoing" | "uncertain"; // 리터럴과 원시타입을 섞은 유니언 타입 애너테이션  
lifespan = 89; // OK  
lifespan = true; // Error

 

리터럴 할당 가능성

let person2: "Ada"; // 리터럴 타입 선언  
person2 = "Ada" // OK  
person2 = "Byron" // Error

let someString = ""; // 타입 = string  
someString = "TEXT"; // OK -> 리터럴 타입은 그 값이 해당하는 원시 타입에 할당될 수 있다.

 

엄격한 null 검사 Strict Null Checking

타입스크립트 컴파일러 옵션 중 strictNullChecks를 비활성화하면 다음과 같은 코드가 안전하다고 간주된다

let nameMaybe = Math/random() > 0.5  
	? "Tony"  
	: undefined;

nameMaybe.toLowerCase();  
// 하지만 strictNullChecks가 활성화되면, TS는 잠재적인 충돌을 확인한다.

 

참Truthy 검사를 통한 내로잉

타입스크립트는 잠재적인 값 중 truthy로 확인된 일부에 한해서만 변수의 타입을 좁힐 수 있다

let geneticist = Math.random() > 0.5  
	? "Bar"  
	: undefined;

if(geneticist) { // = truthy이므로  
	geneticist.toUpperCase(); // OK  
}

geneticist.toUpperCase(); // Error - possibly 'undefined'

// 아래의 두 구문 다 참이면(=undefined가 아닌 string이면) toUpperCase 실행  
geneticist && geneticist.toUpperCase(); // OK  
geneticist?.toUpperCase(); // OK  
// 하지만 빈 문자열인지, undefined인지 구분은 못함

let biologist = Math.random() > 0.5 && "Rachel" // false | string

if (biologist) {  
	biologist; // type = string  
} else {  
	biologist; // type = string(빈 문자열일 때) | false  
}

초깃값이 없는 변수

let people: string;  
//value? = value가 null이나 undefined가 아닐 때  
people?.length; // 값을 할당하기 전에 사용하려고 시도했으므로 error

let people2: string | undefined; // people으로 중복 선언하면 안됨  
people2?.length; // 변수 타입에 undefined가 포함되어있으므로 OK

 

타입 별칭Type Alias

type PascalCase = type; 재사용하는 타입에 더 쉬운 이름을 할당.

 

type RawData = boolen | number | string | null;
let rawDataFirst: RawData;
type OtherData = RawData | undefined; // 타입 별칭 결합

JS로 let rawDataFirst;만 컴파일된다

type OtherData = RawData | undefined; // 사용순대로 타입 별칭을 선언할 필요는 없다
type RawData = boolen | number | string | null;