Typescript의 Type 정의

string, boolean, number 등

let a = "hello"; 
// let a : string = 'hello'; 로 도 선언가능
let b = false; 
// 이런 친구들은 굳이 코드 안 늘려서 명시적으로 표현 안해줘도 됨(TS 알아서 인식) 

let c : number[] = []
let c = [1, 2, 3, 4] // 라고 해도 number[]로 인식이 됨

 

array, object, optional

let a : number = 1; 
let b : string = 'i1';
let c : boolean = true;

// array 
let array_a : number[] = [1, 2]; 
let array_b : string[] = ['i1', 'i2'];
let array_c : boolean[] = [true, false];

// 정해진 갯수의 요소를 가져야하는 array 를 지정
const player : [string, number, boolean] = ["nico", 1, true]
// readonly 추가
// const player : readonly [string, number, boolean] = ["nico", 1, true]

// object
const player : {
    name: string, 
		// ?로 optional이라는 속성부여
    age?: number // optional 지정 number | undefined
} = {
    name : 'siha'
};

 

type 정의 재사용

// Type 따로 지정하여 재사용하기
type Player = {
    name : string, 
    age?: number
}

// 변수명 : type 형식으로 재사용 가능 
const siha : Player = {
    name : 'siha'
};

const nico : Player = {
    name : 'nico', 
    age: 12
};

 

function

/*
함수 타입 지정해주기
 function 함수명(파라미터: 파라미터 Type) : return Type {
    return {}
 }
*/

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

const mini = PlayerMaker('mini');
mini.age = 12;

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

const momo = PlayerArrow('momo');
momo.age = 12;

 

readonly

readonly는 이름처럼 읽기만 가능하고 수정할 수 없게 속성을 주는 것 !

type Age = number; 
type Name = string; 
type Player = {
    readonly name : Name
    age?: Age
}

const playerMaker = (name: string) : Player => ({name})
const nico = playerMaker('nico')
nico.age = 12

const names: readonly string[] = ['1', '2']

 

undefined, null, any

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

// any 는 Typescript의 보호 아래서 아예 벗어남! 
const c : any[] = [1, 2, 3, 4]
const d : any = true

 

tpyescript에만 존재하는 type(unknown, void, never)

// 어떤 타입인지 모르는 변수 'unknown'
let a : unknown;

let b = a + 1  // a가 number인지 모르기때문에 작동하지 않음

if ( typeof a === 'number' ) {
    let b = a + 1;  // a 가 number인지 확인해줘서 작동가능
}
if ( typeof a === 'string' ) {
    let b = a.toUpperCase();
}

// 아무것도 return 하지 않는 함수 'void'
// 보통 void는 지정하지 않아도 명시해주지 않으면 자동으로 인식됨
function hello() {
    console.log('x');
}

// 함수가 절대 return 하지 않을때 'never'
// return은 쓸수 없음

// 예시 1: 오류를 발생시키는 함수
function stop():never {
    throw new Error('xxx');
}

// 예시 2 : 타입이 두가지 일 수도 있는 상황
function both (name:string|number) {
    if( typeof name === 'string') {
        name  // type -> string
    } else if (typeof name === 'number') {
        name  // type -> number
    } else {
        name  // type -> never
    }
}

 

(bonus!)특정 값 option 지정해주기

// 특정 값 option type을 가지도록 하는 방법
type Team = 'read'| 'blue' | 'yellow'
type Health = 1 | 5 | 10

type Player = {
    nickname: string, 
    team: Team, 
    health : Health
}