1. 변수, 매개변수, 반환값에 타입을 붙이면 됩니다.
타입스크립트를 사용할 때는 어떤 값에 타입을 부여할 지 알고 있어야 합니다. 변수, 매개변수, 반환값에 타입을 부여하며 string, null, int, bigInt, undefined, symbol, object 가 있습니다. 타입 부여할 명칭 뒤에 콜론과 함께 타입을 표기합니다.
const str: string = 'hello';
const num: number = 123;
const bool: boolean = fasle;
const n : null = null;
const u : undefined = undefined;
const sym : symbol = Symbol('sym');
const big : bigint = 1000000000n;
const obj : object = { hello : 'world' };
function plus(x : number, y : number) : number {
return x + y;
}
const plus = (x : number, y : number) : number => { x + y };2. 타입추론
타입스크립트는 타입을 명시하지 않아도 타입스크립트가 알아서 타입을 추론합니다.
function plus (x: number, y: number) : number {
return x + y;
}
const result = plus(1, 2); //타입을 명시하지 않아도 타입스크립트가 추론해줍니다🤔
const result2: number = plus(1, 2);다만 매개변수에는 타입을 부여해야 합니다. 어떤 값이 들어올지 모르니까요! 매개변수에 타입을 부여하지 않으면 다음과 같이 에러 메세지가 표시됩니다.
function plus(x, y): number{
return x + y;
}
매개변수 x와 y 가 암묵적으로 any 타입을 가지고 있다는 뜻입니다. 암묵적이란 직접 타입을 표기하지 않아서 타입스크립트가 타입을 추론했고, 암묵적 any로 발생하는 에러는 implicitAny라고 부릅니다.
타입스크립트가 타입을 제대로 추론할 때도 있고, 틀리게 추론할 때도 있는데 타입스크립트의 추론은 어느정도 믿으면 좋을까요?
책에서는 다음과 같은 내용을 추천합니다
타입스크립트가 타입을 제대로 추론하면 그대로 쓰고, 틀리게 추론할 때만 올바른 타입을 표기한다.
(1) 타입스크립트의 const 타입추론
const str = 'hello' //const srt : "hello"
const num = 123; //const num : 123
const bool = false; //const bool : false
const n = null; //const n : null
const u = undefined; //const u : undefined
const sym = Symbol('sym'); //const sym: typeof sym
const big = 100000000n; //const big : 1000000n;
const obj = { hello: 'world' }; //const obj: { hello : string}
결론부터 말하면 타입스크립트의 추론이 더 정확한 추론입니다. const로 선언했기에 str 변수는 'hello' 외의 다른 문자열이 될 수 없습니다.
타입스크립트에서 꼭 알아야 하는 두가지가 있습니다.
1. 타입을 표기할 때는 'hello', 123, false 같은 정확한 값을 입력할 수 있습니다. 이를 리터럴 타입이라고 합니다.
-
타입을 표기할 때는 더 넓은 타입으로 표기해도 문제 없습니다.
-
{}타입은null과undefined를 제외한 모든 타입을 의미합니다.
const str1 : 'hello' = 'hello'; //가장 정확한 타입
const str2 : string = 'hello';
const str3 : {} = 'hello';(2) 타입스크립트의 let 타입추론
let str = 'hello'; //let str : string
let num = 123; //let num : number
let bool = false; //let bool : boolean
let u = undefined; //let u : any
let n = null; //let n : any
let sym = Symbol('sym'); //let sym : symbol
let big = 10000000n; //let big : bigint
let obj = {hello : 'hello'}; //let obj : { hello : string }let으로 선언한 변수는 다른값을 대입할 수 있으므로 타입을 넓게 추론합니다. 이러한 현상은 Type Wideing이라고 합니다.
또 null, undefined를 let 변수로 대입할 때는 any로 추론합니다.
(3) Sym의 추론
- const : typeof sym(고유한 symbol을 의미합니다. 타입스크립트는 이를 unique symbol이라 표현)
- let : symbol
const sym1 = Symbol.for('sym'); //unique symbol
const sym2 = Symbol.for('sym'); //unique symbol
let sym3 = Symbol.for('sym'); //unique symbol
let sym4 = Symbol.for('sym'); //unique symbol
//unique Symbol 끼리는 서로 비교할 수 없습니다.
//다만, unique Symbol과 일반 symbol 끼리나 일반 Symbol 두개의 비교는 할 수 있습니다.
if(sym1 === sym2) {} //에러발생
if(sym2 === sym3){}
if(sym3 === sym4){}
sym1 과 sym2의 비교는 자바스크립트에서는 문제가 없는 코드입니다. 하지만 타입스크립트에서 unique symbol 끼리의 비교를 금지하고 있습니다.
//타입스크립트에서는 에러이지만 자바스크립트에서 문제가 없다면
//@ts-ignore
if(sym1 === sym2) {}
//에러 발생 코드 윗줄에 위처럼 작성하면 됩니다. 하지만 이렇게 무시하기 보다는 올바른 타입스크립트 코드를 작성하는 것이 좋습니다. 