타입스크립트란?
자바스크립트에 타입을 부여한 언어, 자바스크립트의 확장된 언어이다.
타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부른다.
왜 타입스크립트를 써야하는가?
1. 에러를 사전에 방지할 수 있다.
아래와 같이 자바스크립트 코드가 있다.
function sum(a, b) {
return a + b;
}개발자의 의도는 숫자값 두개를 받아서 둘의 합을 구하는 결과를 얻고 싶었을 것이다.
그런데 타입이 명시되어있지 않으므로
sum('10', '20'); // 1020이런식으로 누군가 호출을 했을 경우 의도치 않은 결과가 나와버린다.
숫자가 들어갈 자리에 문자를 넣지 못하도록 아래와 같이 타입스크립트가 도와줄수 있다.
// math.ts
function sum(a: number, b: number) {
return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.2. 자동완성
타입스크립트를 이용하면 개발 툴의 기능을 최대로 활용할수가 있는데, 개발자들이 자주 쓰는 vsCode 같은 경우 내부 로직이 타입스크립트로 되어있어서 타입스크립트 개발에 최적화가 되어있다.
아래와 같은 코드를 보자.
function sum(a, b) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();위와 같은 코드를 작성할 때, total 이라는 변수의 타입이 개발자가 코드를 작성하는 시점에 number 라는 것을 자바스크립트가 인지하지 못한다.
개발자 스스로가 sum() 함수의 결과를 예상하고 타입이 number 라고 가정한 상태에서 number 의 API 인 toLocaleString()를 코딩하게 되는 것이다.
total이라는 값이 정해져 있지 않기 때문에 자바스크립트 Number에서 제공하는 API인 toLocaleString() 을 일일이 작성했다. 만약에 오탈자라도 나서 toLocalString()이라고 했다면 이 math.js 파일을 브라우저에서 실행했을 때만 오류를 확인할 수 있었을거다.
타입스크립트로 작성을 한다면
function sum(a: number, b: number): number {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString();변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄워줄 수 있고 따라서, API를 다 일일이 치는 것이 아니라 tab으로 빠르고 정확하게 작성해나갈 수 있다.
.ts 와 .tsx 의 차이
.ts : 순수한 타입스크립트 파일
.tsx : jsx 를 담을 수 있음
type vs interface
- 객체 구조의 타입을 다룰 떄는 interface / 복잡한 타입(아래와 같은 예제)을 다룰 때는 type
type Inputs = 'Space' | 'Enter'
type Outputs = 'Number' | 'String'
type InputOutput = (Inputs | Outputs) & { name: string }
const arr: Array<string> = []
// Array의 최신 API는 모두 interface의 declaration merging을
이용하여 지원(기존 타입 정의 + 새 타입 정의 병합)- 애플리케이션 레벨에서는 오히려 interface보다 type을 쓰는 것이 좋다. 어차피 declaration merging은 아래의 Array 사례와 같이 점진적으로 API가 변화될 때나 사용하는 것이 좋기 때문. 따라서 그냥 일반 웹 서비스를 개발한다면 declaration merging으로 혼선을 빚을 수 있는 interface는 지양하자.
객체의 키, 값 타입을 확장하는 경우
// 인터페이스
interface Person {
firstName: string;
lastName: string;
}
interface PersonWithBirthDate extends Person {
birth: Date;
}type PersonWithBirthDate = Person & { birth: Date };Reference
