TypeScript의 타입 어노테이션 및 타입 추론

이렇게 TypeScript가 JavaScript에 타입을 입히는 언어라고 알게 되었는데, 어떠한 방식으로 타입을 부여하는지 알아보자.

 

크게 타입 어노테이션과 타입 추론 방법이 있다.

 

타입 어노테이션

개발자가 해당 변수의 타입을 같이 작성해주는 것이다.

let number_variable: number = 1
let string_variable: string = "seungkyu";
let boolean_variable: boolean = true;

이렇게 변수 옆에 :를 사용해서 객체의 타입을 지정해주는 방식이다.

 

배열은 다음과 같이 선언한다.

let boolean_variables: boolean[] = [true, true, false];

 

 

당연히 객체의 타입으로 타입을 지정 할 수도 있다.

class Person{
    private readonly _name: string;
    constructor(name: string){
        this._name = name;
    }

    sayName(){
        return `${this._name} - hello`;
    }
}

let seungkyu: Person = new Person("seungkyu")

이렇게 타입을 지정해주면, IDE에서 해당 객체들의 메서드를 찾아서 보여줄 수 있다.

 

 

리터럴 객체는 키-밸류 사이에 지정할 수 없으니, 변수명 옆에서 지정한다.

let seungkyu1: {age: number, name: string} = {
    age: 24,
    name: "sk"
}

 

마지막으로 함수의 타입 어노테이션이다.

function a(name: string): string {
    return `${this._name} - hello`;
}

다음과 같이 파라미터의 타입은 파라미터의 변수명 옆, 리턴 타입은 파라미터 선언 후에 명시한다.

 

타입 추론

타입 추론은 말 그대로 추론하는 방식이다.

변수의 타입을 어노테이션으로 지정해주지 않아도, 타입스크립트가 알아서 타입을 찾아가도록 한다.

let a = 1;

이렇게 선언을 하면 a의 타입은 누가봐도 number이다.

 

그렇기에 IDE에서도 타입을 바로 찾아준다.

 

let a = 1;

a = "hello";

그렇기에 이렇게 number에다가 string을 대입하는 위의 코드는 에러가 발생한다고 한다.

 

 

타입추론도 정말 편리한 기능이다.

 

하지만 모두 타입추론으로 만들어버린다면, TypeScript를 사용하는 의미가 없어진다고 생각한다.

 

바로 값을 초기화하는 거 아니면 최대한 타입 어노테이션을 통해 타입을 명시적으로 알려주면서 개발하도록 해야겠다.