이펙티브 타입스크립트 정리 - 2장-01

타입스크립트의 타입 시스템

 

타입스크립트 설치 시 다음 두가지 실행 가능

 - 타입 스크립트 컴파일러(tsc)

 - 타입 스크립트 서버(tsserver)

 

visualstudio code를 많이 사용하여 개발을 할텐데, 타입스크립트 사용시  vscode에서 타입추론이 가능하다.

타입이 뭔지 마우스를 올려놓으면 알려준다

변수외에도 함수 들도 가능하다.

 

vscode에서 변수나 함수에 마우스를 올리고 우클릭 Go to definition 을 해서 타고 올라가면 정의된 곳을 볼 수 있고

이걸 보고서 개념을 추론할 수 있다. 

*해당 변수나 함수에 마우스커서를 두고 ctrl+우클릭 / 또는 F12로도 가능하다

 

다양한 타입들

 

never 타입 : 아무것도 포함 하지 않는 공집합

유닛 타입(=리터럴 타입) : 한가지값만 포함하는 타입

type A = 'a'   // 리터럴 타입

유니온 타입 : 각 집합들의 합 집합

type A = 'A' | 'B' | 'C'

 

extends

interface Person {
	name:string
}

interface Personspan extends Person {  //  Personspan은  Person의 부분집합, 서브집합 
	birth: Date;
    death?: Date;
}

 

function getKey<k extends string>(val: any, key: K) {  //extends 제네릭타입에서 한정자로 쓰임
	//...	
}

getKey({}, 'x');        // 정상
getKey({}, Math.random() < 0.5 ? 'a' :'b');  // 결과값이 string이므로 정상
getKey({}, document.title);  // string값이므로 정상
getKey({}, 12);  // 12는 불가

 

모든 값은 타입을 가지지만, 타입은 값을 가지지 않는다.

- "foo"는 문자열 리터럴일 수도, 문자열 리터럴 타입 일 수도 있다.

- 값과 타입을 사용하는 곳에 혼동되지않도록 주의!

 

 

타입 단언보단 타입 선언!

 

interface Person {name:string}

const john: Person = {name: 'John'}  // 타입 Person
const bob = {name: 'Bob'} as Person  // 타입 Person

결과가 같아 보이지만 그렇지 않음! 아래 예시 참고

const john:Person = {};  // name 프로퍼티가 없다고 에러

const bob = {} as Person;  // 오류  없음

 

! 는 접두사로 쓰이면 boolean의 부정문이지만, 접미사로 쓰이면 타입 단언이 된다!

값이 확실히 있다고 하면, !를 통해 타입 단언을 하거나 확신할 수 없을땐 null체크를 해준다

 

 

매개변수나 반환 값에 타입을 명시하기보다는 함수 표현식 전체에 타입구문을 적용하는 것이 좋다

 

async function checkdFetch(input: RequestInfo, init?: RequestInit) {
	const response = await fetch(input, init);
    if(!reponse.ok) {
    	// 비동기 함수 내에서 거절된 프로미스로 변환함
        throw new Error('Request failed: ' + response.status);
    }
    return response;
}

// 위코드도 잘 동작하겠지만, 아래 코드가 좀 더 좋다

const checkdFetch:typeof fetch = async (input, init) => {
	const response = await fetch(input, init);
    if(!reponse.ok) {
    	// 비동기 함수 내에서 거절된 프로미스로 변환함
        throw new Error('Request failed: ' + response.status);
    }
    return response;
}

// 함수표현식으로 바꿨고, 함수 전체에 타입적용으로 타입스크립트가 input과 init의 타입을 추론할수있게함