본문 바로가기

FrontEnd/Type Script

[TS]Type Script 를 써야하는 이유.

Java Script 의 이상한 점

Java Script는 아주 flexible한 언어이다 조금 지나치게..?

뻔히 에러가 나는 코드 이지만 일단 실행시켜서 값을 맘대로 도출해주거나 이미 실행하고 난 다음 에러를 띄워준다.

// arr + boolean = string..?
[1,2,3] + false
'1,2,3, false'

 

위와 같이 arrayboolean은 더할(+)수가 없는데,

자바스크립트는 이걸 구지구지구지구지 연산해서 보여준다..그 결과 string 이 되어 이상한 게 되었다.

// d 라는 함수는 인자를 두개 받고 a와 b를 나누어서 값을 리턴한다

function d (a,b){
return a/b;
}

d('123');
NaN

 

이와 같이 매개변수를 두갤 받는 함수이지만 하나만 받아도 어케든 값을 도출해낸다

그게 비록NaN(Not A Number)일지라도.....

 

JS는 매우 유연한 언어 이기 때문에 때로는 편하기도 하지만,

여러 에러를 사전에 막지 못하고 코드가 실행이 된후에도 잘 못 된걸 알려주지 않거나,

혹은 실행 후에 알려주기도한다.

실행 후에 그런다는게 중요하다.

 

이는 사용자나, 코드짜는 사람이나 아주 매우 힘든 문제이다.

사용자는 에러를 직접 접해 당황스럽고,(개발자도 그렇지만)

개발자는 이러한 에러를 사전에 방지해야하지만,

JS의 언어적 특성상 타입을 정의 를 할수없어 얘기치 못한 에러에 시달리기도한다.

 

JS 의 불합리함을 막아주는 안전장치 Type Script

이에 비해 Type Script는 코드가 실행이 되기전에 에러를 띄워주고, 사전에 방지해준다.

타입스크립트는  JS와 비슷하게 작성할수있고, 타입을 명시해줄수 있다.

코드가 컴파일해서 JS로 변환, 브라우저로 전송된다.

브라우저JS만 알아먹을수있으니 그렇다. (타입 스크립트 자체를 알아듣는건 아니다.)

위와 같은 JS 코드도 TS 로 작성하면

[1,2,3] + false

// 에러 메세지
Operator '+' cannot be applied to types 'number[]' and 'boolean'

연산자 + 는 number 배열과 boolean 타입을 연산 할수없다고 컴파일 전에 미리 알려주고

function d (a,b){
return a/b;
}

d('123');

// 에러메세지
Expected 2 arguments, but got 1.

2개의 인자(argument)를 받아야하지만 하나만 들어왔다고 컴파일 전에 명시해준다.

 

한마디로

Type Script는 Java Script 의 이상한 에러를 사전에 막아주는 안전장치  이다.

 

더보기

MS 사에서 만든 친구다 > 그래서 VS Code 와 궁합이 좋다.

java에서 컴파일 하기전에 에러를 보여주는 메커니즘과 비슷하다고 느꼈다.

 

'FrontEnd > Type Script' 카테고리의 다른 글

타입스크립트 복습하기  (0) 2024.04.25
[TS] interface  (0) 2024.03.02