타입스크립트 기초

타입스크립트란?

• 자바스크립트에 타입을 부여한 확장된 언어

• 자바스크립트와 달리 브라우저에서 실행하기 위해 파일을 한 번 변환하는 과정이 필요

타입스크립트의 장점

1. 에러의 사전 방지
   브라우저 화면에서 데이터를 확인하기 전, 코드화면 상에서 데이터를 확인하고 에러 처리 가능

2. 코드 가이드 및 자동 완성 (개발 생산성 향상)
   해당하는 속성에서 제공하는 모든 API를 사용할 때, 자동으로 완성해줘, 오타 예방 가능

JS를 TS처럼!

JS파일에서 Jsdoc를 이용해서 파라미터를 정의해주면, 해당 함수에 마우스오버시 프리뷰가 나오는 것을 볼 수 있다.

/**
  * @param  {number}  a 첫 번째 숫자
  * @param  {number}  b 두 번째 숫자
*/

function  sum(a, b) {
  return  a  +  b;
}

하지만, sum()함수의 파라미터로 number가 아닌 string값을 줘도, Typescript파일이 아니기 때문에 잘못된 부분을 알려주지는 않는다.

sum(10, '20'); // '20'을 사용할 수 없다는 알림 안뜸.

@ts-check

상단에 // @ts-check라고 적어주면 Typescript를 사용한 것처럼 작동한다.

// @ts-check

/**
  * @param  {number}  a 첫 번째 숫자
  * @param  {number}  b 두 번째 숫자
*/

function  sum(a, b) {
  return  a  +  b;
}
sum(10, '20');

sum()함수에 파라미터로 number가 아닌 인자가 들어가면 알려준다.