[타입스크립트] interface 활용

이번 글은 타입스크립트에서 interface를 정리해보겠습니다.

 

1. interface 정의

interface는 타입 체크와 일관성을 가지기 위해 변수, 함수, 클래스에 사용되며, 여러가지 타입을 갖는 프로퍼티로 이루어진 타입을 정의할 때 사용됩니다.

 

2. 변수와 interface

interface가 변수의 타입으로 사용할 때, interface로 선언한 변수는 해당 interface를 준수해야 합니다.

준수하지 않을 시, 에러가 발생하게 됩니다.

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

// ✅
let user1: User = {
    name : "minsu",
    age : 30
}

// gender는 interface에 정의하지 않았으므로 error
let user2: User = {
    name: "gihun",
    age : 29,
    gender : 'man'
}

 

만약 프로퍼티가 선택적으로 필요한 경우 프로퍼티명 뒤에 ? 붙이면 생략하여도 에러가 발생하지 않습니다. 

interface User {
    name : string;
    age : number;
    gender?: string;
}

// ✅
let user: User {
    name : "gildong",
    age : 23
}

 

3. 함수와 interface

interface는 함수의 타입으로도 사용할 수 있습니다.

interface Add {
    (num1: number, num2: number): number;
}

const add: Add = function(x, y) {
    return x + y;
}

add(10, 20); // success 
add(10, "20"); // error
add(10) // error

interface Minus {
	(num1: number, num2: number): number;
}

// arrow funciton
const minus: Minus = (x, y) => {
	return x - y;
}

 

4. 클래스와 interface

클래스 선언문의 implements 뒤에 인터페이스를 선언하면 클래스를 구현할 수 있습니다.

클래스의 일관성은 유지할 수 있으나, 직접 인스턴스를 생성할 수는 없습니다.

// TS
interface Car {
    name: string;
    color: string;
    year: number;
}

class CSeltos implements Car {
    name = "seltos";
    color = "white";
    year = 2005;
}

// JS
class CSeltos {
    constructor() {
        this.name = "seltos";
        this.color = "white";
        this.year = 2005;
    }
}

 

interface 안에 메소드도 함께 포함할 수 있습니다. 

interface Car {
    name: string;
    color: string;
    year: number;
    sayColor(): void;
}

class CSeltos implements Car {
    name = "seltos";
    color = "white";
    year = 2005;
    sayColor() {
        console.log(`Hello, ${this.color}`)
    }
} 

const s = new CSeltos();
s.sayColor();				// "Hello, white"

 

이번에는 constructor을 이용해 클래스가 생성될 때 색상을 black으로 바꿔서 출력해보겠습니다.

interface Car {
    name: string;
    color: string;
    year: number;
    sayColor(): void;
}

class CSeltos implements Car {
    name = "seltos";
    color;
    constructor(c : string) {
        this.color = c;
    }
    year = 2005;
    sayColor() {
        console.log(`Hello, ${this.color}`)
    }
} 

const s = new CSeltos("black");
s.sayColor();					// "Hello, black"

 

5. interface 상속

interface는 extends를 사용해 인터페이스를 상속받을 수 있습니다.

interface User {
    name: string;
    gender: string;
}

interface PlusUser extends User{
    age: number;
}

const user: PlusUser = {
    name : "gildong",
    gender : "man",
    age : 22
}

 

또한, 복수의 interface도 상속받을 수 있습니다.

interface User {
    name: string;
    gender: string;
}

interface Live {
    live : string;
}

interface PlusUser extends User, Live{
    age: number;
}

const user: PlusUser = {
    name : "gildong",
    gender : "man",
    age : 22,
    live : "seoul"
}