[Typescript] 타입스크립트의 타입들

 

Types of Typescript

기본적으로는 Implict type으로 변수의 타입을 추측해서 제공하지만,

제대로된 타입스크립트 활용을 위해서는 변수를 선언할때 타입을 명시적(Explicit type) 으로 할당한다.

 

 

다음과 같이 변수에 타입을 할당하며, 할당한 타입과 다른 데이터를 재할당 하려고하면 오류를 발생시킨다.

let favorite: string = 'Apple'
let age: number = 30
let isAdult: boolean = true

 

 

any는 어떤 타입의 자료든 할당할 수 있도록 한다. Javascript에서는 기본적으로 변수에 any가 할당된 것과 같다.

// 명시적 any 타입 지정
let id: any = 123
id = 'text도 할당 가능'

// 암시적 any 타입 지정 (값을 할당하지 않고 선언)
let id2
id2 = 123
id2 = 'text'

 

 

Array 자료는 다음과 같이 설정할 수 있으며, 타입을 설정하지 않으면 Array는 기본적으로 string[ ]이다.

// 문자만 들어올 수 있는 배열 (디폴트 타입)
let alphabet: string[] = ['A', 'B', 'C']
// 숫자만 들어올 수 있는 배열
let count: number[] = [1, 2, 3]
// 어떤 타입이든 들어올 수 있는 배열
let apple: any[] = ['red', 10, true, {taste: good}, ['yummy']]
// 숫자나 문자만 들어올 수 있는 배열
let peach: (number|string)[] = ['pink', 5]

 

 

tuple은 array 자료 내부 타입의 순서까지 지정한다. (JS에서 지원하지 않는 타입)

let user:[string, number] = ['Jessie', 30]

user = [20, 'Tony'] // err: 타입 순서에 맞는 자료 할당 필요
user.push(true) // err: boolean은 해당 변수에 설정된 타입이 아님

 

 

enum은 비슷한 값들끼리 묶어서 타입을 지정하며 다양한 경우에 활용할 수 있다. (JS에서 지원하지 않는 타입)

1. 기억하기 어려운 숫자 대신 친숙한 이름으로 접근 및 사용하는데에 활용한다. 

// 값을 임의로 할당하지 않으면 기본적으로 0부터 할당된다.
enum Team {
    Planner, // 0
    Developer, // 1
    Designer, // 2
}

let jessie: number = Team.Developer // 1

// enum 내부 아이템에 값을 할당하면, 할당값이 없는 아이템은 앞의 것에 1을 더한 값이 설정된다.
enum Team {
    Planner = 3, // 3
    Developer, // 4
    Designer // 5
}

let jessie: number = Team.Developer // 4

 

// 양방향으로 컴파일되기 때문에 숫자로도, 값으로도 불러올 수 있다.
enum Team {
    Planner,
    Developer,
    Designer
}

let jessie: number = Team.Developer // 1
let jessieRole: string = Team[1] // 'Developer'

 

2. enum 내부 아이템에 숫자가 아닌 문자열을 값으로 할당하면 단방향 매핑만 이루어진다.

특정값만 입력하도록 강제하고 싶을때, 그리고 그 값들에 공통점이 있을때 묶어서 타입으로 지정시키고 싶을때 사용한다.

enum Team {
    Planner = 'planning',
    Developer = 'develop',
    Designer = 'design'
}

let member: Team
member = Team.Developer // 'develop'

 

 

object의 타입을 알려줄때는 object 자료들이 어떤 속성을 가지고 있는지 각각 정의해줘야한다.

const player : {
    name: string,
    age?: number // optional한 값을 줄때는 ?를 사용한다.
} = {
    name: 'jessie',
    // age 속성이 없어도 오류를 나타내지 않는다.
}

if(player.age < 10) {
  // err: age는 number | undefined이기 때문에 에러를 발생시킨다.
  // 조건값을 player.age && player.age < 10으로 바꿔주면 오류가 사라진다.
}

같은 타입을 가지고 있는 여러 오브젝트에 활용하려면 Alias type을 만들어두고 여러 오브젝트에 활용한다.

(Alias type에는 다양한 타입이 복합적으로 정의될 수 있다. type 이름의 첫글자는 대문자로 설정)

type Player = {
  name: string,
  age?: number
}
const jessie : Player = {
  name: "Jessie"
}
const mike : Player = {
  name: "Mike"
  age: 12
}

이렇게 type을 만들어둔 것을 function에도 활용할 수 있다.

function playerMaker(name: string): Player {
    return {
        name: name // name 값을 받아서 오브젝트로 리턴시킴
    }
}

const firstPlayer = playerMaker('jessie') // { name: 'jessie'}
firstPlayer.age = 12 // function에 type으로 Player 설정하지 않았다면 오류가 생겼을 것

 

 

 

null이나 undefined도 필요한 경우 타입으로 설정해 사용할 수 있다.

optional type으로 설정한 경우에는 undefined 타입이 자동으로 추론될 수 도 있다.

type Player = {
    age?: number // age: number | undefined
}

 

 

any는 모든 타입이 들어갈 수 있음을 뜻하는데, 타입스크립트의 보호를 받을 수 없으므로 사용을 지양하는 것이 좋다.

 

 

 

값의 타입을 미리 알 수 없을때는 unknown으로 설정해준다.

API로 데이터를 받아오는데 타입을 미리 알 수 없는 경우 등이 해당한다.

let a: unknown // unknown 타입을 먼저 설정해두고,

if (typeof a === 'number') { // 조건문으로 타입을 체크한 다음 실행문을 만들어줘야 한다.
    b = a * 2
}

 

 

아무것도 return 하지 않는 함수의 타입은 void가 된다.

(보통은 일부러 지정해주는 경우는 없고, 리턴값이 없는경우 자동으로 void 타입으로 인식한다.)

function hello() { 
    console.log('text')
} // function hello(): void

 

 

 

never은 함수가 항상 오류를 출력하거나, 리턴값을 절대 내보내지 않는 것을 의미한다.

function hello() { 
    throw new Error('message')
} // 항상 에러를 내보내는 함수 function hello(): never

function hello(name: string | number) { 
    // name의 타입은 두가지 이기때문에 타입을 확인하는 조건문이 필요하다.

    if (typeof name == 'string') {
        name // name: string
    } else if (typeof name == 'number') {
        name // name: number
    } else {
        name // name: never 이므로 여기있는 코드는 실행될 수 없다는 의미.
    }
}

 

 

 

 

👇🏻Typescript Playground

JavaScript With Syntax For Types.

 

참고문서

https://yamoo9.gitbook.io/typescript/