(TypeScript) 1. TypeScript

TypeScript란?

JavaScript + 알파(확장). 자바스크립트의 모든 기능에 타입이라는 새로운 개념이 추가되었다고 함

기존의 JavaScript 코드에서는 자료형을 지정하지 않고 유연하고 자유로운 조작이 가능했었음

그러나 프로젝트의 규모가 커지면 이 자유로움이라는 부분은 장점보다는 단점이 될 가능성이 크다고 볼 수 있음

 - 타입이 정해져 있지 않은 자바스크립트 같은 경우 코드를 보았을 때 값을  바로 선언한 코드가 아닌 이상 무슨 타입으로 값이 들어가는지 
   바로 확인하기에 어려울 수 있음

 

TypeScript의 특징

1. 컴파일 필요
2. 타입 지정 필요
3. 엄격한 검사

TypeScript 컴파일

TypeScript 파일을 html이 인식하지 못하므로, JavaScript로 변환해줄 필요가 있음

 

컴파일 과정

코드 → AST(추상 문법 트리) → 타입 검사 (Tyoe Checking)

→ 검사 실패 시 컴파일 종료

→ 검사 성공 시 AST를 자바스크립트로(안전한 JavaScript) 변환

→ JavaScript → AST → 바이트 코드 → 실행

 

이러한 과정을 거쳐서 실행 됨

 

타입 지정

TypeScript의 가장 큰 특징으로, 자료형이 존재하지 않는 JavaScript에 자료형을 부여하여 줌

let num : number;
num = 1;
num = "1"; // Type 'string' is not assignable to type 'number'

let str : string;
str = "123";
str = 123; // Type 'string' is not assignable to type 'number'

let numOrStr : string | number;
numOrStr = 1;
numOrStr = "1";
numOrStr = true; // Type 'boolean' is not assignable to type 'string | number'.

let list: number[];
list = [1, 2, 3];
list = [1, 2, "3"]; // Type 'number' is not assignable to type 'string'.
let anotherList: Array<number> = [1, 2, 3];

let tuple : [string, number];
tuple = ["hello", 1];
tuple = [1, "hello"]; // Type 'string' is not assignable to type 'number'.

let object : {name : string};
object = {name : "123"};
object = {name : 123}; // Type 'string' is not assignable to type 'number'.

type CusType = string | number;
let cum : CusType;

엄격한 검사

console.log("" == ture) // false
console.log(0 == ture) // false
console.log("" == 0) // true????
console.log(1 < 3 < 2) // ture?????

단순히 위의 사례 말고도, 에러가 나도 제대로 잡지 않는 등 자바스크립트의 허술한 부분에 감탄한 사람들이 적지 않을 것!

- Javascript 블로그에도 있을텐데 그때 "2"라는 문자를 서로 더하면 "22"가 되는 것 처럼 타입에 따라 다른 경우가 발생하는 경우!

타입스크립트에서는 어디에서 어떤 부분이 에러가 났는지 확실하게 잡아줌

그래서 공부를 한번 해보고자 합니당