TIL/TypeScript

[TypeScript]이펙티브 타입스크립트 Item 6~10

JoJobum 2022. 7. 19.

Item 6

타입스크립트에서 제공하는 언어 서비스 사용하는 것이 좋다

언어서비스가 제공하는 기능으로는 코드 자동 완성, 명세 검사, 검색, 리팩터링 등등

편집기의 타입추론을 보고 타입스크립트가 값의 타입을 어떻게 이해하는지 알 수 있음

 

Item 7

한가지 값만 포함하는 타입 = literal 타입

2개 혹은 3개 포함하는 타입 = union 타입 

type A = 'A'; // 리터럴 타입
type One = 1; // 리터럴 타입 == 유닛 타입이라고 불리기도함

type A1 = 'A' | 1; // 유니온 타입

const a: A1 = 'A' // 정상
const b: A1= 'B' // 에러

& 은 두 타입의 인터섹션(교집합)을 계산

타입간의 교집합은 인터페이스의 속성이 아니라 값의 집합(= 타입의 범위)에 적용된다

interface Phone {
	name: string;
}

interface Label{
	cost: number;
	barcode: string;
}

type PhoneWithLabel = Phone & Lable;

const pl: PhoneWithLabel = {
	name: 's11',
	cost: 100,
	barcode: 'asdfsdf',
};

즉 위의 경우 문제가 없다는 것 pl이 Phone 과 Label의 속성을 갖고 있는 채 추가적인 속성을 더 가져도 인터섹션 타입에 속할 수 있다.

 

서브 타입은 extends 를 통해 구현 

// vector3D는 vector2D의 서브타입
interface vector2D { x: number;, y: number; }
interface vector3D extends { z: number; }

 

용어 집합
never  공집합
리터럴 타입 원소가 1개인 집합
값이 T에 할당 가능 값이 T의 원소
T1이 T2에 할당가능 T1이 T2의 부분 집합
T1이 T2를 상속 T1이 T2의 부분 집합
T1 | T2 T1과 T2 의 합집합
T1 & T2 T1과 T2 의 교집합
unknown 전체 집합

 

 

 

Item 8

타입스크립트의 symbol은 타입 공간이나 값 공간 중 한 곳에 존재

타입 이름과 값 이름이 동일할 수 있기에 구분하는 방법 터득

typeof, this 등 많은 연산자들이나 커워드들이 타입공간이냐 값 공간이냐 에 따라 다르게 사용될 수 있음

 

Item 9

타입스크립트에서 변수에 값을 할당하고 타입을 부여하는 방법으론 2가지

interface Keyboard { name: string };

const a: Keyboard = { name: 'K380' };
const b = { name : '레오폴드' } as Keyboard;

 

a 는 변수에 타입 선언이 붙음 => 값이 선언된 타입임을 명시

b 는 as 를 통해 타입 단언을 함 => 타입 추론 시스템이 추론한 타입과 달라도 단언한 타입으로 밀어붙임 

타입 선언은 해당 인터페이스를 만족시키는지 검사 후 만족시키지 못하면 오류 표시

타입 단언은 위의 오류를 무시

=> a 와 b 에 각각 cost라는 속성을 추가하면 a는 interface를 수정하지 않았기에 오류가 발생하지만 b는 오류 없음

 

화살표 함수의 반환 타입을 명시하기

null 이 아님을 확신할 때는 ! 를 사용하여 null 아님을 단언해주자 ex) a!

 

 

Item 10

객체 래퍼 타입 피하기

예를 들어 string 은 기본형(불변, 메서드 가지지 않음) <=> String 객체 타입

그치만 우리는 string a; a.charAt(0) 과 같이 String의 메서드를 사용함

여기서 charAt이라는 메서드를 제공하는 string은 기본형 string이 아니라 자바스크립트에 정의되어 있는 String 객체 타입

 

그럼 우리가 string 기본형에 charAt같은 메서드를 사용하면?

기본형을 String 객체로 래핑하고

메서드를 호출하고

래핑한 객체를 버리는 과정을 거침

 

대부분의 라이브러리와 제공하는 타입 선언 기본형으로 되어 있기에

객체 래퍼 타입을 직접 사용하거나 인스턴스 생성하는 것 피하기

 

 

 

 

제대로 머리가 이해 못한 내용 표시

반응형

댓글