TypeScript - chapter3 / 러닝 타입스크립트

조용환·2023년 12월 17일
0

TypeScript

목록 보기
1/3

union

union : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것
|를 이용해 유니언 타입을 나타냄 (string | undefinesd)

유니언 타입 선언

초기값 존재해도 명시적 타입 애너테이션이 유용할 때 사용
ex) let thinker: string | null = null;

유니언 속성

값이 유니언 일 경우 모든 가능한 타입에 존재하는 멤버 속성에만 접근 가능
ex) let physicist: String | number = 30;
이 경우 toString()은 사용가능, 허나 toUpperCase(), toFixed() 등 하나의 타입에만 가능한 것은 사용 불가.
이 때 내로잉을 이용해 속성을 좁힌 후 사용해야 함.

narrowing

narrowing(내로잉) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것
type guard : 타입을 좁히는 데 사용할 수 있는 논리적 검사.

값 할당을 통한 내로잉

ex) let admiral: number | string; admiral = "Grace Hopper";
이 때 초기에는 2가지 타입 할당 가능했으나, greace hopper값을 준 시점에 admiral은 String으로 결정.

조건 검사를 통한 내로잉

조건문을 통해 해당 타입인지 검사

typeof 검사를 통한 내로잉

값을 확인한 검사도 가능하지만, typeof를 이용해 타입 확인 후 사용도 가능.
부정문 등도 정상 작동 => number | string 일 때 !string 이면 자동 number으로 인식

리터럴 타입

const philosopher = "Hypatia"; 가 있다고 할 때 philosopher는 string이기도 하지만, "Hypatia"라는 특별한 값이라고도 할 수 있음.
따라서 philosopher의 타입은 기술적으로 더 구체적인 "Hypatia"임
리터럴 타입 : 원시 타입 값 중 어떤 것이 아닌 특정 원싯값으로 알려진 타입
원시 타입 : 해당 타입의 가능한 모든 리터럴 값의 집합이라고도 볼 수 있음.


유니언 타입 애너테이션 때 리터럴과 원시 타입 섞어서 사용 가능
ex) let lifespan: number | "ongoing" | "uncertain";
-> lifespan은 number 또는 string 값의 "ongoing" 혹은 "uncertain"만 가능

리터럴 할당 가능성

리터럴 타입으로 선언 시 해당하는 원시 타입 값은 할당 불가능
ex) let specific:"Ada" | "Beter" = "Ada";
let some = "Beter";
specific = some; -> Error
some 이 "Beter"라는 값을 가졌음에도 할당이 불가능, specific에 "Beter"값을 할당하는 방법은 직접 specific = "Beter"만 가능

엄격한 null 검사

2009, 토니 흐어가 말한 1965년 null 참조의 발명으로 약 십억 달러의 고통과 피해를 입었을 것이라 하였음. 이를 위해 타입스크립트는 엄격한 null 검사가 있음
strictNullChecks 옵션을 활성화하면 |null | undefined가 있어야만 null, undefined값 할당 가능.
보통 활성화 하는 것을 권장

참 검사를 통한 내로잉

trythy로 확인된 일부에 한해서만 변수의 타입 좁히는 것이 가능
허나 string | undefined값이 falsy일 때 이것이 빈 문자열인지, 아니면 undefined인지는 모름

초깃값이 없는 변수

undefined를 할당하지 않더라도, 타입스크립트는 초기값 할당전까지 이를 문제 삼지 않음. 허나 접근하려하면 에러 표시.

타입 별칭

조금 긴 유니언 타입은 타입 별칭으로 해결
ex) type RawData = boolean | number | string | null | undefined;
let rawDataFirst : RawData; let rawDataSecond : RawData;
타입 별칭은 자스가 아니기 때문에 자스로 컴파일시 빠지게 됨
위의 코드는 let rawDataFirst; let rawDataSecond; 만 남음

타입 별칭 결합

다른 타입 별칭 참조 가능
type Id = number | string;
type IdMaybe = Id | undefined | null -> type IdMaybe = number | string | undefined | null;

profile
practice react, javascript

0개의 댓글