Typescript 기초

JavaScript는 weakly typed language 이기 때문에, 변수에 어떤 값을 담던 상관이 없다. 가령,

아래 코드는 전혀 문제될 것이 없는 코드이다. value라는 변수에 어떤 값을 담던, JS에서는 변수에 type이라는 것이 지정되어있는 것이 아니기 때문에, 언제든 다른 type의 값으로 설정을 해주어도 상관이 없다. 어떻게 보면 자유로운 변수의 사용이지만, 어떻게 보면 또 오류가 나오는 원인이 되기도 한다. 예를들어 배열인줄 알고 대입을 해보았더니 null이어서 에러가 난다거나, 숫자인줄 알고 연산을 했다가 string이어서 에러가 난다거나, 여러 에러의 원인이 될 수 있는 것이다. 자바스크립트의 가장 큰 문제중 하나는 코드가 일단 실행된 이후에야 자신이 실수를 했는지 안했는지 알 수 있다는 것이다.

 

Typescript는 이 문제를 효과적으로 해결할 수 있도록 도와준다. Typescript는 Javascript의 Superset이다. 즉, 자바스크립트의 상위호환이라는 뜻이다. 타입스크립트는 한번 컴파일을 실행하면서, 코드에 문제가 있는지 없는지를 한번 판단해 준다. 또한, 타입스크립트는 IDE에서 많은 도움을 얻을 수 있다. 예를 들어, VSCode가 타입스크립트를 쓸 때 큰 도움을 준다는 것은 많이 알려져 있는 사실이다. 둘 다 마소에서 관리하고 있기도 하고. 타입스크립트는 컴포넌트, 함수, 파라미터 등에 타입추론을 하게 해준다. 따라서, 이를 통해서 사소한 실수들을 방지할 수 있다. 예를 들어 function을 넣어야할지 function()을 넣어야할지 라던지, 등등...

 

이제 타입스크립트를 써볼 차례이다. 먼저 프로젝트를 만든 후, typescript와 ts-node 모듈을 설치해 주자.

설치가 완료되면, yarn run tsc --init으로 타입스크립트 프로젝트로 만들어주자.

타입스크립트를 위한 설정파일인 tsconfig.json이 만들어진다. 이제 typescript를 직접 작성할 차례이다. practice.ts 파일을 만들어주자. 참고로 타입스크립트의 확장자는 .ts이다. 

 

첫번째 변수를 선언해 보았다. 변수의 타입 지정은 뒤에 : 타입을 넣어주면 된다. 만약 message를 스트링으로 지정해 놓고 다른 타입의 값을 넣는다면?

이런식으로 에러가 뜬다. 이러한 변수 타입 지정으로 실수를 줄여줄 수 있다. 이후, yarn run tsc를 실행해 보면,

practice.js 파일이 src 디렉터리에 생겼다. practice.ts 파일이 자바스크립트 형식으로 컴파일 되어 생긴 파일이다. 안에 들어가 확인을 해보면,

이런 파일이 작성되어 있는 것을 확인할 수 있다. 그런데 보면 const로 지정되어있던 message가 var로 바뀐것을 볼 수 있다. 이는 왜그렇냐면,

tsconfig.json 파일의 target이 es5로 지정되어있기 때문이다. es6 이전의 문법 상으로 const와 let은 존재하지 않는 변수 선언 타입이었고, 따라서 es5가 알아들을 수 있는 변수선언 타입인 var로 변환이 되어 컴파일 된것이다. 만약 이를 바꿔주고 싶다면, es5 대신 es6 또는 es2015를 넣어주면 된다. 그 후, 다시 컴파일을 하면, const가 그대로 나타나는 것을 볼 수 있다.

 

tsconfig의 설정 중에는 outDir이라는 설정도 있다. 이는 컴파일 될 코드를 어디 저장할지 미리 지정하는 설정이다. 기본 값은 ./ (ts파일이 있는 곳과 같은 디렉터리에 저장)인데, 이를 바꿔 자바스크립트 파일 따로, 타입스크립트 파일 따로 저장을 할 수도 있다. 예를들어,

ourDir의 디렉터리에 dist라는 디렉터리로 추가해주었다. 그러면, 이제 src에 저장이 되는 것이 아니라,

이렇게 dist라는 디렉터리에 저장이 되게 된다. 이제 코드를 실행해 보면,

위와 같이 실행이 된다. 참고로 ts-node를 이미 설치했기 때문에, ts파일을 바로 실행할 수도 있다. yarn run ts-node ..(directory).. 를 실행해보면,

 

위와 같이 잘 실행이 되는 것을 볼 수 있다.

 

타입스크립트는 기본적으로 변수선언을 하면 자동적으로 타입지정이 된다.

위를 보면 count에서 이미 0이라는 숫자를 선언해놨기 때문에 count는 자동적으로 숫자 타입이 지정되게 된다. 이후 count에 문자열을 넣으려고 하는 순간, 에러가 나버린다.

선언할 수 있는 타입들은 다음같은 타입들이 있다.

 

number: 숫자,

string: 문자열,

boolean: 불린,

number[]: 숫자 배열,

string[]: 문자열 배열,

 

또, 여러타입을 동시에 지정해줄 수 있다. 예를들어,

| (or) 사인을 중간에 넣어주면, 스트링일수도, undefined일수도 있다고 알려주는 것이다. 또한, 특정 값을 지정해줄 수도 있다.

보면 color라는 변수에는 'red', 'orange', 'yellow' 만 들어갈 수 있다고 선언을 해놓은 상황이다. 그 후, color에 다른 문자열을 집어넣으려고 하면 오류가 난다. 이제 함수를 만들어보자.

 

타입스크립트에서는 함수에서 들어오는 파라미터의 타입을 무조건적으로 지정해주어야 한다. 혹시 정말 어느값이나 받아오고 싶다면, any를 써주면 된다. 예를 들어, 

위와같이 함수를 선언해 줄 수 있다. 또한, 함수가 반환할 값 또한 지정이 가능하다. 이 또한 함수가 엉뚱한 타입의 값을 반환하는 것을 방지해준다. 예를 들어,

위와 같이 선언을 해준다면, add라는 function이 반환할 값은 number 임을 명시해주는 것이다. 만약 함수에서 반환할 값이 number라고 선언이 되었음에도 다른 타입의 값이 반환이 된다면,

위와 같이 에러가 나게 된다. 이제 함수를 사용하려고 하면,

위와 같이 들어갈 파라미터의 타입과 반환될 값의 타입을 모두 알려주고 있다. 만약 함수에서 아무것도 반환하지 않는다면, 리턴 타입을 void로 설정해주면 된다. 다트를 공부했던 나로써는 꽤나 익숙한 기능이지만, 자바스크립트만 써왔다면 살짝 틀에 갇힌 느낌이 들 수도 있을 것 같다. 그러나 어떻게 보면 이게 더 효율적이다. 어떤 값이 들어갈지 확실히 알려주기 때문에, 오히려 유지보수 측면에서 이점을 가져다주기도 할 것이기 때문이다.