•
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
복사
