[TypeScript] html에서 TypeScript 처음 사용해보기 (1) (TypeScript란?)

저번 Google의 Maps API를 사용해보는 과정에서 기본적으로 API를 TypeScript으로 제공해주는 것을 알았다.

 

JavaScript랑 굉장히 비슷한 이름이어서 확인해보니.. 뭔가 조금 다른 것 같기도 하고.....
어쨌든 저번에 간단하게 사용해봤던 구글 지도는 기존에 사용하던 JavaScript를 이용해 만들게 되었는데,
뭔가 문득 궁금했다. '아니 TypeScript가 무슨 언어길래. 사용자가 얼마나 많기에 Google의 Maps API를 제공해주는 예제 코드를 보여주는데 가장 먼저 보여주는 거지?' 그래서 우연히 개발자 친구랑 얘기를 하다 TypeScript에 대해 묻게 되었고, 나름 친절(?)하게 답변받았다.

TypeScript는 기존 JavaScript에서 정적 타입이 지원된 언어로 JavaScript 보다 코드를 관리하는데 훨씬 편하다고 설명해주었다.

그래서 TypeScript란 무엇인가! 를 쭉 알아보기로 했다.

첫인상은 JavaScript와 거의 동일한데, 일일이 타입을 지정해주며 코드를 작성해나가는 것이 굉장히 번거로워 보였다.
물론 이건 아무것도 모르던 상황의 첫인상일 뿐. 왜 굳이 일일이 타입을 지정해주면서 코드를 작성하는지 이유를 알아보기로 했다.

1) 예상치 못한 오류 또는 에러를 컴파일 단계에서 확인할  수 있다.
-> 정적 타입으로 코드를 작성해두었기에 의도하지 않았거나 예상치 못한 부분에서 생길 수 있는 변수들을 차단할 수 있다는 뜻입니다.
예를 들어 두 수의 합을 구하는 함수를 만들어 두었다고 가정한다면

function sum(a, b) {
    return a + b;
}

add(1, 2) // 결과값 : 3

add('1', '2') // 결과값 12​

분명히 두 '수'의 합을 구하려 했으나 코드를 작성하다 실수로, 혹은 값을 전달받다 실수로 text로 전달받게 된다면 '1+2 = 12'가 되는 기적을 경험할 수 있다. 물론 JavaScript는 동적 타이핑을 지원하다 보니 아무런 에러 없이 예상하지 못한 작업들을 수행하게 된다.
이번엔 TypeScript의 타입을 지정한 정적 타이핑을 이용해 코드를 작성해본다면

function sum(a: number, b:number) {
    return a + b;
}

sum('1', '2');

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

이처럼 컴파일을 돌릴 때 바로 예상치 못한 오류를 확인할 수 있다.

IDE에서도 컴파일전에 미리 에러를 출력해준다.

물론 이런 간단한 상황에서는 개발자가 직접 파악이 가능하겠지만 코드가 길어지고 복잡해진다면 예상하지 못했던 곳에서 다양한 변수들이 생길 수 있습니다. Typescript에서는 정적 타이핑으로 이런 상황을 사전에 방지할 수 있다는 장점이 있습니다.

2) 따라서 코드가 길어지는 상황에서의 협업과 코드의 안정성이 올라간다는 장점이 있다.

-> 코드가 길어지고 복잡해지면 다른 사람이나 혹은 나중에 본인도 코드를 확인했을 때 이게 뭐지..? 싶은 경우가 생길 수 있다.
하지만 정적 타입 지정으로 코드를 작성하면 개발자의 의도를 전달해줄 수 있고, 코드 전체의 가독성을 높여준다.

또한, TypeScript는 배포하기 이전에 컴파일을 하며 JavaScript보다 더 많은 부분을 검토할 수 있고 미처 발견하지 못했던 오류를 확인할 수 있어 안정적이다.

 

 

 

TypeScript를 이용해 코드를 작성해보자

 

이전에 만든 Maps API를 React로 다시 작업해보고자 하던 와중 TypeScript에 대해 알게 되어 바로 React에 활용해보려 했지만!
TypeScript에 대해 아직 모르는 게 많다고 생각되어 먼저 TypeScript와 친해져 보기로 했다.

 

html환경에서 코드를 작성하려 했고, TypeScript파일인. ts 파일을 html에서 사용하기 위해선 몇 가지 준비가 필요했다.
TypeScript의 ts파일들을 .js 파일로 컴파일해 변환시켜줘야 한다. 그 이후 변환된 .js 파일을 html 파일에 불러와서 사용하면 된다.
그러기 위해선 tsconfig.json파일이 필요하다.
이 파일은 TypeScript 컴파일의 세부 설정들이 가능하다.

{
    "compilerOptions": {
        "target":"ES6",				// 어떤 버전의 자바스크립트로 컴파일할지.
        "module": "system",			// 자바스크립트간 import 방법
        "strictNullChecks": true 		// null, undefined의 조작을 감지해 에러출력
    }
}

그 이후 html에서 script 태그를 이용해 컴파일된 ts 파일인 js파일을 불러오면 된다.

<script src="ts파일명.js"></script>

 

일단 이번 게시물에선 TypeScript가 뭔지, 사용 방법은 어떻게 되는지에 대해 알아봤다.
다음 게시물에선 localStorage와 TypeScript를 이용해 간단하게 만들어 보았던 것에 대해 글을 작성해보겠다.