[TypeScript] interface 사용법

- 개요

안녕하세요. 이번 시간에는 TypeScript interface에 대해 알아보겠습니다.

 

TypeScript에서 Obejct 타입을 선언할 때 interface와 type을 사용합니다. JavaScript에서 객체를 접근을 해야 하는 상황이 많습니다.

 

TypeScript는 객체를 선언하고 그냥 접근하게 되면... 접근을 할 수 없습니다. (JavaScript는 그냥 되는데... 불편하군... )

 

let user:object = {
    name: "ryan",
    age: 14
} //객체를 선언

console.log(user.name) // Error

 

이렇기 때문에 우리는 interface를 선언해서 접근을 합니다.

 

- 사용법

선언 방법 및 사용법

/**
 * interface 인터페이스 이름 {
 *  key: type;
 *  key: type;
 * }
 */

interface User {
    name:string,
    age: number
}

//기본적으로 Object 선언하는 방식으로 선언
const user:UserInfo = {
    name: "ryan",
    age: 20,
}

console.log(user.name) // ryan

object 타입으로 선언했을 때와 다르게 User interface를 활용해 user 객체 name 속성에 접근하면 Error가 발생하지 않습니다.

 

optional, readonly, index 사용법

enum Gender {
    Man,
    Woman
}

interface User {
    name: string;
    age: number;
    gender?: Gender; // 있어도 되고 없어도 되는 옵셔널 설멎(물음표)
    readonly birth: number; //읽기 전용
    [key:number]: string; // 여러 속성 정보를 받을 때 사용 (key:number, value:string)
}

//gender 포함
const user1:User = {
    name: "ryan1",
    age: 20,
    gender: Gender.Man,
    birth:19901210,
}

//gedner 제외
const user2:User = {
    name: "ryan2",
    age: 22,
    birth:19891225
}

//index 사용
const user3:UserInfo = {
    name: "ryan2",
    age: 22,
    birth:19891225,
    1: "1반",
    2: "2번"
}

gender: 속성은 옵셔널(물음표) 형태이기 때문에 사용하지 않으면 선언을 피할 수 있습니다.

birth: 속성은 읽기 전용으로 선언했기 때문에 값을 수정하려고 하면 Compile Error가 발생합니다.

[key:number]: 속성은 index 방식으로 여러 개를 한 번에 사용할 수도 있지만, 사용하지 않으면 선언을 피할 수 있습니다.

 

Class 사용

//자동자 인터페이스 선언
interface Car {
    name: string,
    color: string,
    start: () => void,
    stop: () => void,
}

//Kia 클래스 선언
class Kia implements Car {
    name = "K5"
    color = "white"
    start(){
        console.log("출발")
    }

    stop(){
        console.log("정차")
    }
}

//클래스 생성
const kia = new Kia();

//출발 함수 호출
kia.start

Class를 사용하기 때문에 interface에 함수를 정의해 사용할 수도 있습니다.

 

상속

Class가 Interface를 상속을 받을 때 implements 키워드를 사용했습니다. 만약 Interface 끼리 상속을 하게 되면 어떻게 해야 될까요?

extends 키워드를 사용하면 interface들끼리 상속이 가능합니다.

 

interface User {
    user_name: string,
    age: number,
}

interface MyCar extends User{
    car_name:string,
    color: string,
    start: () => void,
    stop: () => void,
}

class RyanCar implements MyCar{
    user_name = "Ryan"
    age = 1990
    car_name = "K5"
    color = "white"
    start(){
        console.log("출발")
    }
    stop(){
        console.log("정차")
    }
}

interface 끼리 상속은 extends를 사용하며 class 상속은 implements를 사용합니다.

 

이번 시간에는 TypeScript에서 interface를 다루는 방법에 대해 알아봤습니다.