안전! 안전! 안전! 타입스크립트를 알아보자

타입스크립트란 무엇인가?

타입스크립트는 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어이므로 컴파일 단계에서 오류를 포착할 수 있어 사전에 에러를 방지할 수 있습니다.

런타임이란?

런타임은 컴파일 과정을 마친 프로그램이 사용자에 의해 실행될 때의 환경을 말합니다. 이렇게 자바스크립트는 런타임 과정에서 오류를 발생하는데 이것을 런타임 에러라 말합니다.

컴파일 타임이란?

먼저 컴파일에 대해 알아야 하는데 이는 사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 과정을 말합니다. 소스 코드를 작성하고 이를 컴파일 하여 컴퓨터가 인식할 수 있는 기계어 코드로 변환되어 실행 가능한 프로그램이 되는 과정을 말합니다. 이렇게 타입스크립트는 컴파일 과정에서 에러를 발생하는 것을 컴파일 에러라 말합니다

• 정적 타입 언어 : 타입을 미리 지정하고 지정된 타입대로 코드를 기술하는 언어이며 컴파일 시 변수의 타입이 결정됩니다
  
  
• 동적 타입 언어 : 타입을 지정할 필요 없이 코드를 작성하는 언어이며 런타임 시 변수의 타입이 결정됩니다.
  
  

자바스크립트는 동적 타입의언어이기 때문에 타입이 사전에 명시되지 않고 런타임 시 동적으로 결정이 됩니다. 그래서 타입스크립트를 이용하여 타입 지정하면 개발자의 의도를 정확하게 코드로 작성 할 수 있고 이는 코드의 가독성을 높여 예측할 수 있게 하며 디버깅을 쉽게 할 수 있습니다.

let a = 123 // number
a = '123' //string

이렇게 유연성이 있는 자바스크립트가 때로는 단점이 되는 경우도 있습니다. 아래와 같이 sum 함수를 구현한 수 숫자를 넣으면 우리가 생각했던 대로 30 이 출력되지만 문자열을 추가하여도 에러 없이 문자열을 더하여 출력됩니다.

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

sum(1, 2) // 3

sum('10', '20') // 1020

하지만 정적 타입언어를 사용하여 타입을 추가하면 예상지 못한 에러를 사전에 방지할 수 있습니다.

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

sum('10', '20') // Error: "10"은 number에 할당될 수 없습니다.

애플리케이션은 만들고 끝이 아닙니다. 만드는 과정도 중요하지만 만든 후의 과정인 리팩토링 과정도 정말 중요한데요 저는 빠르게 개발을 해야 한다는 생각으로 생산성을 따지며 타입스크립트 적용을 하지 않았는데요 개발을 완료하여 배포한 후 리팩토링이나 유지보수하면서 시간이 더 많이 들었습니다.

이렇게 타입스크립트를 사용하여 타입을 지정하고 정적타입 언어로 개발한다면 안전한 리팩토링과 효율적인 유지보수가 가능하여 최종적으로 생산성이 더 증가할 거라 생각합니다. 프로젝트를 진행하신다면 타입스크립트를 꼭! 검토를 해보셨으면 합니다! 저는 뒤늦게 알아 다른 프로젝트부터 점진적으로 도입 중입니다.

이제 타입스크립트에 대한 개념을 알았으니 문법에 대해 알아보겠습니다.

1. 타입 주석과 타입 추론

아래 코드에서 변수명 뒤에 콜론(:) 과 타입 이름을 작성하여 타입을 설정합니다. 그런데 제일 마지막 코드에서 타입을 지정하지 않아도 오른쪽 값을 분석해 왼쪽 변수의 타입을 결정할 수 있는데 타입 추론을 하는 경우는 초기화된 변수, 기본값이 실행된 매개변수, 반환 값이 있는 함수 일 때 타입을 추론합니다.

let Fruit: string = 'apple'
let Quantity: number = 3

let Quantity = 3 // 타입 추론

2. 인터페이스

타입스크립트는 객체 또는 함수의 타입을 정의할 수 있게 interface 라는 키워드를 제공하여 아래와 같이 사용 할 수 있습니다.

//객체
interface Person {
  name: string
  age: number
}

let person: Person = { name: 'Jessie', age: 29 }

//함수
interface User {
  age: number
  name: string
}

function getUser(user: User) {
  console.log(user)
}
const lee = {
  name: 'Jeong',
  age: 28,
}

getUser(lee)

3. 튜플

튜플은 물리적으로 배열과 같지만, 배열에 저장되는 아이템의 데이터 타입이 모두 같으면 배열 다르면 튜플이라고 한다.

let strArr: string[] = ['a', 'b', 'c'] //배열
let tuple: [boolean, number, string] = [true, 1, 'a'] //튜플

4. 제네릭

제네릭은 재사용을 목적으로 함수나 클래스의 선언 시점이 아닌 사용 시점에 타입을 선언 할 수 있습니다. 즉 타입을 인수로 받아서 사용합니다

function IsGeneric<T>(arg: T): T {
  return arg
}

thisIsGeneric<string>('mystring') // 'mystring'

function logText<T>(text: T[]): T[] {
  console.log(text.length) // 제네릭 타입이 배열이기 때문에 `length`를 허용합니다.
  return text
}

두 번째 함수는 인자값으로 배열 형태의 T를 받습니다. 예를 들면 함수 [1,2,3] 처럼 숫자로 이뤄진 배열을 받으면 반환 값으로는 number 를 돌려 줍니다.