[TypeScript] 타입 어노테이션과 타입 추론

📌

타입 어노테이션과 타입 추론을 적절히 활용하면 코드의 가독성과 안전성을 모두 높일 수 있습니다.

◼ 타입 어노테이션(type annotation)

타입 어노테이션은 값이 어떤 타입을 참조하는지 개발자가 직접 타입을 작성하여 타입스크립트에게 알려주는 방식입니다.

변수, 함수 등 옆에 : 기호와 함께 타입을 넣어주면 됩니다.

// 변수
let name: string = 'Owen';
let isMarried: boolean = false;

// 배열
let animals: string[] = ['cat', 'dog', 'cow'];

// 내장 객체
let now: Date = new Date();

// 객체 리터럴
let point: {x: number, y: number} = {
	x: 10,
	y: 20
}

// 함수
const logNumber: (i: number) => void = (i: number) => {
	console.log(i);
}

// 원시 타입
let haveNothing: null = null;
let nothing: undefined = undefined;

◼ 타입 추론

타입스크립트는 코드에서 타입을 명시적으로 지정하지 않아도, 컴파일러가 코드의 문맥을 통해 타입을 자동으로 추론해줍니다.
타입 추론 덕분에 개발자가 직접 타입 어노테이션(명시적으로 지정)을 하지 않아도 코드의 타입 안전성을 유지할 수 있습니다.
예를 들어, 다음과 같이 변수, 함수, 객체, 배열 등의 타입을 타입스크립트가 자동으로 추론해줍니다.

기본 타입 추론

// 변수의 타입 추론
let num = 10; // number로 추론
let str = "Hello"; // string으로 추론

// 배열의 타입 추론
let strings = ["a", "b", "c"]; // string[]로 추론

// 객체 리터럴의 타입 추론
let person = {
    name: "Alice",
    age: 25
}; // { name: string; age: number }로 추론

person.name = "Bob"; // 정상
person.age = 30; // 정상
person.age = "thirty"; // 오류: 'string' 형식은 'number' 형식에 할당할 수 없습니다.

// 함수 반환 타입 추론
function add(a: number, b: number) {
    return a + b; // number로 추론
}

const result = add(5, 3); // result는 number로 추론

컨텍스트를 통한 타입 추론

타입스크립트는 변수나 함수의 문맥을 통해서도 타입을 추론합니다.

// 함수 매개변수와 반환 타입
let add = (a: number, b: number) => a + b; // (a: number, b: number) => number로 추론

// 콜백 함수의 타입 추론
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
    console.log(num); // num은 number로 추론
});

◼ 타입 어노테이션을 해야 할 때

항상 타입 추론을 사용해도 괜찮을까요? 그렇지 않습니다. 타입 추론에만 의존하게 되면 타입스크립트의 장점인 안전한 코드 작성에서 멀어질 수 있습니다. 따라서 타입 어노테이션이 필요할 때 명확하게 해주는 것이 좋습니다.

// 1. 함수가 any 타입을 리턴하고 이 값을 명확하게 해야 할 때
const json = '{"a": 1, "b": 2}';
const object = JSON.parse(json); // ❌ any 타입으로 인식 → 타입 어노테이션 필요
console.log(object); // {a: 1, b: 2}
object.asdadsfgsdasdasdasd // 타입스크립트는 object를 any 타입으로 인식해서 에러를 찾지 못함

// 2. 변수를 선언하고 나중에 초기화할 때
const colors = ['red', 'blue', 'green'];
let foundColor; // ❌ any 타입으로 추론됨 → 타입 어노테이션 필요

for (let i = 0; i < colors.length; i++) {
	if (colors[i] === 'blue') foundColor = true;
}

// 3. 추론할 수 없는 타입을 가질 때
let numbers = [-10, -5, 10];
let numberAboveZero = false; // ❌ boolean 타입으로 추론됨 → 타입 어노테이션 필요 (boolean | number)

for (let i = 0; i < numbers.length; i++) {
	if (numbers[i] > 0) numberAboveZero = numbers[i]; // error
}