TypeScript / 타입(2)

Interface

객체의 구조/형태를 정의하며, 특정 객체가 어떤 Property, Method를 가져야 하는지를 나타낸다. 

코드의 가독성과 안전성을 높일 수 있으며, 확장 및 조합도 용이하다.

interface 이름 {
  속성 이름: 속성 타입;
  속성 이름: 속성 타입;
  메서드 이름(): 메서드 타입;
}

 

예시

interface User {
    id: number;
    name: string;
    isPremium: boolean;
    someMethod(): void;
}

const userA: User = {
    id: 10,
    name: "Bill",
    isPremium: false,
    someMethod() {
        console.log("some method called")
    }
}

 

 

alias vs interface

앨리어스와 인터페이스의 목적은 크게 다르지 않지만, 확장 문법이 다르다.

 

- interface(인터페이스)

• interface User{} 같이 표현
• 객체 타입(형태)로 사용해야 함

interface Person {
  name: string;
}

interface Employee extends Person {
  salary: number;
}

const employee: Employee = {
  name: "Alice",
  salary: 50000,
};

 

- type Alias(타입 별칭)

• type User = {} 같이 표현
• 객체 포함, 리터럴, 원시값 등을 타입으로 가질 수 있음

type Person = {
  name: string;
};

type Employee = Person & {
  salary: number;
};

const employee: Employee = {
  name: "Alice",
  salary: 50000,
};

 

 

readonly & optional property

읽기 전용 property는 readonly 키워드를 사용해 정의하고, 선택적 property는 ? 를 사용해 표시한다.

interface User {
    readonly id:number;
    name:string;
    isPremium?:boolean;
}

const testUser:User = {
    id:100,
    name:"John"
}

// testUser.id = 200 // readonly property라서 수정 불가

 

 

메서드 / 함수 타입

interface User {
    readonly id: number;
    name: string;
    isPremium?: boolean;
    greet(): void;
}

const testUser: User = {
    id: 100,
    name: "John",
    isPremium: false,
    greet() {
        console.log(`Hello ${this.name}`)
    }
}

testUser.greet()

 

 

만약 여기서 메서드 greet()가 반환값이 있다면 return 값으로 대체해주면 된다.

interface User {
    readonly id: number;
    name: string;
    isPremium?: boolean;
    greet(): string;
}

const testUser: User = {
    id: 100,
    name: "John",
    isPremium: false,
    greet() {
        return `Hello ${this.name}`
    }
}

testUser.greet()

 

 

이때 greet()에 파라미터를 추가한다면 다음과 같이 해주면 된다.

interface User {
    readonly id: number;
    name: string;
    isPremium?: boolean;
    greet(message: string): string;
}

const testUser: User = {
    id: 100,
    name: "John",
    isPremium: false,
    greet(message: string) {
        return `${message}, ${this.name}`
    }
}

testUser.greet("Hi");

 

 

확장 및 조합

interface Person {
    name: string;
    age: number;
}

interface Employee{
    employeeId: number;
}

interface Student extends Person, Employee {
    // name, age 그리고 studentId 프로퍼티까지 가지게됨
    studentId: number;
}

const personA: Person = {
    name: "Maki",
    age: 20
}

const studentA: Student = {
    name: "Harua",
    age: 21,
    studentId: 123124,
    employeeId: 62389
}

 

 

---

 

 

튜플(Tuples)

고정된 크기의 배열로, 고정된 수의 요소를 가지고 각 요소의 타입이 미리 정해져있다.

자바스크립트에는 없는 개념이다.

// 기본 문법
let myTuple: [string, number, boolean]

myTuple = ["Hello", 15, false]
myTuple = ["Hello", true, 1] // 순서가 일치하지 않음
myTuple = ["Hello", 1] // 개수가 일치하지 않음

 

예시

//#1. 함수가 여러 타입을 반환할 때
function getUserInfo(): [number, string] {
    return [1, "Sam"]
}

const [userId, username] = getUserInfo()

//#2. 타입 앨리어스를 사용할 때
type Flavor = string;
type Price = number;

type IceCream = [Flavor, Price]

const greenTea: IceCream = ["greenTea", 500]
greenTea[0]
greenTea[1]

//#3. 튜플을 내부요소로 사용할 때 
type lat = number;
type lng = number;

type coord = [lat, lng]
let coords: coord[] = []; // 빈 배열로 초기화

coords.push([36, -95])
coords.push([38, -74])
// coords.push([false, "1"]) // 당연히 오류..

// 구조분해 할당 1
for (const [lat, lng] of coords) {
    console.log(lat, lng)
}

// 구조분해 할당 2
let exampleTuple: [string, number] = ["hello", 42];

let [greeting, answer] = exampleTuple;
console.log(greeting); // "hello"
console.log(answer);   // 42

 

 

---

 

 

열거형(Enum)

상수의 명명된 집합을 쉽게 다루기 위해 사용된다.

여러 상수 값들을 그룹화하는 것이 목적이며, 역시 자바스크립트에는 존재하지 않는 개념이다.

 

enum 이름 {
    // 각 멤버가 할당값을 가지고 있음
    상수값1, // 자동으로 0이라는 값을 가지고 있음
    상수값2, // 1
    상수값3, // 2
    상수값4, // 3
}

// 값을 명시적으로 지정할 경우
enum 이름1 {
    상수값1 = 1,
    상수값2, // 2
    상수값3, // 3
    상수값4, // 4
}

숫자형 Enum

enum PlayerState {
    Buffering,  // 0
    Playing,    // 1
    Paused,     // 2
    Seeking     // 3
}

let currentState: PlayerState;

currentState = PlayerState.Buffering
currentState = PlayerState.Playing
// currentState = "Playing" // 변수가 가질 수 있는 값은 Enum임


const isPlaying = (state:PlayerState) => {
    return state === PlayerState.Playing
}

// 플레이어 재생중?
isPlaying(currentState); // true

 

 

문자열 Enum

enum Direction {
    Left = "LEFT",
    Right = "RIGHT",
    Up = "UP",
    Down = "DOWN"
}

function move(dir: Direction) {
    switch (dir) {
        case Direction.Left:
            // 왼쪽 로직
            break;
        case Direction.Right:
            // 오른쪽 로직
            break;
        // ...
    }
}

move(Direction.Left)
move(Direction.Right)