[TypeScript] 타입스크립트 시작하기

$ npx create-react-app [프로젝트 명] --template typescript

--template typescript 가 있으면 타입스크립트 설정이 적용된 프로젝트가 생성된다.

$ npx create-react-app my-app --template redux-typescript

--template redux-typescript 가 있으면 타입스크립트,리덕스툴킷 설정이 적용된 프로젝트가 생성된다.

타입스크립트란?

자바스크립트에 타입을 부여한 언어.

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 자바스크립트 언어로 파일을 한번 변환 해주어야 하는데 이런 과정을 컴파일(Compile)이라 한다.

Why TypeScript?

에러의 사전방지

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

// case2
function sum(a: number, b: number) {
  return a + b;
}

위의 두 코드 모두 매개변수 a,b의 합을 구하는 함수이지만 매개변수에 a=‘10’, b=‘20’을 할당했을때 결과는 전혀 다르다.

case1의 경우 ‘1020’이라는 문자열의 합이 반환 되기 때문에 숫자를 더하려는 의도로 함수를 작성하였다면 개발자의 의도와는 다른 에러가 발생 할 수 있다.

하지만 case2의 경우 함수 호출 단계에서 a,b 매개 변수에 number 타입이 아닌 값이 할당 될 수 없다고 에러를 띄운다.

즉, 개발과정에서 코드를 작성할 때 개발자의 의도를 더 명확히 하면서 의도하지않은 오류를 사전에 처리 할 수 있다.

코드 자동 완성과 가이드

개발할때 가장 많이 사용되는 Visual studio Code는 툴의 내부가 타입스크립트로 작성되어 있기 때문에 타입스크립트 개발에 최적화 되어 있다.

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

let total = sum(10, 20);
total.toLocaleString();

sum() 함수를 이용하여 두 숫자의 합을 구한 다음 toLocaleString() (특정 언어의 표현 방식에 맞게 숫자를 표기하는 API)을 적용한 코드를 작성할 때, total 이라는 변수의 타입이 코드를 작성하는 시점에 number 타입이라는 것을 개발자만 알고 있다는 점이 중요하다.

그렇기 때문에 number 타입의 API인 toLocaleString()을 작성할 때 VSCode에서 toLocaleString()에 대한 자동완성 기능을 제공해주지 않는다.

하지만, typeScript로 코드를 작성했다면 total의 타입이 number라는 것을 VSCode가 알기 때문에 자동완성 기능을 제공해준다.

이를 활용하면 오탈자를 방지하고 코드작성 속도 또한 향상 될 수 있다.

즉, 위와같은 API를 일일이 타이핑하는 것이 아닌 tap으로 빠르고 정확하게 코드를 작성해 나갈 수 있다.