간단한 Typescript 설명(1)

typescript

Typescript 는 Microsoft에서 개발한 프로그래밍 언어이다. Javascript의 superset(확대집합)이라고 한다. 간단히 설명하면 typescript는 컴파일 이후 javascirpt가 된다.

Typescript를 설명하기 전에, 우선 간단하게 javascript에 대해 알아보자. 개인적으로 Javascript의 장점 중 가장 멋지다고 생각하는 것은

• 웹 브라우저에서 실행되므로 운영체제에 제한을 받지 않는다.
• 엄격한 데이터 타입 체크를 요구하지 않는다.

이다.

여기서 데이터 타입 체크를 요구하지 않는 다는 것은 다음 예제를 통해 설명해보도록 하겠다.

var hello = '123';

hello라는 전역변수는 ‘123’라는 문자열을 받았을 때, 딱히 데이터의 타입을 제한하지 않았고, 사용하는 데도 무리가 없다. ‘123’이 들어가는 자리에 숫자형, boolean형 등 어떠한 값이 들어가도 전혀 무리가 없다. 이것이 데이터 타입 체크에 자유로운 javascript의 장점이다.

Typescript 필요성

Javascript는 유연하고 엄격한 제한이 없는 멋진 언어이다. 하지만, 많은 사람들이 같이 프로젝트를 진행할 경우 이런 장점은 독이 될 수 있다. 프로젝트의 다른 팀원이 어떠한 변수를 사용했는지 일일이 체크한다던지… 함수의 매개변수가 10개인데 각각 타입이 무엇인지….

이럴 경우 보다 엄격한 type의 사용이 필요할 수 있다.

Typescript는 javascript에 보다 엄격한 type의 사용을 적용함으로써 순수 javascript로 프로젝트를 진행할때보다 버그를 최소화 할 수 있는 언어이다. 또한, javascript와 크게 문법이 틀리지 않아 배우는 것도 어렵지 않다.

• Javascript 사용자에게 익숙하다.
• 엄격한 type을 사용하여 버그를 최소화한다.

Typescript 시작하기

그렇다면 typescript로 프로젝트를 만들어 보면서 좀 더 사용법을 설명해보도록 하겠다. 처음부터 create-react-app을 사용하여 진행하여도 괜찮으나, 이번에는 처음부터 코드를 작성해보도록 하겠다. create-react-app-typescript를 사용할 경우 다음 링크를 참조하길 바란다.

wmonk/create-react-app-typescript

다음의 명령어를 실행하여 진행해보도록 하자.

mkdir typescript-test
cd mkdir
yarn init -y

간단하게 package.json 파일만 생성될 것이다. 이제 typescript를 설치해 보자.

yarn add global typescript

해당 프로젝트에서만 사용할 것이 아니기 때문에 global로 설치하였다.

이제 두가지 파일을 root에 만들어서 진행해보도록 하자.

touch tsconfig.json
touch index.ts

typescript파일의 확장자는 ts이다. tsconfig.json파일은 typescript파일을 javascirpt로 컴파일 하게 도와주는 파일이다. 다음 코드를 각각 작성해보자.

tsconfig.json

index.ts

tsconfig.json파일을 좀 더 살펴보도록 하자.

2 line: 컴파일 할 때의 옵션을 설정할 수 있다.
3 line: 모듈을 설정한다. commonjs는 javascript의 모듈 방법 중 하나로, 다른 옵션은 https://www.typescriptlang.org/docs/handbook/compiler-options.html을 참조하길 바란다.
4 line: 어떤 버전의 javascript로 컴파일 될 지 명시.
5 line: sourceMap을 사용하도록 하였다. 난독화 된 js, css 파일등을 원본으로 매핑할 수 있도록 해준다.
7 line: 어느 파일을 컴파일 할 지 명시.
8 line: 컴파일 할 때 제외할 것들 명시.

컴파일 옵션을 지정하였으니 실제로 ts파일을 js로 변경해보도록 하자. 우선 package.json파일의 scripts를 수정해야 한다.

package.json

12 line: tsc명령어는 컴파일 명령어이다. prestart명령어에서 먼저 컴파일 한 후 생성되는 파일을 11번 째 줄 node index.js를 통해 실행한다.

터미널에서 tsc 명령어를 통해 컴파일을 진행하게 되면 js파일과 js.map파일이 생성 된 것을 확인할 수 있다.

다음 게시물에서는 실질적으로 type을 사용한 예제를 작성해보도록 하겠다.

간단한 Typescript 설명(2)