[TypeScript] Types of TS(기본적인 타입 외에 다른 타입들)

jini.choi·2023년 8월 21일

TypeScript

목록 보기

2/4

선택적 타입(optional Type)

object에서 name은 필수, age는 옵션으로 지정하고 싶다면?

키 뒤에 ?를 붙여준다.

const player : {
    name: string,
    age?: number, 
} = {
    name : "jini"
    }

if(player.age && player.age < 20){
    ~~
}

이렇게 명시적 표현을 해주면 player는 object타입, name은 string, age는 number이거나 undeifined라고 될 수 있다고 지정할 수 있다.

Alias(별칭) 타입

여기서 만약 player1, player2, player3 ...으로 동일한 형태의 object를 만든다면 코드는 지저분해진다.
이 경우에는 Alias(별칭) 타입을 생성할 수 있다.

type Name = string;
type Age = number; //이런식으로도 재사용할 수 있지만 과한 재사용은 지양하자
type Player = {
    name: Name,
    age?: Age, 
} 

const jini: Player = {
    name : "jini"
}
const mimi: Player = {
    name : "mimi",
    age: 22
}

argument(인자)타입, 함수 return값의 타입 지정

함수가 return하는 타입이 무엇인지 알 수 있게 해준다.

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

1. 일반 함수
function playerMaker(name:string) : Player {
    return {
        name //name:name과 동일함
    }
}

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

const jini = playerMaker("jini")
jini.age = 12

function playerMaker(name:string){} - argument(인자)타입지정
function playerMaker(name:string) : Player {} - 함수 return값의 타입 지정

이렇게 지정하게되면 TypeScript는

jini가 player타입이라는 것을 지정해줬기 때문에 jini의 name과 age를 바꾸도록 허용해주고,
playerMaker가 string타입으로 name을 받고 player타입을 return하는 함수라는 것을 알게 된다.

readonly

readonly 속성이란, 요소들을 '읽기 전용'으로 만들어 준다.
immutability(불변성)을 가지게되며, filter, map 등 배열을 바꾸지 않는 함수들은 사용할 수 있다.(JS에서는 사용 안함)

예시

아래 코드에서 player의 name을 수정하려고 시도하면 TypeScript에서 에러남.
아래 코드에서 배열에 readonly number[]타입으로 지정하고나서 numbers에 push를 하려고하면 에러남.
push라는 것이 readonly number[]타입에 존재하지 않기 때문에 허용해주지 않음.

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

Tuple

Tuple은 array를 생성할 수 있게 하는데 최소한의 길이를 가져야 하고, 특정 위치에 특정 타입이 있어야된다. (JS에서는 사용 안함)
정해진 갯수의 요소를 가져야하는 array를 지정할 수 있다.

예시

TypeScript에게 이 array는 3개의 아이템을 가지며, string, number, boolean 순서대로여야 함을 알려야 될 때 유용하다.

const player: [ string, number, boolean ] = ["jini", 12, false]

readonly와 Tuple 같이 사용하기

이렇게 readonly를 쓰면 아무것도 바꿀 수 없게된다.

const player: readonly [ string, number, boolean ] = ["jini", 12, false]

any

비어있는 값들을 쓰면 기본값이 any가 됨
any는 TypeScript로부터 빠져나오고 싶을 때 쓰는 타입(가~끔은 any를 사용해야될 때가 있다.)
TypeScript로부터의 보호장치를 잃어버리고, JavaScript에 있는다고 생각하면 됨.
아래와 같이 TypeScript 라면 에러가 났을 코드를 작성해도 에러나지 않게됨

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

a + b

unknown

만약 API로부터 응답을 받는데 그 응답의 타입을 모를경우 unknown로 타입을 지정한다.
어떤 작업을 하려면 예시로 변수의 타입을 먼저 확인해야하는 방식으로 TypeScript의 보호를 받게 된다.

let a:unknown;

let b = a + 1;

a를 사용하고 싶다면 먼저 확인을 해야하는데 아래와 같이 typeof a가 number인지 확인하는 코드를 작성하게 되면 TypeScript가 작업을 허용해주게 된다.

let a:unknown;

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

void

아무것도 return하지 않는 함수의 타입을 TypeScript에서는 void Type이라고 함.
함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 유추되는 타입

never

함수가 절대 return 하지 않을 때 발생함.
만약 hello라는 함수가 있고 "X"를 return할 때 타입을 never라고 지정하면 작동하지 않음

function hello(): never{
    return "X"
}

예외상황으로 일부러 오류를 발생시키면 정상 작동함.(return 하지 않고 오류를 발생시키는 함수)

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

throw new Error("X")는 "X"라는 메시지를 가진 새로운 예외 객체를 생성하고, 이를 발생시키는 역할. 이 때 발생시킨 예외는 해당 함수가 실행 중이거나 해당 함수를 호출한 부분에 의해 '잡히지' 않으면, 프로그램 실행을 중단시키고 상위 호출 스택에 있는 예외 처리 코드로 제어가 전달.
예외 처리는 프로그램 안정성을 유지하고 예외 상황에 대응하기 위해 사용. 상황에 따라 예외를 적절히 처리하거나, 프로그램이 비정상적인 상황에서도 graceful하게 종료될 수 있도록 도와준다.

또한 never는 타입이 두가지 일 수도 있는 상황에 발생시킬 수 있다.
- 만약 API에서 name을 받아올 때 TypeScript에게 name은 string이나 number라고 알려줬고, 두 타입 모두 확인을 해줬기 때문에else{name} 가 발생하면 잘못 받아오고 있는 뜻이다.(발생되면 큰일!!)

function hello(name:string|number){
    if(typeof name === "string"){ //여기서 name은 string이 됨
        name.toUpperCase();
    }else if(typeof name === "number"){ //여기서 name은 number가 됨
        name + 1
    }else{    //여기서 name은 never가 됨
        name
    }
}