본문 바로가기

FrontEnd/FE-study

[Typescript] 타입스크립트란? (타입스트립트 사용하기)

1. 타입스크립트(TypeScript)란?

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어로 자바스크립트에서 동적으로 관리되던 타입을 엄격하게 관리한다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있으며 개발자 구인 시 우대사항 기술로도 자주 언급되고 있다.

 

타입스크립트는 슈퍼셋(Superset)이다

| 슈퍼세트(Superset)는 프로그래밍 언어에서 특정 언어의 기능을 모두 포함하면서 다른 기능을 포함하도록 확장, 개선된 언어를 의미한다. 

출처 : https://medium.com/geekculture/typescript-vs-javascript-e5af7ab5a331

 

2. 타입스크립트는 어떻게 동작할까?

타입스크립트는 브라우저에서 파싱하고 실행할 수 없다. 따라서 브라우저에서 사용할 수 있는 JS파일로 트랜스파일하는 과정이 필요하다. 타입스크립트 트랜스파일러는 npm이나 IDE의 플러그인을 통해 설치할 수 있다. 

//typescript.ts
function add(a:number,b:number){
 return a + b;
}
console.log(add(1,2));

위의 타입스크립트 코드를 트랜스파일하여 JS파일로 변경하자. 

npx tsx typescript.ts
//typescript.js
function add(a,b){
 return a + b;
}
console.log(add(1,2));

 

3. 타입스크립트의 장점과 단점 

자바스크립트에서 타입을 설정하지 않았을 때 발생하는 문제는 무엇일까?

자바스크립트의 변수는 할당된 값을 기준으로 타입이 동적으로 변경된다. 이런 특징으로 유연하게 코드를 작성할 수 있지만 잘못된 인자를 넣으려고 할 때 런타임 단계에서 에러가 발생할 수 있다.

 

타입스크립트를 사용하면 이러한 문제를 해결할 수 있다. 잘못된 접근이 이루어졌다는 것을 코드 작성 단계에서 알 수 있으며, 더 나아가 적절한 변수명을 추천해주고 수정할 수 있다. 

 

타입스크립트의 장점 

1. 미연에 여러 문제 방지

2. 가독성 증가 - 유지보수 측면에서 큰 장점 

3. 객체지향프로그래밍에서 더 큰 힘 발휘 

4. 오류 바로 확인  - 타입을 통해 강력한 자동완성 사용

 

타입스크립트의 단점 

1. JS로 트랜그파일된 후 실행되기 때문에 정적언어라 보기 어려움

2. 추가로 학습되고 적용하는 시간

3. 첫음 적용시 몇배의 시간이 걸릴 수도 있음.