간단한 Typescript 설명(2)
Prerequisites
TSC-WATCH 설치
지난 블로그에서는 tsc명령어를 통해 ts파일을 작성한 후 js파일로 컴파일 할 때마다 tsc명령어를 사용했어야 했다. 매번 코드를 작성할 때 마다 yarn start를 터미널에 입력하려면 번거로울 수 있으니, 이를 자동으로 해결해주는 tsc-watch를 사용해서 프로젝트 진행을 좀 더 수월하게 해보도록 하자. 다음의 패키지를 설치하도록 하자.
yarn add tsc-watch --dev— dev를 뒤에 붙여서 개발 상태에서만 사용하는 패키지라고 명시하자. tsc-watch는 watch모드로 ts파일을 손쉽게 컴파일 해주는 도구이다. 다양한 옵션이 있는데, tsc-watch 깃헙에서 확인할 수 있다. 이제 package.json에서 tsc-watch를 사용할 수 있게 해보자.
우선 root폴더에 두가지 폴더를 추가하자.
dist // 배포를 위한 js파일이 위치할 곳.
src // 컴파일을 위한 ts파일이 위치할 곳.src폴더에 있는 ts파일들이 컴파일 후 dist폴더에 위치할 수 있도록 설정해보자.
package.json 파일부터 살펴보자.
12 line: 기존에 있던 scripts의 start와 prestart를 없애고 start명령어 하나로 통합시켰다. onSuccess라는 옵션을 볼 수 있는데, 성공적으로 컴파일을 마친 js파일을 실행시킨다는 옵션이다. 우리는 ts파일이 아닌 컴파일 된 js파일을 실행시키게 되는 것이다.이제 tsconfig.json 파일을 살펴보자.
6 line: 어느 위치에 ts파일이 컴파일 될 지 output directory를 명시.8 line: src폴더에 있는 모든 파일이 컴파일 될 거라고 명시.
이제 기존 js파일들은 모두 삭제하고, ts파일들은 src폴더에 이동시킨 뒤, yarn start명령어를 입력하게 되면 정상 작동하는 것을 볼 수 있다.
ts파일 컴파일을 위한 tsconfig.json파일을 처음부터 작성하기 싫다면, 다음과 같은 명령어가 도움이 될 수 있다. 터미널에
tsc --init을 치면, 자동으로 tsconfig.json파일이 기본 세팅을 가진 상태로 생성된다. 정말 다양한 옵션들이 있고, 사용하기 원하는 옵션을 선택해 사용하면 된다.
Type 사용해보기
본격적으로 javascript에는 없는 type들을 사용해보자. 우선 프로젝트의 원활함을 위해 tslint를 설치해보자. 본인같은 경우 visual studio code를 사용하므로 vscode에서 tslint를 설치하였고, 본인이 사용하는 에디터에서 tslint를 설치해 사용하면 된다.
이제 src폴더에 index.ts파일에서 하나의 함수를 작성해보도록 하겠다.
기존 코드를 없애고 매개변수가 4개인 함수를 작성하였다. 해당 코드만 봤을 때는 기존 js파일과 차이점이 없어 보인다. 하지만 에디터에서 작성하였을 때 매개 변수부분에 빨간줄이 처져 경고 메세지가 뜬 것을 확인 할 수 있다.
경고 메세지가 뜨긴 떴으나, 아직 확실한 이유를 잘 모르겠다. 그렇다면 함수를 호출해 각각 매개변수에 값을 지정하여도 오류 메세지가 뜨는지 확인해보자.
js파일을 작성할 때 처럼 했지만, 역시 경고 메세지가 뜬다! 이 경고 메세지의 뜻은 우리가 정확한 type을 지정하지 않았기 때문에 뜬다. 이제 각 매개변수마다 type을 지정하여 경고 메세지의 유무를 확인해보자,
드디어 모든 오류 메세지가 사라진 것을 확인할 수 있다. 이처럼 typescript는 함수 작성시 각 매개변수의 정확한 type 기입을 요구 한다. 때문에 함수작성시 많은 매개변수, 전달인자가 사용되고 다양한 사람들이 하나의 프로젝트에서 일을 하게 되더라도, 에러가 일어날 일이 줄어들게 되는 되었다. 이제 마우스를 밑에 6번째 줄에 create_mail을 호출하는 곳에 올려놓고, 어떤 메세지가 뜨는지 확인해보자.
메세지를 확인해보면, 함수에서 어떤 인자가 사용되었고, 그들의 type을 명확히 명시하고 있다. 또한 함수의 return값도 string으로 명시되어 있는 걸 볼 수 있다.
위에 메세지를 보면, 매개변수의 type뿐만 아니라 함수의 return 값도 명시할 수 있다는 것을 알 수 있다.
단순하게 매개 변수 오른쪽에 원하는 return 값의 type을 명시하면 된다. 만약 이 값을 boolean이나 number로 변경한다면 경고 메세지가 뜰 것이다.
함수의 필수 인자가 아닐 경우?
위에 함수에서 6번 째 줄에, false를 삭제해보자. 어떤 일이 일어날까?
함수를 생성할 때는 네개의 매개변수가 필요하다고 명시했는데, 실제 함수 호출시에는 3개의 인자만 사용되었다. 실제로 함수를 작성할 때 있어도 되고, 없어도 되는 매개변수가 있을 수 있다.(null이여도 상관없는) 매개변수가 필수인지 아닌지를 명시할 수 있는 명령어로는 ‘?’가 있다.
‘?’는 함수나 객체의 필수 부분이 존재한다는 제약 조건을 유지하면서 개발자가 사용할 지 말지를 선택할 수 있게 해준다. 사용법은 간단하다.
wait이라는 매개변수를 선택사항이라고 명시함으로써 조금 전에 있던 오류 메세지를 없앴다.
Array 작성해보기
배열의 type을 작성하는 것도 어렵지 않다.
먼저 배열 요소들의 타입과, 그 옆에 ‘[]’만 붙이면 된다. 숫자로 이루어진 배열은 number[], 그리고 나중에 작성하겠지만 클래스로 이루어진 배열은 ‘클래스이름[]’처럼 작성하면 된다.
Tuple 작성해보기
기존 javascript에서는 없는 tuple이 존재한다. Tuple이란 배열과 비슷하지만, 다양한 요소들의 타입을 명시하여 배열을 작성할 수 있게 해준다. 예제를 보도록 하자.
배열과 비슷한 모습이다. 배열 안 요소들의 type을 명시하게 해준다. tuple에서 한가지 주의할 점이 있는데, 다시 한번 코드를 작성해보도록 하겠다.
이처럼 기존 tuple을 조작할 때 type을 명시하지 않아도 경고 메세지나 오류가 발생하지 않는다.
다음 블로그에서는 Interface와 Class에 대해 작성해보도록 하겠다.
