Search
☘️

아이템 26. 타입 추론 시 문맥

TS는 타입 추론 시 값과 문맥을 동시에 고려
변수를 뽑아 별도로 선언했을 때 오류가 발생 ⇒ 타입 선언 추가
상수 단언(as const) 사용 시 정의한 곳이 아닌 사용한 곳에서 에러 주의
// JS에서는 코드 동작/실행순서 변경 없이 표현식 => 상수 분리 가능 function setLanguage(language: string) { /* ... */} setLanguage('JavaScript') // OK (인라인 형태) let language = 'JavaScript' setLanguage(language) // OK (참조 형태) // 그러나 TS에서는 할당 시점에 타입을 추론하므로 문제 발생 type Language = 'JavaScript' | 'TypeScript' | 'Python' function setLanguage(language: Language) { /* ... */} setLanguage('JavaScript') // OK let language = 'JavaScript' setLanguage(language) // error (string은 type 'Language'에 할당 불가) // 문맥과 값을 분리하여 해결 가능 // 그러나 이런 방법은 추후 근본적 문제 야기 가능 let language: Language = 'JavaScript' // 해결책 1) 타입의 명시적 선언 const language = 'JavaScript' // 해결책 2) 선언 시 const 사용
TypeScript
복사

1. 튜플 사용 시 주의점

// Parameter is a (latitude, longitude) pair. function panTo(where: [number, number]) { /* ... */ } panTo([10, 20]) // OK // const를 사용해 문맥과 값을 분리했으나 오류 발생 (배열-튜플 차이) const loc = [10, 20] panTo(loc) // error (type 'number[]'는 type '[number, number]'할당 불가) // as const로 내부까지 상수(deeply)라는 사실을 TS에 알림 + 함수에 readonly 추가 function panTo(where: readonly [number, number]) { /* ... */ } const loc = [10, 20] as const panTo(loc) // OK
TypeScript
복사

2. 객체 사용 시 주의점

type Language = 'JavaScript' | 'TypeScript' | 'Python' interface GovernedLanguage { language: Language organization: string } function complain(language: GovernedLanguage) { /* ... */ } complain({ language: 'TypeScript', organization: 'Microsoft' }) // OK const ts = { language: 'TypeScript', organization: 'Microsoft', } complain(ts) // error (string 형식은 Language 형식에 할당 불가) // 튜플 때와 마찬가지로 명시적 타입 선언이나 상수 단언으로 해결 필요
TypeScript
복사

3. 콜백 사용 시 주의점

// 콜백을 다른 함수로 전달 시 일반 호출 시에는 문제 X function callWithRandomNumbers(fn: (n1: number, n2: number) => void) { fn(Math.random(), Math.random()) } callWithRandomNumbers((a, b) => { a // Type is number b // Type is number console.log(a + b) }) // 콜백을 상수로 뽑아내면 문맥이 소실되어 noIMplicitAny 발생 function callWithRandomNumbers(fn: (n1: number, n2: number) => void) { fn(Math.random(), Math.random()) } const fn = (a, b) => { // ~ Parameter 'a' implicitly has an 'any' type // ~ Parameter 'b' implicitly has an 'any' type console.log(a + b) } callWithRandomNumbers(fn) // 매개 변수에 타입 추가해서 해결 가능 function callWithRandomNumbers(fn: (n1: number, n2: number) => void) { fn(Math.random(), Math.random()) } const fn = (a: number, b: number) => { console.log(a + b) } callWithRandomNumbers(fn) // ok
TypeScript
복사