타입스크립트 part.1

타입스크립트는 자바스크립트로 컴파일되기 전에 실행되어 에러를 보여줄수 있기 때문에 타입 관련한 자바스크립트의 런타임 에러를 막아줄 수 있다.

// 타입 추론에 의한 에러
let a = "a"
a = 1 // error

// 명시적 타입에 의한 에러
let a : number[] = [1, 2]
a = ["a", "b"] // error
// 명시적 타입은 배열을 빈값으로 선언했을때 같은 경우 제한적으로 사용하는게 좋다.
let a : number[] = []
a = ["a"] // error

object value type 설정

const playerNico : {
  name:string,
  age?:number, // Optional
} = {
  name:"nico"
}

if (player.age < 10) { // error
  ...
}
  
if (player.age && player.age < 10) { // works
  ...
}

object의 key이름을 설정하지 않고 타입 설정

type Words = {
  [key:string]: string
}

let dict:Words = {
  "food": "potato"
}

반복되는 object value type

// type alias
type Age = number
type Player = {
  name:string,
  age?:Age, // 이런식으로 원시타입에도 alias를 적용할 수 있음.
}
const playerLynn : Player = {
  name:"lynn",
  age:12,
}

함수에서의 사용법

type Player = {
  name:string,
  age?:number,
}
function platerMaker(name:string) : Player {
  return {
    name,
  }
}
const nico = platerMaker("nico")
nico.age = 12 // return type을 설정해주지 않으면 error, 
// return에 원래는 age가 없지만 type Player에는 age?:number가 있기 때문

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

readonly

type Player = {
  readonly name:string,
  age?:number,
}
function platerMaker(name:string) : Player {
  return {
    name,
  }
}
const nico = platerMaker("nico")
nico.age = 12
nico.name = "kevin" // error

const numbers: readonly number[] = [1,2,3]
numbers.push(4) // error / map, filter 등 안되고 immutable 해짐.

배열의 각 요소별 type 지정

const player: [string, number, boolean] = ["nico", 1, true]
player[0] = 2 // error

any

// typescript에서 빠져나오는 방법
const a : any[] = [1, 2, 3, 4]
const b : any = true

a + b // works

TS에만 있는 types

// unknown - 어떤 타입인지 미리 알지 못할때
let a:unknown;
let b = a + 1; // error
if (typeof a === 'number') {
  let b = a + 1; // 여기 안에서는 a가 무조건 number 이므로
}

// void - 아무것도 return 하지 않을 함수
function hello() { // return이 없으면 자동으로 void type을 return
  console.log("hi")
}
const a = hello()
a.bye() // error

// never - 함수가 절대 return 하지 않을때 사용
function hello():never {
  throw new Error("xxx") // works
  return "x" // error
}

function hello(name: string|number) {
  if(typeof name === "string") {
    name // string type
  } else if (typeof name === "number") {
    name // number type
  } else {
    name // never type - 절대 발생할수 없는 경우
  }