타입스크립트와 만나다

📌 타입스크립트??

💡 자바스크립트에 타입을 더한 자바스크립트 슈퍼셋 언어. 컴파일 시 타입이 정해지는 정적 타입 언어로 개발자의 의도에 맞게 변수와 함수를 사용할 수 있도록 해주며, 에러를 잡아준다.

💡 마이크로소프트가 개발/유지하고 있는 오픈소스 프로그래밍 언어(2012-). C# 언어를 개발한 아네르스 하일스베르가 핵심 개발자로 참여하고 있는데, 구글의 앵귤러 팀이 타입스크립트를 채택한 이후부터 널리 알려졌다고 한다. 앵귤러 외에 리액트, 뷰에서도 타입스크립트를 사용해 개발되고 있다.

📌 타입스크립트를 배워야하는 이유

🤔 JavaScript에서는...

숫자 두 개를 입력했을 때 이 둘의 합을 리턴하는 함수이다. 코드를 짠 사람이 의도한 바는 '숫자' '2개'를 받아서 리턴하는 것임에도 자바스크립트는 입력받은 인자가 숫자인지, 불인지, 인자가 두 개가 아님에도 에러를 캐치하지 못한다.

시스템 규모가 커지고, 이러한 코드가 쌓이다보면, 에러가 발생할 확률도 높아지고, 어디서 어떤 문제가 발생했는지 알아내기가 어려워진다는 문제가 있다.

😀 TypeScript에서는...

해당코드를 타입스크립트 플레이그라운드에 입력해봤다. 코드에서 빨간줄과 함께 어떤 에러가 발생했고, 필요한 것이 무엇인지 정확하게 알려준다. 자바스크립트로 개발할 때 발생한 에러가 어떤 에러인지 모호하게 알려줄 때마다 구글링하는 것이 번거로울 때도 있었는데, 타입스크립트는 런하기 전에 명확하게 짚어준다는 점이 마음에 든다.

1) num1과 num2의 타입을 Number로 지정

2) 오류 해결

addTwoNums('3', 5) => addTwoNums(3, 5) // string을 number로 바꾸기
addTwoNums(3) => addTwoNums(3,10) // argument 하나 더 추가
addTwoNums(true, false) => addTwoNums(1, 0) // boolean을 number로 바꾸기

자바스크립트를 처음 배웠을 때 편리하다고 생각했던 점은 타입을 정하지 않아도 된다는 점이었다. 하지만 공부할수록 타입이 없을 때 오는 단점이 생각보다 크다는 느끼고 있다. 자바스크립트를 익히고 타입스크립트를 배우면 좋다라는 말이 그냥 나온 말이 아님을 느끼게 되었다.

📌 타입스크립트 기초

💡 타입 주석(type annotation)

let age:number = 12
let isAdult:boolean = false

let nums:number[] = [1,2,3] 
let nums2:Array<number> = [1,2,3]
// cf. nums와 nums2는 같은 배열을 다르게 표현한 것.

let seasons:string[] = ['spring', 'summer', 'fall']

seasons.push(5) ❌
// Argument of type 'number' is not assignable to parameter of type 'string'.
seasons.push('winter') ⭕

💡 튜플(Tuple): 인덱스별로 타입이 다를 때 사용

let student:[string, number]

student = ['Lory', 17] ⭕
student = [16,'Blair'] ❌
// Type 'number' is not assignable to type 'string'.
// Type 'string' is not assignable to type 'number'.

💡 void: 함수에서 아무것도 반환하지 않을 때 사용

function sayHi():void {
  console.log('Hi')
}

💡 never: 항상 에러를 반환하거나 영원히 끝나지 않는 함수의 타입

function showError():never {
  throw new Error()
}

function infiniteLoop():never {
  while(true) {...}
}

💡 enum : 비슷한 값들끼리 묶여 있는 것. 할당해주지 않으면 0부터 1씩 증가하면서 할당

// 코드 #1
enum Coffee {
    Americano,
    CafeLatte,
    Cappucino,
    ColdBrew
}

// 결과 #1
enum Coffee {
    Americano = 0,
    CafeLatte = 1,
    Cappucino = 2,
    ColdBrew = 3
}

// 코드 #2
enum Coffee {
    Americano = 5,
    CafeLatte,
    Cappucino,
    ColdBrew
}

// 결과 #2
enum Coffee {
    Americano = 5,
    CafeLatte = 6,
    Cappucino = 7,
    ColdBrew = 8
}

💡 null, undefined
자바스크립트에서 undefined는 값이나 타입스크립트에서 undefined는 타입이기도 값이기도 함.

let c:null = null
let e:undefined = undefined

💡 any: 값의 타입과 무관하게 저장할 수 있음. 모든 타입의 루트 타입(최상위 타입)

let a: any = 0
a = 'typescript'
a = true