[TS] Typescript의 타입

TS is JS with syntax for types.

1. TS 는 개발자의 실수를 줄여준다.
   • JS 는 실수를 피하기위해 만들어져 있지 않다.
   • JS는함수를 실행할 때 올바른 argument를 사용하도록 강제하지도 않고 객체안에 존재하지 않는 함수를 불러와도 코드를 실행해야만 에러메세지를 볼 수 있다.
   • TS는 코드에 에러가 있으면 JS로 컴파일되지 않고 에러메시지를 띄운다. 따라서 에러가 있으면 런타임 전에 확인할 수 있다.
2. 변수 타입 선언
   • TS의 문법에 따라 TypeCheck가 변수의 타입을 확인한다.
   • 변수의 타입을 명시할 수있다.

      let a = "hello"
      let b : boolean = false
      let c : number[] = []
     

   • 항상 변수의 타입을 명시할 필요는 없다. TS가 알아서 추론한다.
3. 객체 타입 선언
   • 변수명 뒤에 ?를 붙여 변수가 mandatory가 아니라 optional이라는 것을 명시할 수 있다.

    const player :{
        name : string,
        age?: number
    } = {
        name : "joohee"
    }
    //player 의 age는 number 또는 undefined 타입이다.
   	
    if( player.age && player.age < 10){ 
        //player.age가 존재하는지 확인하는 코드 작성
        //player.age 가 존재하는지 먼저 확인하고 player.age 가 10보다 작다면 if문을 탄다.
    }
   

   • 타입 선언이 반복된다면 Alias 타입을 작성해 코드를 줄일 수 있다.

    type Age = number;
   
    type Player = {
        name : string,
        age ?: Age 
    }
    const joohee : Player = {
        name : "joohee"
    }
    const song : Player = {
        name : "song",
        age : 2
    }
    function playerMaker(name:string): Player{
        return {
            name
        }
    }
   
    const mijung = playerMaker("mijung")
    mijung.age = 32
    //playerMaker의 리턴타입이 Player 라고 명시해야 mijung이 Player 타입이라는 것을 알 수 있다. 
   

    type Team = "red" | "blue" | "white"
    type Height = 160 | 170 | 180
   	
    interface Player {
        name : string,
        team : Team,
        height : Height
    }
   	
    //타입 option에 맞지 않는 데이터는 입력불가
   

4. readonly 설정을 할 수 있다.
   • 변수와 객체의 속성에 readonly 속성을 추가해 데이터 변경이 불가능하도록 설정할 수 있다.

      const numbers : readonly number [] = [1,2,3,4]
      numbers.push()
      //'push' does not exist on type 'numbers'라는 에러 메시지가 뜸
     

5. 서로 다른 타입을 갖고 있는 배열들의 속성을 명시할 수 있다.

    const player : [number, string, boolean] = [30,"joohee",true]
   

6. any : 모든 타입을 할당 받을 수 있다.
   • TS의 변수의 타입을 제한해 오류를 막는 로직을 건너뛰는 방법이다. JS에서 타입을 명시하지 않고 작성하는 코드 작성방식과 동일한 효과를 얻는다.
7. unknown
   • 작업을 하려면 이 변수의 타입이 뭔지 먼저 확인해야 한다.

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

8. void
   • 함수에서 리턴하는 값이 없을 때 함수의 리턴타입은 void다.
   • 굳이 void라고 명시할 필요는 없다.
9. never
   • 함수가 리턴하는 값이 절대 없을 때

    function hello():never{
        throw new Error("아이디가 존재하지 않습니다.")
    }
   

   • 오류를 출력함을 의미

    function hello(name : string | boolean){
        if(typeof name === "string"){
   			
        }else if(typeof name === "boolean"){
   
        }else{
            //name의 타입이 string 혹은 boolean이 아닐 때 실행되는 코드
            //이때 name의 타입이 never 
        }
    }