TypeScript 공부하기

TypeScript

TypeScript는 javascript기반으로 만들어진 언어로 javascript가 가지고 있는 여러 문제를 해결하고 보안하기 위해 만들어진 언어입니다.

TypeScript를 사용하면 타입의 안정성이 뛰어나 코드의 버그가 엄청 줄어들게 되어 런타임 에러가 줄어들고 생산성도 늘어납니다.

 

TypeScript 사용방법

TypeScript 타입을 지정해주지 않아도 자동으로 타입을 지정해 주는 경우도 있다.

const a = [1, 2, 3] // type number
const b = ["1", "2", "3"] // type string
const c = false // type boolean

 

object 타입 지정해주는 방법 

틀린 예

const player : object = {
  name : "wonpil"
    }
player.name

이렇게 타입을 지정해 주게되면 TypeScript는 player에 name이 존재하는지 모른다고 나옵니다.

 

올바른 예

const player : {
   name:string,
   age:number
} = {
  name:"wonpil",
  age: 20
}

이 예제에서 age를 선택사항으로 만들어주고 싶을 때는 

const player : {
   name:string,
   age?:number
} = {
  name:"wonpil"
}

이렇게 age뒤에 ?를 추가해서 필수사항이 아닌 옵션사항으로 만들어 오류가 안 나지 않게 해 줄 수 있습니다.

 

만약

const playerWonpil : {
   name:string,
   age?:number
} = {
  name:"wonpil"
}

const playerSungjin : {
   name:string,
   age?:number
} = {
  name:"sungjin",
  age:20
}

 이렇게 두개의 player을 만들게 되었을 때 type이 똑같으면 어떻게 해야 할까요?

 

type Alias로 타입에 별명을 만들어 줄 수 있습니다!

type Player = {
  name:string,
  age?:number
}

const player : Player = {
  name:"wonpil"
}

const player : Player = {
  name:"sungjin",
  age:20
}

위쪽에  type Player를 만들어주고 반복되는 코드를 넣어 타입을 만들어주면 됩니다!

* 첫 번째 글자는 대문자로 지정해 주어야 합니다.

 

return값의 타입 지정해 주기

type Player = {
  name:string,
  age?:number
}

function playerMaker(name:string) : Player {
  return {
    name
  }
}

// 화살표 함수
const playerMaker = (name:string) : Player => ({name})

const wonpil = playerMaker("wonpil")
wonpil.age = 12

 

읽기 전용 배열 만들기

const numbers: readonly string[] = ["1", "2"]

타입 앞에 readonly를 붙여주게 되면 읽기 전용으로 수정을 할 수 없게 됩니다.

 

배열 요소 타입 지정하기

const player: [string, number, boolean] = ["wonpil", 20, true]

순서대로 타입이 지정되고 오류가 발생하지 않는다.

 

만약 첫 번째 배열에 요소를 숫자로 바꾸려고 한다면 오류가 발생합니다.

const player: [string, number, boolean] = ["wonpil", 20, true]
player[0] = 1

왜냐하면 첫번째 인덱스는 항상 string이어야 하기 때문입니다.

지금은 이게 왜 필요한지 감이 안 오지만 가끔 외부 API를 가져올 때 배열을 위와 같은 형식으로 줄 수 있기 때문에 그런 상황에서 사용하면 정말 유용합니다!

 

any type

모든 타입을 허용할 수 있는 타입입니다. 기존에 javascript로 구현되어 있는 코드에 typescript를 점진적으로 적용할 때 활용하면 좋습니다.

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

a+b

하지만 무분별하게 any type을 사용하면 typescript 시스템의 장점을 누릴 수 없기 때문에 적절한 곳에만 사용해야 합니다!

 

typescript에만 존재하는 type

1. unknown

변수의 타입을 미리 알지 못할 때 사용합니다.

let a : unkown;

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

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

 

2. void

아무것도 return 하지 않는 함수를 대상으로 사용합니다.

function hello() {
  console.log("x") 
}

함수를 만들고 vs code 내에서 마우스를 올려보면 function hello(): void라고 타입을 알려줍니다.

 

3. never

함수가 절대 return하지 않을 때 발생합니다.

// 사용방법
function hello(): never {
  throw new Error("xxx")
}

//오류발생
function hello(): never {
  return "X"
}

이건 return하지 않고 오류를 발생시키는 함수입니다.

 

또한 타입이 두 가지일 수도 있는 상황에서 사용할 수 있습니다.

function hello(name: string | number) {
  if(typeof name === "string") {
    // 코드
  } else if (typeof name === "number") {
    // 코드
  } else {
    name // type never
  }
 }

이럴 때는 typeof로 type을 지정해 주어야 합니다.