type annotation
사용타입스크립트 코드
-> 타입스크립트 컴파일러
-> 순수 자바스크립트
-> 브라우저가 자바스크립트 코드 실행
// json
{
"id": 1,
"title": "delectus aut autem",
"completed": false
}
위의 JSON
데이터를 자바스크립트 코드로 읽는 과정을 통해 JS의 문제점을 살펴보자
axios(url)
.then(response => {
const todo = response.data;
console.log(`
id: ${todo.ID}
title: ${todo.Title}
finished? ${todo.finished}
`)
})
.catch(err => console.log(err));
response.data
가 위의 JSON
데이터라고 해보자.
todo.ID
라는 것은 JSON
데이터에 존재하지 않으므로 todo.ID
는 undefined
가 된다.
todo.Title
, todo.finished
도 마찬가지다.
위 상황에서 코드가 이미 문제를 가지고 있음에도 자바스크립트에서는 그대로 프로그램이 실행되며 undefined
만 출력할 뿐이다. 이런 경우에는 프로그램이 작동한다해도 정상적으로 작동하는 상황이 아니다. 그러나 타입스크립트를 사용하면 이런 상황을 미연에 방지할 수 있다.
interface Todo {
id: number;
title: string;
completed: boolean;
}
타입스크립트에서 오브젝트 프로퍼티들의 데이터 타입을 지정해주기 위해 사용되는 interface
를 통해 위 자바스크립트 코드의 문제를 해결해보자.
axios(url)
.then(response => {
const todo = response.data as Todo;
console.log(`
id: ${todo.ID}
title: ${todo.Title}
finished? ${todo.finished}
`)
})
.catch(err => console.log(err));
위 코드에서 Id
, Title
, finished
부분에 에러가 표시된다. 그리고 에러는
Property 'ID' does not exist on type 'Todo'. Did you mean 'id'?
타입스크립트 컴파일러는 response.data as Todo
를 통해 이미 todo
가 Todo
타입임을 알고 있으므로 타입 체크를 통하여 사용할 수 없는 프로퍼티들임을 경고해주고 있다.
만약 tsc
명령어를 통해 위 타입스크립트 코드를 컴파일하게 되면 에러가 떨어지게 된다.
다만, 에러가 발생했다해도 컴파일된 자바스크립트 파일이 생성되긴 할 것이다.
그러나 타입스크립트 코드를 통해 프로그램 코드의 어느 부분에 어떤 문제가 있는 것인지는 확실히 잡아낼 수 있다.