[Typescript] 입문

프로젝트 리팩토링의 첫 번째로 Javascript 기반으로 만들어진 프로젝트를 Typescript로 변환하기로 팀원들과 합의했다.
컨버팅에 앞서 왜 Typescript로 변환하는지, 그렇다면 사용법은 어떻게 되는지 간단하게 공부해 보았다.

Why Use TS?

Typescript는 기본적으로 Javascript에 타입만 추가해 지정해 준 꼴로, 처음에는 이게 왜 필요하고 왜 사용하는지 몰랐다.

Javascript는 1 + true 와 같은 이상한 경우에도 오류가 나지 않는데, 많은 언어들은 이와 같은 상황을 허용하지 않는다. (Javascript에서는 true를 이진수로 변환해버리기 때문)
일반적으로 위와 같은 경우는 어쨌든 사용하지 않고, 실수에 의해서만 발생하는 경우이고, Javascript에서는 정상 작동 되버리는 경우가 생긴다.

따라서 Typescript는 Javascript 사용에 있어 위와 같은 실수를 방지해 엄격하게 Javascript 사용을 가능케 해주는 기능을 하고, 사용법도 어렵지 않다!

Source

기본 사용법

JS 형식의 변수에 어떤 타입이 올지만 지정해주면 끝!

let a : number[] = [7, 8]
let b : string[] = ["a", "에이"]
let c : boolean[] = [true]

선택적 변수 (Optional Parameter)

객체에서의 타입도 아래와 같이 지정해 줄 수 있다.

const user : {
  name: string,	// name: string;
  age?: number	// age?: number | undefined;
} = {
  name: "sun"
}

if (user.age && user.age < 10) {
	// age가 undefined일 수도 있다는 것을 Typescript에서 알고 있기 때문에 이렇게 지정해야 오류가 나지 않는다.
}

undefined도 허용 되는 값이 있는 경우, 변수 이름 뒤에 ?을 붙여 허용해 줄 수 있다!

별칭 (Alias)

반복되는 값의 경우, 아래처럼 미리 타입을 지정해놓고 재활용할 수 있다.

Class 문법과 비슷하게 생김

type User { // Upper Case
  name: string,	
  age?: number
}

const sun : User = {
  name: "sun"
}

const moon : User = {
  name: "moon",
  age: 25
}

함수에서의 활용

함수 뒤에 타입을 써주면 끝!

function userMaker(name:string) : User {
	return {
    	name
    }
}

const sun = userMaker("sun") // === sun : User
sun.age = 26

User 타입이라는 것을 인지시키고 함수를 실행하면 User 타입도 그대로 상속 돼, sun에 name만 들어갔어도 sun.age를 수정해 줄 수 있다.

튜플(Tuple)

배열을 생성하는데, 최소한의 길이와 특정 위치에 특정 타입이 오게 할 수 있다. (다른 타입들을 지정할 수도 있다!)

const sun: [string, number, boolean] = ["sun", 22, false]
// 이 경우 최소 3개의 길이를 가지며, string, number, boolean 순이 함을 의미

sun[0] = 28 // type error!
sun[1] = "이십이" // type error!

any

모든 타입이 오는 것을 허용할 때 사용.
(Typescript의 엄격한 환경을 벗어나서 사용할 수 있다. = JS 환경과 동일하다고 생각해도 됨!)

const a : any[] = [1, 2, 3, 4]

a.push("1234") // non err
a.push(true) // non err

unknown

변수의 타입을 미리 알지 못할 경우 사용한다.

let a:unknown;

if (typeof a === 'number') {
  let b = a + 1
}

if (typeof a === 'string') {
  let b = a.toUpperCase();
}

// 모두 정상 작동

void

아무것도 리턴하지 않는 함수에 사용하고, Typescript에서 자동으로 인식하기 때문에 따로 지정할 필요도 없음

function hello() { // hello():void
  console.log('x')
}

never

함수에서 예외가 발생해 절대 return 하지 않을 경우 발생

function hello():never {
  throw new Error("err")
} // return 하지 않는 함수

function hello(name:string|number) {
  if (typeof name === 'string') {
    name
  } else if (typeof name === 'number') {
  	name
  } else {
  	name  // 절대 실행되지 않아야 하는 경우 -> never 발생
  }
}