끄적끄적 메모장

[TypeScript] 타임스크립트에 대해서 알아보자 본문

프론트엔드/TypeScript

[TypeScript] 타임스크립트에 대해서 알아보자

병걸 2023. 5. 10. 10:57

 

타임스크립트는 2012년 마이크로소프트가 자바스크립트 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다.

타임스크립트는 자바스크립트에 타입을 부여한 자바스크립트의 확장된 언어입니다.

 

타임스크립트와 자바스크립트의  차이

- 자바스크립트는 동적 타입의 인어프리터 언어로 런타임에서 오류를 발견할 수 있지만, 타입스크립트는 정적 타입의 컴파일 언어이며 타임스크립트 커파일러 또는 바벨을 통해 자바스크립트 코드로 변환합니다.

- 타입스크립트는 자바스크립트에 비해 코드 작성 단게에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 떄문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

- 자바스크립트로 작성한 코드는 확장자로 .js 타입스크립트로 작성한 코드는 확장자로 .ts 를 사용합니다.

 

타입스크립트를 왜 써야할까?

1) 에러를 사전에 방지할 수 있다.

예시로 아래의 코드를 봐보자.

// math.js
function min (a, b){
	return a - b;
}

min(2,1); // 1
min('2','1') // 21

위 코드는 a와 b의 빼기를 구하는 자바스크립트 코드이다.

min ( '2' , '1' ) 같은 경우 의도했던 결과와 달리 21이라는 결과가 나타나게 된다.

타입스크립트를 사용하게 되면 이러한 동작을 예방할 수 있다.

// math. ts
funcion min (a : number, b : number){
	return a + b;
}

min(2,1); // 1
min('2','1') // Error: '2'는 number를 할당할 수 없습니다.

위 코드는 타입스크립를 사용하였다.

min ( '2' , '1' ) 에서 오류를 확인 할 수 있다.

 

2) 코드 자동 완성

타입이 지정되어 있기때문에 API들을 일일히 치지 않고 미리 보기를 통해 빠르고 정확하게 작성할 수 있다.

에러메시지같은 경우도 기존 자바스크립트보다 퀄리티가 좋고 자세하고 친절하게 알려준다.

Comments