[TypeScript] Type

1. 타입스크립트를 왜 사용할까?

• 자바스크립트는 동적언어로, 런타임에 타입이 결정되고 오류를 발견한다
• 타입스크립트는 정적언어로, 컴파일 타임에 타입이 결정되고 오류를 발견한다

// num1, num2의 타입이 숫자 타입이다
function add(num1:number, num2:number){
    return num1 + num2
}

// showItems에서 전달되는 arr의 타입은 숫자이면서 배열이어야한다
function showItems(arr:number[]){
    arr.forEach(item => {
        console.log(item)
    })
}
showItems([1, 2, 3])

---

2. 기본 타입

 

▷  문자열 타입 : string

let car:string = 'bmw'

 

▷ 숫자 타입 : number

let age:number = 30

 

▷ 불리언 타입 : boolean

let isAdult:boolean = true

 

▷ 배열이면서 숫자 타입 : number[]  or : Array<number>

let a:number[] = [1, 2, 3]
let a2:Array<number> = [1, 2, 3]

 

▷ 배열이면서 문자열 타입 : string[] or : Array<string>

let week1:string[] = ['1', '2', '3']
let week2:Array<string> = ['1', '2', '3']

 

▷ 튜플

• array를 생성할 수 있게 하는데 최소한의 길이를 가져야 하고, 특정 위치에 특정 타입이 있어야 한다(선언 순서 중요)

let b:[string, number]
b = ['z', 1]
// b = [1, 'z'] (X)

 

const player: [string, number, boolean] = ['nico', 1, true]

// 위의 player 배열에 readonly를 추가하면 배열 수정 불가
const player: readonly[string, number, boolean] = ['nico', 1, true]

 

 

▷ void

• 아무것도 반환하지 않음

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

 

▷ never

• 함수가 절대 return 하지 않을 때 발생

// 항상 에러를 반환하거나
function showError():never{
    throw new Error()
}
// 무한 루프인 경우
function infLoop():never{
    while(true){
        // do something..
    }
}

 

function hello(name: string|number){
    if (typeof name === 'string'){
        name // name: string
    }else if (typeof name === 'number'){
        name // name: number
    }else{ // 실행x
        name // name: never
    }
}

 

 

▷ unknown

let a:unknown;
// a 타입을 확인해야 함
if (typeof a === 'number'){
    let b = a + 1
}
if (typeof a === 'string'){
    let b = a.toUpperCase()
}

 

 

▷ enum

• 열거형(enumerated type), 명명된 상수 집합을 만들어 사용하는 것이 주요 목적
• 특정 값을 명시적으로 정의하지 않아도 자동으로 번호를 부여해 준다
• 상수 값들을 관리하고 의미 있는 이름을 부여하고 싶을 때 유용
• 코드 가독성을 높임
• 특정 값을 나타내는 상수가 여러 곳에서 사용될 때 일관성을 유지할 수 있다

enum Os {
// 기본적으로 첫 번째 멤버의 값은 0이며, 이후에 정의되는 멤버들은 1씩 증가한 값이 부여됨
    Window, // 0
    Ios, // 1
    Android // 2
}
// myOs는 Os타입을 가지며, 값을 비교할 때 Os.Ios, Os.Android, Os.Window와 같이 직관적으로 사용 가능
const myOs: Os = Os.Ios

// 자바스크립트 코드로 변환하면 
var Os;
(function (Os) {
    Os[Os["Window"] = 0] = "Window";
    Os[Os["Ios"] = 1] = "Ios";
    Os[Os["Android"] = 2] = "Android";
})(Os || (Os = {}));

 

▷ null, undefined

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

 

▷ any

• 타입스크립트로부터 빠져나오고 싶을 때 쓰는 타입

// a의 타입은 any
let a = []

 

▷ type & object

// 타입을 재사용할 수 있도록
// player는 객체, name은 문자열, age는 숫자
type player = {
    name:string,
    age?:number // '?'을 통해 필수가 아닌 선택으로 지정하여 오류 방지
}

const nico : player = {
    name: 'nico'
}

const lynn : player = {
    name: 'lynn',
    age: 14
}

 

▷ type & function

type Player = {
    name: Name,
    age?: Age
}
function PlayerMaker(name:string): Player{
    return{
        name
    }
}
const nico = playerMaker('nico')
nico.age = 12

 

// 위의 PlayerMaker함수를 화살표 함수로 표현
const playerMaker = (name:string): Player => ({ name })

 

▷ readonly

• 읽기 전용
• 수정 불가

// name속성은 읽기 전용으로 수정 불가
type Player = {
    readonly name: Name 
    age?: Age
}

// 숫자 배열은 readonly이기 때문에 수정 불가(push등)
const numbers: readonly number[] = [1, 2, 3, 4]