타입 어노테이션
사용하려고 하는 변수, 함수 등 옆에 타입을 직접 명시하는 방식
let name: string = "길동";
let age: number = 20;
let animals: string[] = ['cat', 'dog', 'cow'];타입 추론
코드에서 타입을 명시적으로 지정하지 않아도, 컴파일러가 코드를 통해 타입을 자동으로 추론하는 방식
개발자가 타입을 명시적으로 지정하지 않아도 타입 안정성을 유지할 수 있게 도와주는 것이 타입 추론이다.
기본 타입 추론
let num = 10; // number로 추론
let str = "hello"; // string으로 추론배열의 타입 추론
let numbers = [1, 2, 3, 4, 5];
let strings = ["a", "b", "c"];객체의 타입 추론
let person = {
name: "길동";
age: 20;
}; // {name: string; age: number} 타입의 객체로 추론
person.name = "순신";
person.age = 30;
person.age = "서른"; // 오류: person.age는 number로 추론하고 있으므로 string을 넣을 수 없음함수 반환 타입 추론
function add(a:number, b:number){
return a + b; // number로 추론
}
const result = add(3, 5); // result는 number로 추론이처럼 TypeScript의 타입 추론은 코드의 문맥을 통해 자동으로 결정한다. 이렇게 자동으로 해주는데 타입을 명시적으로 작성하는 이유는 무엇일까?
왜 타입 어노테이션을 해야 할까?
아래 예시 코드를 보자. 개발자의 실수로 return문을 작성하지 않은 함수는 자동으로 void 타입의 함수로 추론이 된다. 이처럼 암묵적 타입 추론에 의존하게 되면 타입스크립트의 특징인 안전한 코드 작성에서 멀어질 수 있는 위험이 존재한다.
1. 함수가 any 타입을 리턴하고 이 값을 명확히 해야할 때
const json = '{"a":1, "b":2}';
const object = JSON.parse(json);JSON.parse를 사용하면 any타입으로 인식하게 된다. 이럴 경우 다음과 같이 명시해주는 것이 좋다.
const json: {a:number, b:number};2. 어떤 변수를 선언한 이후 다른 라인에서 초기화를 할 때
const colors = ["red", "blue"];
let foundColor;
for (let i=0; i<colors.length; i++){
if(colors[i] === "blue") foundColor = true;
}foundColor를 위에서 선언하고 아래 for문에서 초기화를 하고 있다. 위의 경우 foundColor는 any 타입을 갖게 된다. 이럴 경우 다음과 같이 선언시 타입을 명시해주자.
let foundColor: boolean;3. 추론할 수 없는 타입을 변수가 가지려 할 때
let numbers = [-10, -5, 10];
let numberAboveZero = false;
for (let i=0; i<numbers.length; i++){
if(numbers[i] > 0) numberAboveZero = numbers[i]; // 오류
}자동으로 boolean 타입으로 추론된 numberAboveZero에 number 타입의 데이터를 넣으려하니 에러가 발생한다. 이 때 타입 어노테이션으로 에러를 방지할 수 있다.
let numberAboveZero: boolean | number = false;