2. 유니언과 리터럴

유니언과 내로잉은 타입스크립트가 해당 값을 바탕으로 타입 추론을 수행하는 핵심 개념입니다.(코드 정보에 입각한 추론)

유니언과 리터럴

- 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것
- 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것

 

1️⃣ 유니언 타입

유니언 타입은 (값이 정확히 어떤 타입인지 모르지만) 두 개 이상의 타입을 지정하는 것을 말합니다. 유니언 타입은 가능한 값 또는 구성 요소 사이에 수직선(|) 연산자를 사용하여 지정합니다.

 

유니언 속성

값이 유니언 타입인 경우, 타입스크립트는 유니언으로 선언한 모든 타입에 존재하는 멤버 속성만 접근 할 수 있습니다.

유니언 타입의 경우 타입이 두 개 이상이기 때문에 해당 변수가 어떤 타입인지 확실하게 알려지지 않은 경우, 타입스크립트는 해당 속성을 사용하는 것을 안전하지 않다고 여기게 되어 에러가 발생하게 됩니다. 이는 모든 유니언 타입에 존재하지 않는 속성에 대해 접근을 제한하는 것에 대한 타입스크립트의 안전 조치에 해당됩니다.

 

2️⃣ 내로잉

내로잉은 값이 정의, 선언 혹은 이전에 유추된 것보다 더 구체적인 타입임을 코드에서 유추하는 것을 말합니다.

 

타입스크립트는 값의 타입이 이전에 알려진 것보다 더 좁혀진 것을 알게 되면 값을 더 구체적인 타입으로 취급하게 되는데, 타입을 좁히는데 사용할 수 있는 논리적 검사를 타입가드(type guard)라고 합니다.

 

값 할당을 통한 내로잉

변수에 직접 값을 할당하게 되면 타입스크립트는 변수의 타입을 할당된 값의 타입으로 좁히게 됩니다.

변수 person은 number | string 타입으로 선언되었지만, 문자열 Kim이 할당되면서 타입스크립트는 해당 변수를 string 타입으로 좁혀지는 것을 볼 수 있다.

 

조건 검사를 통한 내로잉

타입스크립트는 if 문 안에서 변수가 알려진 값과 동일한 타입인지를 확인하여 변수의 값을 좁히는 방법을 사용합니다.

 

typeof 검사를 통한 내로잉

타입스크립트는 직접 값을 확인해 타입을 좁히기도 하지만, typeof 연산자를 사용할 수 도 있습니다.

 

3️⃣ 리터럴 타입

리터럴 타입은 원시 타입 중 하나의 타입을 할당하는 것이 아니라 변수나 매개변수에 정확한 값을 설정하는 것을 의미합니다.

 

변수를 const로 선언하고 값을 할당하면 타입스크립트는 해당 변수를 할당된 리터럴 값으로 유추하게되어, 일반적인 원시 타입 대신 변수의 값을 리터럴로 설정하게 됩니다.

 

유니언 타입 에노테이션을 리터럴과 원시 타입을 섞어서 사용할 수 있습니다.

 

 

4️⃣ 엄격한 null 검사

타입스크립트 컴파일러는 실행 방식을 변경할 수 있는 다양한 옵션을 제공하는데, 그 중에 가장 유용한 옵션 중 하나인 strictNullChecks는 엄격한 null 검사를 활성화 시킬지 여부를 결정합니다. strictNullChecks 옵션을 비활성화 하면 코드의 모든 타입에 | null | undefined 를 추가해야 모든 변수가 null 또는 undefined를 할당할 수 있게 됩니다.

 

strictNullChecks을 false로 설정하게 되면 아래의 코드가 안전하다고 간주됩니다.(오류가 발생하지 않음)

strictNullChecks : false

반면에 true로 설정하는 경우, 코드가 null 또는 undefined 값으로 인한 오류로부터 안전한지 여부를 쉽게 파악할 수 있습니다.

strictNullChecks : true

 

참 검사를 통한 내로잉

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

 

5️⃣ 타입 별칭

타입스크립트에는 재사용하는 타입에 더 쉬운 이름을 할당하는 타입 별칭(type alias)이 있습니다. 타입 별칭은 type 새로운 이름 = 타입 형태를 갖습니다.

타입스크립트가 타입 별칭을 발경하면 해당 별칭이 참조하는 실제 타입을 입력한 것처럼 작동하게 됩니다.

let dataTypeFirst: boolean | number | string | null | undefined;
let dataTypeSecond: boolean | number | string | null | undefined;
let dataTypeThird: boolean | number | string | null | undefined;

type dataType = boolean | number | string | null | undefined;

let dataTypeFirst : dataType;
let dataTypeSecond : dataType;
let dataTypeThird : dataType;

 

타입 별칭 결합

타입 별칭은 다른 타입 별칭을 참조할 수 있습니다.

 

 

 

---

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=307683870 

러닝 타입스크립트