타입스크립트 D11 (새 강의)

타입스크립트의 특징

1. 개발환경에서 에러를 잡는 것을 도와준다
2. 코드 분석을 위한 type annotation 사용
3. 개발 중에만 작동 (프로그램 실행때는 자바스크립트로 이미 컴파일된 상태)
4. 타입스크립트 컴파일러는 성능 최적화에 관여하지 않음 (다른 언어들의 컴파일러와 다른 부분)

타입스크립트로 작성한 프로그램이 실제 브라우저에서 작동하는 과정

타입스크립트 코드 -> 타입스크립트 컴파일러 -> 순수 자바스크립트 -> 브라우저가 자바스크립트 코드 실행

TS의 필요성과 JS의 문제점

// 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 명령어를 통해 위 타입스크립트 코드를 컴파일하게 되면 에러가 떨어지게 된다.
다만, 에러가 발생했다해도 컴파일된 자바스크립트 파일이 생성되긴 할 것이다.
그러나 타입스크립트 코드를 통해 프로그램 코드의 어느 부분에 어떤 문제가 있는 것인지는 확실히 잡아낼 수 있다.