[TS] 타입스크립트의 '타입'

타입스크립트의 특징

1. 정적 타입 지원(런타임에 타입 오류를 방지) = 가독성, 안정성
2. 타입 오류 방지 = 개발 생산성, 코드 품질 향상
3. 타입 추론

implicit VS explicit

TS는 두 표현 모두 허용.
다만 이미 타입이 정해진 경우 다른 타입의 값 할당 불가.

let a="string";//implicit가 가독성이 더 좋음
let b:boolean=true;

빈 array의 경우, TS에 어떤 타입의 array인지 명시해줘야 함.

let c:number[]=[];
c.push(3);

값이 들어있는 배열의 경우 암시적으로 표현 가능.

let c = [1, 2];
c.push(3);

TYPE

const player:{
  name:string,
  age?:number//number or undefined
}={
  name:"wonji"
}
  if(player.age&&player.age<10){}
//optional 변수가 존재하는지 확인해야 player.age를 사용할 수 있음

Alias(별칭)

매번 type을 정해줄 필요 없이 여러 번 사용할 type은 미리 선언해둘 수 있음.
재사용성 up.

type Age=number;
type Player={
    name:string,
    age?:Age
}
const player1g:Player={
    name:"wonji"
}
const player2g:Player={
    name:"twoji",
    age:26
}

함수의 리턴 값 지정

function PlayerMaker(name: string): Player {
    //arguments는 string 타입의 name이 들어오고
    //return 타입은 Player
  return {
    name: name, //=> name만 써도 됨
  };
}
const player3g = PlayerMaker("threeg");
player3g.age=14;

READONLY

readonly가 선언된 값은 수정불가. 읽기 전용이므로 선언할 때만 할당 가능.
immutability(불변성).

const numbers:readonly number[]=[1,2,3,4];
numbers.push(1);//X

Tuple

개수와 타입이 정해진 배열을 선언할 수 있음. 단, 규칙을 엄격히 지켜야함.

const player:readonly [string,number,boolean]=["dao",10,true];
player[0]="hi";//X : readonly
player[0]=false;//X : readonly & wrong type

null & undefined

let a:undefined=undefined;
let b:null=null;

any

타입을 지정해주지 않으면 기본값으로 any가 됨. 아무 타입이나 될 수 있음.

let a=[];//let a:any[]

any를 사용하면 type들 간 호환을 허용해 ts에서 빠져나올 수 있기 때문에 사용하지 않는 것을 추천.

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

a+b//1,2,3,4true 출력

unknown 모르는 타입

api로부터 정해지지 않은 응답을 받을 때, 변수의 타입을 미리 확인하지 못할 때 사용.
사용할 때는 타입을 확인하고 사용해야 함. 타입이 확인된 구간에서는 변수 사용 가능.

let a:unknown;
if(typeof a==='number'){
  let b=a+1;//a가 number인지 확인된 구간에서는 사용 가능
}
if(typeof a==='string'){
  let b=a.toUpperCase();
}

void

리턴 값이 없는 함수에서 사용. 타입을 지정하지 않아도 자동으로 인식.

function hello():void{//void 생략 가능
  console.log('x')
}

never 불가능

• 값을 포함할 수 없는 빈 타입
• 실행이 끝날 때 호출자에게 제어를 반환하지 않는 함수의 반환 타입
  return 하지 않고 오류를 발생시키는 함수

function hello():never{//void 생략 가능
  throw new Error("x");
}

• 절대로 도달할수 없을 else 분기의 조건 타입

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