[TS] 0. TypeScript란?

📣 타입스크립트란?

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

✔️ 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다(컴파일)

 

📣 타입스크립트의 컴파일러 tsc 

✔️ 타입 검사기

npm install -g typescript

tsc hello.ts

➰ hello.js 파일을 얻을 수 있다.

 

📣  왜 타입스크립트를 써야 하는가?

✔️ 에러의 사전 방지

// JS 코드
function sum(a, b) {
	return a + b;
}

sum('10', '20); // 1020

// TS 코드
function sum(a: number, b:number) {
	return a + b;
}

sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

➰ 의도하지 않은 코드의 동작을 예방할 수 있다.

 

✔️ 코드 자동 완성과 가이드

function sum(a: number, b: number): number {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

➰ total에 대한 타입이 미리 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리보기로 띄워준다.

 

📣  명시적 타입

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
 
greet("Maddison", Date());
// Argument of type 'string' is not assignable to parameter of type 'Date'.

greet("Maddison", new Date());

➰ Date()를 호출하면 string을 반환하기 때문에 함수 인자로 주었던 Date 타입과 맞지 않아 에러가 난다.

 

let msg = 'hello there!";
// 마우스 호버하면 화면에 'let msg: string' 이라고 뜬다.

➰ msg가 string 타입을 갖는다는 건 TS에게 알려주지 않아도 알아서 알아낼 수 있다.

➰ 어떻게든 타입 시스템이 알아서 타입을 알아낼 수 있다면 굳이 타입 표기를 적지 않는 것이 좋다.

 

📣  지워진 타입 

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

"use strict";
function greet(person, date) {
    console.log("Hello ".concat(person, ", today is ").concat(date.toDateString(), "!"));
}
greet("Maddison", new Date());

➰ 위의 .ts파일을 변환하면 밑의 .js파일을 얻을 수 있다.

➰ 대부분의 TS 전용 코드는 제거되고, 타입 표기 또한 완전히 지워진다.

 

📣  다운레벨링 : 상위 버전의 ECMAScript를 하위 버전의 것으로 바꾸는 것

`Hello ${person}, today is ${date.toDateString()}!`;

"Hello " + person + ", today is " + date.toDateString() + "!";

➰ 템플릿 문자열은 연결 연산자(+)로 이루어진 일반 문자열로 변환된다.

➰ 템플릿 문자열은 ECMAScript 2015에서 등장한 기능이고, TS는 새 버전의 코드를 ECMAScript3 또는 ECMAScript5 같은 예저너 버전의 것들로 다시 작성해 준다.

 

📣  엄격도

✔️ 켜고 끌 수 있는 몇 가지의 타입 검사 엄격도 플래그가 존재한다.

➰ --strict 플래그를 설정하거나 tsconfig.json에 "strict":true 를 추가하면 모든 플래그를 동시에 활성화 한다.

➰ noImplicitAny : 타입이 any로 암묵적으로 추론되는 변수에 대하여 오류를 발생시킨다.

➰ strictNullChecks : null과 undefined를 보다 명시적으로 처리해준다.

 

📚 타입스크립트 핸드북

https://www.typescriptlang.org/ko/docs/handbook

https://joshua1988.github.io/ts