타입스크립트 시작!

TypeScript 를 공부하기 앞서 기본적인것과 타입을 설명할 필요가 있어서 정리해보겠습니다.

 

타입스크립트란?

타입스크립트는 자바스크립트에서 타입을 추가한것이며 자바스크립트에서 조금더 확장 된 것이라고 보면 되겠습니다.

타입스크립트를 브라우저에서 실행하려면 파일을 한번 변환을 해줘야합니다. 우린 이 과정을 컴파일이라고 부릅니다.

 

왜 사용을 해야할까? 

자바스크립트도 물론 잘쓰고 있는 중인데 굳이 왜 타입스크립트를 써야할까요? 

타입스크립트는 자바스크립트 보다 더 좋은점이 있기 때문입니다.

1. 미리 생길 에러 방지

2. 개발 생산성 향상 - 코드 가이드와 자동완성 

 

미리 생길 에러 방지 

 - 타입스크립트는 자바스크립에와는 다르게 추가적으로 타입을 체크를 해줍니다. 예를 들어 더하기 함수가 있다고 가정한다면 인수에 스트링이 들어가게 되면 어떻게 될지 볼 수있습니다.

// javascript
function jsSum(a, b) {
	return a + b;
}

//typescript
function tsSum(a:number ,b:number) {
	return a + b;
}

// 첫번째 콘솔
console.log(jsSum(10, 20)); // 30
// 두번째 콘솔
console.log(jsSum(10, '20')); // 1020
// 세번째 콘솔
console.log(tsSum(10, 20)); // 30
// 네번째 콘솔
console.log(tsSum(10, '20')); // error

 

 

자바스크립트의 jsSum 함수인 경우, 에러없이 첫번째 두번째 콘솔이 실행이 됩니다.

 

타입스크립트의 tsSum 함수인 경우, 세번째는 문제없지만, 네번째는 미리 만들어놓은 tsSum의 인자의 타입과 맞지 않다는 에러가 뜨게 됩니다.

 

이렇게 자바스크립트는 간단한 더하기 함수에서조차 jsSum(스트링, 넘버) 가 에러 없이 동작이 됩니다. 

타입을 지켜주면서 에러없이 코드를 작동 시키기 위해 타입스크립트 언어를 사용하는 것입니다.

 

개발 생산성 향상 - 코드 가이드와 자동완성 

타입스크립트를 잘 사용해서 코드를 작성하면 좋은 점이 개발 생산성이 향샹 된다는 점입니다.

기존 코드를 재활용 할때 가독성과 안정성을 지키기 좋습니다.

현재, 제가  Visual Studio Code 툴을 사용합니다. 

개발자의 관점에서 편리하게 제공해주는 툴이 있습니다. 우리들은 내장되어있는 툴을 잘 사용 하면 조금 더 빠르게 코드를 작성할 수 있습니다.

자바스크립트와 타입스크립트 자동완성이 다른것을 볼 수 있습니다.

js

 

ts

 

이렇게 타입스크립트에서는 totalSum 에 대한 타입을 미리 number 로 지정을 했기 때문에, vsCode 에서 자동완성을 띄어 주어 개발속도를 조금은 올려줄 수 있습니다.