typescript를 처음 사용할 때는 주위에서 대세라고 하니까 한번 써봐야 겠다 라는 생각이 있었습니다.
하지만 지금은 typescript를 필수로 사용하려 합니다.
js -> ts -> js -> ts 식으로 개발을 진행했었었는데
두번째 js로 개발을 할때는 많은 불편함을 느꼈었던것 같습니다.
typescript를 왜 사용해야 할까요??
타입 스크립트 장점
정적 타입 지원
function sum(a, b) {
return a + b;
}
sum(1, 2) // 3
sum("1", "2") // "12"
위의 코드를 작성한 의도는 숫자 두개를 입력받아 더해준 값을 return 하기 위해 작성하지 않았을까 싶습니다.
하지만 string 값을 넣으면 "12" 값이 출력되게 됩니다.
이는 Javascript가 동적 type 언어이기 때문입니다.
동적 Type 언어란것은 어떤 것일까요?
변수나 반환값의 type을 사전에 지정하지 않는 특성을 말합니다.
런타임에서 동적으로 Type이 정해진다고 이해하면 될것 같습니다.
이런 언어의 특성상 javascript는 런타임에서 에러를 발생시킬 가능성을 내포하고 있습니다(저는 실제 서비스에 에러를 발생시킨적이 있습니다....)
typescript를 이용하면 위의 경우를 방지할 수 있습니다.
위의 이미지는 아까 확인한 sum 함수를 typescript를 이용하여 작성한 것입니다.
number 타입 이외의 값이 들어오면 컴파일 단계에서 에러를 발생시킵니다.
타입을 정적으로 선언해두었기 때문에 함수를 의도한대로 사용할 수 있게끔 해줍니다.
이러한 컴파일 과정으로 에러를 미리 사전에 방지할 수 있습니다.
장점이 매우 크지만 코드량이 많아 진다는 단점도 존재합니다.
하지만 저는 장점을 더욱 중요시 여겨 ts를 선호하고 있습니다.
또한 typescript는 optional하게 작성할 수도 있습니다.
필요한 곳에만 작성할 수 있다는 뜻입니다.
저는 a에만 number type을 받도록 작성하였습니다.
ide 내에서 b의 type도 작성하라고 추천하고 있지만 하지 않아도 실행하는 데 문제는 없습니다!
ide에서의 높은 호환성
typescript를 이용하면 IDE에서 다음과 같은 특징들을 제공해줄 수 있습니다.
- code navigation (alt 와 함수 혹은 라이브러리를 클릭하면 해당 함수의 정보와 type을 확인할 수 있습니다.)
- autocompletion (자동완성 기능)
- quick fix (실수에 대한 수정을 알려줍니다.)
- 타이핑중에 에러가 있다면 바로 에러를 출력해 줍니다.
객체지향 지원
인터페이스, 제네릭, 상속 과 같은 객체지향 프로그래밍 지원을 가능케 함으로써 크고 복잡한 프로젝트의 코드 기반을 구성하기 쉽게 도와줍니다. 또한 기존의 객체지향 언어에 익숙한 개발자들에게 낮은 허들을 제공해줍니다.
typescript는 javascript 슈퍼셋 입니다.
자바스크립트의 기본 문법에 type을 추가한 언어라는 뜻입니다. 따라서 js 파일은 ts로 변경하고 컴파일하여 사용할 수 있습니다.
출처 : https://www.samsungsds.com/kr/insights/TypeScript.html
https://www.altexsoft.com/blog/typescript-pros-and-cons/
https://poiemaweb.com/typescript-introduction
'Frontend > Typescript' 카테고리의 다른 글
Typescript class 🏛 (0) | 2022.04.19 |
---|---|
Typescript enum, enum vs object (0) | 2022.03.23 |
Typescript type vs interface (0) | 2022.03.23 |
Typescript 유틸리티 타입 [Utility Types] (0) | 2022.03.02 |
Typescript '<variable>' is declared but its value is never read. (0) | 2022.03.02 |