#1.5 Why not JavaScript
- 안정성. 타입 안정성이 큰 장점.
- 타입 안정성덕분에 런타입에러가 줄고 덕분에 생산성도 높아짐.
ex)
만약 js에서 [1,2,3,4,5]인 배열과 boolean인 false를 추가한다면
const ex1 [1,2,3,4,5]+false;
console.log(ex1); // 1,2,3,4false결과는 1,2,3,4false가 된다.
- 여기에는 두가지 문제가 있다.
1. 배열이 사라진다.
1. boolean이 사라진다.
- 결국 배열도, boolean이 아닌 string타입으로 변환되어 반환된다.
또다른 예를 들어보자.
function addEx(a,b){
return a/b;
}
addEx(2,3);
addEx("xxxx");위의 함수일 때, addEx(2,3)을 하면 결과는 0.6666666으로 함수의도대로 잘 동작한다.
하지만 addEx("xxxx")를 함수에 전달하면 결과는 NaN을 반환한다.
JS는 정말 친절한 언어이다. 개발자가 실수를 할 것이라고 생각하지않고 최대한 반환을 한다.
그래서 addEx함수에 두개의 입력값이 필요한대도 하나의 입력값만 보내도 실행을 시켜 NaN을 반환한 것이다.
에러가 없는것이다. 이것은 결코 개발자에게 좋은 것이 아니다.
다음은 런타임에러를 일으키는 예를 들어보자.
const hi = {name:'coco'};
hi.hello();위의 예로 실행을하면 console창에 에러가 뜬다. 타입에러가 뜬다.
Uncaught TypeError: hi.hello is not a function at <anonymouse>가 뜨는 이 에러는 유저의 컴퓨터에서 코드가 실행되면 나타나느 에러 이다.
코드가 실행하기 전에 오류를 띄워주어야한다. 그래서 타입스크립트를 사용하는 개발자가 많아지는 것이다.
#2.0 How Typescript Works
- 브라우저는 ts를 js로 변환하여 이해한다. Nodejs는 ts, js다 이해한다.
- ts는 개발자가 실수하지 않도로 보호해준다.
- Q: 타입스크립트가 어떻게 우릴 보호해주냐- A: 타입스크립트코드가 자바스크립트로 변환되기 전에 발생한다. 즉, ts가 우리의 코드를 확인한 다음에 변환된 js안에서 실수가 일어나지 않게 확인을 해준다.
- 실수가 있는 ts코드는 런타임에 js코드로 변환되지 않는다. 실수가 없는 ts코드는 js코드로 변환된다.
- 이러한 보호장치는 런타임(유저가 코드를 실행하는)에 발생하는 것이 아니다.
ts에서 같은 js예제를 사용해보자.
const hi = {name:'coco'};
hi.hello();ts코드에서 저렇게 작성하면 런타임 이전에 코드 작성이 완료된 시점에 hello에 빨간 밑줄이 생길 것이다.
밑줄에 마우스를 갖다대면 Property 'hello' does not exist on type '{name:'coco'}'. 라는 에러를 띄어준다.
그렇기에 우리는 실수했다는것과 실행이 안될거라는 것을 알 수 있다.
타입추론 덕에 이러한 보호장치가 가능한 것이다.
#2.1 Implicit Types vs Explicit Types
예
let a = 'hello'; // 타입추론을하여 a변수는 string타입을 받는 변수라고 추론한다.
a = 'bye'; // string을 할당하였으니 문제가 없다.
a = false; // string타입으로 추론된 a변수에 boolean이 들어오면 에러를 발생?표시?시킨다.
let b : boolean = fasle; // 명시적으로 변수 b는 boolean타입임을 표시했다.
b = 'hi'; // boolean타입으로 명시된 변수 b에 string인 hi가 할당되면 에러를 표시한다.
let c = [1,2,3];
let d : number[] = [1,2,3];
// 변수 c와 d는 타입이 같다.
// 타입추론과 명시는 어디에서든 가능하다
const player = {
name:'coco'; // 타입추론으로 string타입인 것을 알 수 있다.
}
player.name = 1; // 타입추론된 string이 아닌 number이기 때문에 에러가 발생.
player.hello(); // player함수에는 hello가없기 때문에 에러 발생.