TypeScript란? & Types

TypeScript

• Javascript with syntax for types
• a strongly typed programming language that builds on JavaScript, giving you better tool at any scale
• JS의 타입 안정성 ⬆ 버전!
• TypeScript & VS Code ⇒ 둘 다 Microsoft에서 개발해서 죽이 잘 맞아

JavaScript VS TypeScript

• JS ⇒ 개발자들이 멍청한 실수를 해도 이해해주려 하는 유연한 언어
  • [1,2,3,4]+ false(boolean) = “1,2,3,4false”(string)
  • ⇒ TS는 말도 안되는 호출을 허용하지 않음
  • 문제있는 호출을 유저의 컴퓨터에서 이미 실행하고 나서 에러라고 말해줌
    • 이것이 런타임 에러!! = 사용자가 직접 알 수 있는 에러..위험해
  • ⇒ TS는 (코드를 실행하기 전에) 호출을 하기도 전에 막아줌

  const nico = {name:"nico"}
  
  nico.hello() => uncaught TypeError: nico.hello is not a function

---

Overview of Typescript

2-1. TS 작동이 어떻게 되는걸까?

1. Typescript를 작성한다
2. Compile을 통해 TS→JS로 변환 (브라우저는 JS코드만 읽을 수 있어서 변환하는거임)
3. TS 코드에 에러가 있으면 애초에 JS로 컴파일되지 않음

2-2. Explicit VS Implicit Types

• Explicit Types: Type Checker (TS의 syntax)
  • 타입이 뭔지 명확히 지정해주는 것!

  let a : string = "hi"
  let b : boolean = false
  let c : number[] //숫자로 이뤄진 배열이야! 지정!

• Implicit Types
  • 타입을 TS가 알아서 추론하는것

  let a = "hello" //string이구나~

2-3. Types of TS (1)

• age? 처럼 값의 유무를 optional로 지정해주면 존재하지 않을 경우 undefined 반환!

const player : { //player은 객체야
    name:string, //name은 string타입이야
    age?:number //age는 optional해서 있어도 되고, 없어도 돼! 그리고 숫자야
} = {
    name:"vini" //그래서 그 객체가 뭔데!?
}

if(player.age<10) //-> error! age가 undefined인것같은데?!
if(player.age && player.age<10) //ok to go

• Allias Type (코드 재사용)

type Player = { //type [대문자]
    name:string, 
    age?:number 
}

const vini : Player = {
    name: "vini"
}

const bini : Player = {
    name: "bini",
    age: 28
}

• 함수에서는?
  • 전달인자()뒷부분에 type 추가 가능

  function playerMaker(name:string) : Player {
      return {
          name
      }
  }
  
  const playerMaker = (name:string) : Player => ({name})
  
  const vini = playerMaker("vini") //ok to go
  vini.age = 28 //function 뒤에 :Player 붙이면 ok to go

2-4. Types of TS (2)

• readonly
  • type 지정해줄 때 앞에 써줘요
  • 다른걸로 수정하지 못하게 해줘요 READ ONLY

  const names: readonly string[] = ["1","2"]
  //names.push 불가능!

• Tuple
  • 정해진 갯수의 요소를 가져야 하고 ⇒ 3개!
  • 원하는 순서에 맞는 타입을 가져야 한다! ⇒ string, number, boolean순서대로 타입도 지켜서!

  const player: [string, number, boolean] = ["vini", 28, true]

• any
  • TS에서 벗어나는 장치 (자주 쓰지마! 탈출구로 쓰고 싶을때만!!)

  const a : any[] = [1,2,3,4] //any[]이나 가능해짐
  const b : any = true
  
  a+b //any를 쓰면 가능해져버림.. JS랑 다를게 없어!

2-5. Types of TS (3)

• unkwown
  • api에서 response가 어떤 type으로 올 때 모를 때 use
  • 변수가 무슨 type인지 모를 때 use

  let a : unknown 
  
  if(typeof a === "number") {
      let b = a+1
  }
  
  if(typeof a === "string"){
      let b = a.toUpperCase();
  }

• void
  • 따로 지정하지 않아도 됨
  • function이 아무것도 return을 안할 때 use

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

• never
  • function이 never return하지 않고 error을 throw할 때 use

  function hello():never{
      throw new Error("xxx")
  }

  • type이 두 가지일 때 use

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