타입스크립트

자바스크립트는 타입변형이 자유로운 언어입니다. 코드를 작성할 때 타입을 지정하지 않아도 자동으로 타입을 변경해 주기 때문에 코드작성은 쉬우나 동시에 발견하기 어려운 로직에러로 이어질 수 있는데요. 타입스크립트는 자바스크립트와 모든 기능과 문법을 사용하지만 타입제한을 강화한 언어로 개발과정에서 상기 언급한 에러의 가능성을 사전에 차단해 줍니다(자바스크립트의 모든 코드는 타입스크립트에서 사용가능하며 타입스크립트는 타입만 체크).

설치하기

타입스크립트를 브라우저가 인식하기 위해서는 타입스크립트를 자바스크립트로 컴파일해야 합니다. 타입스크립트 컴파일러는 타입스크립트 공식페이지(https://www.typescriptlang.org/)에서 가능한데요. 메인페이지에서 하얀 버튼을 누르면

로컬환경에 설치 (선택 시 설치 방법 안내 페이지로 이동) 하거나 브라우저를 통해 설치 없이 타입스크립트 작성이 가능합니다. 

1. Playground

2. 로컬환경에 설치 (NPM)

패키지 매니저 (npm, yarm, pmpm)를 통해 타입스크립트를 설치하여 사용하는 것도 가능한데요. 폴더를 생성하고 해당 폴더를 편집기를 통해 열고 커맨드라인 아래와 같이 명령어를 입력하여 타입스크립트를 설치합니다.

npm install typescript --save-dev

설치가 완료되면 아래와 같이 노드모듈과 패키지 파일이 생성됩니다.

사용하기

타입스크립트 사용을 위해 타입스크립트 파일을 생성합니다.

생성된 스크립트 안에 아래와 같이 코드를 넣고

// practice.ts

function addNumbers(num1, num2) {
  console.log(num1 + num2)
  const result = num1 + num2  
  return result
}

document.body.innerHTML = addNumbers(1, 2)

커맨드라인에 아래 명령어를 실행합니다. npx는 npm의 명령어 중 하나로 npm고유 명령어 외 추가된 라이브러리에 명령어가 있는 경우 해당 명령어를 실행하게 해 주는 명령어이고 tsc는 타입스크립트 컴파일 명령어입니다.

※ 참고로, 타입스크립트 설치 시 '-g' 옵션과 함께 프로젝트 단위가 아닌 글로벌로 설치한 경우 npx명령어 없이 사용가능합니다.

npx tsc fileName

실행이 완료되면 아래와 같이 같은 이름의 자바스크립트 파일이 생성됩니다. 

컴파일된 자바스크립트 파일

타입체크

앞서 안내해 드린 대로 타입스크립트의 사용목적은 개발과정에서 타입을 체크를 하게 해 주어 발생가능한 로직에러를 감소시키는 데 있는데요.

 

아래 자바스크립트 기능에 매개변수로 숫자대신 문자를 넣으면 어떻게 될까요?

보이는 것처럼 3이 아닌 1과 2를 문자형식으로 연결한 12가 화면에 표시됩니다. 해당 애플리케이션이 계산 프로그램이었다면 해당 로직에러에 해당하겠죠.

1. 타입설정

타입의 설정은 변수에 국한되지 않고, 기능(function)의 반환 값, 객체, 배열 등에도 가능하며, 아래와 같이 이름 + ':' + 타입의 형태로 설정합니다.

let string: string
let number: number
let boolean: boolean
let nullValue: null
let anything:any

★ 'any'타입은 타입스크립트 고유타입으로 모든 타입을 허용하는 와일드카드입니다. 타입의 제한을 받지 않는 장점이 있으나 타입제한이라는 타입스크립트의 사용목적 자체를 저해할 수 있게 때문에 적극 사용은 권장하지 않습니다.

2. 타입추측 (type inferrence)

위처럼 일일이 타입을 설정하지 않고 타입을 생략하더라도 값을 지정하면 타입스크립트는 자동으로 값과 일치하는 타입을 해당 변수에 지정하는데 이를 type inferrence라고 합니다.

let stringInferred = 'string'
let numberInferred = 1
let booleanInferred = true
let nullValueInferred = ''

대부분의 경우 타입추측기능은 일일이 타입을 지정해야 하는 수고를 덜어 주지만 하나의 값이 여러 타입을 가질 수 있는 경우 문제가 될 수 있는데요. 가장 흔한 예는 아래와 같이 값이 없이 문자설정을 의도하고 해당 값을 ''으로 설정할 경우 해당 타입은 'null'로 인식되며 설정된 타입은 변경이 불가하기 때문에 이후 해당 변수에 문자를 부여하는 것이 불가능합니다.

let nullValueInferred = ''

빈 문자와 'null'타입 에러는 변수를 최초에 지정할 때뿐 아니라 반환되는 값이 문자일 때 빈 문자가 반환될 수 있는 경우에도 발생합니다. 그럼, 해당 에러를 방지하기 위해서는 어떻게 해야 할까요?

▶ 'any' 타입

첫 번째는 'any' 타입을 사용하는 방법입니다. 하지만, 앞서 언급하였듯이 타입스크립트를 사용하는 목적 자체를 저해할 수 있기 때문에 추천하지 않는 방법입니다.

▶ 'union' 타입

두 번째 방법은 'union' 타입을 사용하는 방법으로, or 연산자의 역할을 하는 '|'를 사용하여 복수의 타입을 지정하는 방법입니다.

let nullValueInferred: string | null

▶ casing

세 번째는 타입을 원하는 타입으로 케이싱(변환)하는 방법입니다.

nullValueInferred as string

3. 배열, 객체의 타입지정

배열과 객체는 타입지정하는 문법이 살짝 다르기 때문에 따로 보겠습니다.

▶ 배열

아래와 같이 사용하고자 하는 타입에 꺽쇠를 사용하여 해당 타입의 배열임을 표시합니다.

 

let array: string[] = []

타입지정 없이 배열에 값을 부여하는 방법으로 생성하면 해당 타입을 가진 배열이 생성되며, 값을 지정하지 않고 배열을 생성하면 타입은 'any'가 됩니다.

let arrayInferred = ['string'] // string[]
let arrayInferred = ['string', 0] // (string | number)[]
let arrayInferred = [] // any[]

마찬가지로 유니온을 활용하는 방법도 가능합니다.

let array: string[] | number[] = []

▶ 객체

객체의 경우, 타입을 지정하면 지정한 값은 필수가 되므로 지정된 타입에 값을 생략하면 에러가 뜨는데요. '?'를 사용하여 필수가 아닌 선택값으로 지정가능합니다(객체의 타입지정은 인터페이스를 지정하고 해당 인터페이스를 지정하는 방법도 가능합니다).

let object: { name: string; age: number; married?: boolean } = {
  name: 'tom',
  age: 20,
}

아래와 같이 값을 부여하여 타입추측을 활용하는 것도 가능합니다.

let objectInferred = {string:'string', number:0}

 

▶ 객체의 배열

let arrayOfObject: {}[] = []

4. 타입사용하기

이제 타입체크를 활용해 보겠습니다. 먼저 타입스크립 파일에 타입을 추가합니다.

function addNumbers(num1:number, num2:number) {
  console.log(num1 + num2)
  const result = num1 + num2  
  return result
}

document.body.innerHTML = addNumbers('1', 2).toString()

타입을 추가하면 아래와 같이 문자를 사용하는 것이 불가능하는 경고 메시지를 확인가능합니다. 먼저, 타입스크립트가 정말 타입체크 기능만 하는지 테스트해 보죠. 경고를 무시하고 컴파일을 해봅니다.

컴파일할 때 아래와 같이 발생한 에러들이 뜨네요.

에러 때문에 자바스크립트 파일이 생성되지 않을 줄 알았는데 자바스크립트 파일은 생성되네요? 정말 타입체크만 하는 게 맞군요..

그면 타입에러가 있어도 작동은 한다는 뜻인데 왜 이렇게 만들어 놓았을까요? 여기에는 개발자가 실제 해당 로직을 의도하였을 수 도 있기 때문에 타입체크 기능은 체크만 할 뿐 프로그램의 실행에 영향은 주지 않기 위한 깊은 뜻이 있다고 하네요. 심지어 타입에러가 있을 때 컴파일이 되지 않게 하는 옵션까지 만들어 두었네요. 쿨! 

npx tsc --noEmitOnError practice.ts

이전에 생성된 자바스크립트 파일을 삭제하고 위 명령어로 컴파일해 보니 과연 자바스크립트 파일 생성(업데이트)이 안되네요!

타입에 맞게 값을 제공하고 컴파일을 해 보면

업데이트된 자바스크파일을 확인 가능합니다. 보이는 것처럼 컴파일 과정에서 설정한 타입은 브라우저가 인식가능한 자바스크립트(ECMAScript) 파일로 변환하는 과정에서 다 사라집니다.

이상으로 타입스크립트에 대해서 알아보았습니다.

소스코드

https://github.com/jin-co/web-mobile/tree/master/TypeScript

GitHub - jin-co/web-mobile

---

참고

https://www.typescriptlang.org/

JavaScript With Syntax For Types.