[TypeScript] 타입 선언 ( : type )과 타입 단언( as type )

JavaScript만 사용하다가 TypeScript를 공부하고 있습니다. 타입만 지정해주면 되지 하고 쉽게 생각했는데, 그게 아니더군요. 특히 내가 처음부터 타입까지 정의해서 사용면 문제가 되지 않지만, JavaSript의 특성상 다양한 타입의 값을 반환하는 함수를 사용할때던가 하는 경우가 좀 까다롭더군요. 

TypeScript에서 타입 선언과 타입 단언은 컴파일되면 제거되고 실행되는 코드에 영향을 주지 않습니다. 타입 체크에만 사용되는 것입니다. 이 글의 내용은 everyday types 를 번역 정리한 내용 입니다.

 

 

1. 타입 선언 (Type Definition)

 

const, var, let을 사용하여 변수 선언할 때 Type Annotation을 사용하여 타입을 지정합니다.

 

// 기본타입 : string, number, boolean
let foo: string = 'Hello';

// 배열 선언
let a = Array<number>();
let b: Array<number> = Array();
let c: Array<number> = Array<number>();
let d: number[] = [];

// any 타입 : 타입 체크를 하지 않는다.
let obj: any = { x:0, y:0 };

// 함수의 인자와 반환값 타입 선언
function add(a: number, b: number): number {
    return a + b;
}

// TypeScript가 호출 방법을 결정할 수 있는 곳에 익명함수나 화살표함수가
// 나오면 타입이 자동으로 결정됩니다.
const a:number[] = [1, 2, 3];

a.forEach(function(b) {
    console.log(b);
});

a.forEach((b) => {
    console.log(b);
});

// 객체 타입을 정의하려면 해당 객체의 속성과 유형을 나열합니다.
function Link(props: {page: string, children: string}) {
    //
}

// 인터페이스를 사용하는 방법
interface LinkPorps { page: string, children: string }
function Link(props: LinkProps) {
    //
}

// 타입정의 사용하는 방법
type LinkProps = { page: string, children: string }
function Link(props: LinkProps) {
    //
}

 

 

2. 타입 단언 (Type Assertions)

 

어떤 타입의 값이 나올지 TypeScript가 알 수 없는 경우가 있습니다. 예로 document.getElementByID() 함수는 ID를 가진 어떠한 엘리먼트도 반환할 수 있습니다. 하지만 코드를  작성하는 개발자는 무엇을 가져오려고 하는지를 알고 있습니다.

 

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

 

이처럼 함수 자체는 여러 유형의 데이터를 반환할 수 있지만, 코드 작성시 확실히 어떤 유형을 가져오는 알 경우 단언으로 타입을 지정할 수 있습니다.