typescript, Interface

cptkuk91·2022년 12월 16일
1

TypeScript

목록 보기
9/13
post-thumbnail

인터페이스는 객체의 구조를 설명합니다.
Interface 키워드를 통해 생성할 수 있습니다.
Interface 생성자는 첫 글자를 대문자로 하는 관례가 있다.
그리고 Interface는 사용자 정의 type으로 사용할 뿐입니다.
따라서 구체적인 값을 추가할 수 없고, type만 설정합니다.

interface Person {
	name: string;
    // name: string = "max"; Error를 발생
    age: number;

	greet(phrase: string): void;
}

let user1: Person;

user1 = {
	name: "max",
    age: 30,
    greet(phrase: string){
    	console.log(phrase + " " + this.name);
    }
};

user1.greet("Hello World I am");
// Hello World I am max

Interface를 type으로 바꿔도 작동합니다.
그럼 왜 Interface를 사용할까요?
Interface는 객체의 type만 설정할 수 있습니다.

작업 중 class 보다 Interface를 많이 사용합니다. (약간의 약속 아닌 약속 느낌..)

type Person = {
	name: string;
    // name: string = "max"; Error를 발생
    age: number;

	greet(phrase: string): void;
}

let user1: Person;

user1 = {
	name: "max",
    age: 30,
    greet(phrase: string){
    	console.log(phrase + " " + this.name);
    }
};

user1.greet("Hello World I am");
// Hello World I am max

또 다른 예시의 Interface

class implements를 통해 Interface를 확장할 수 있습니다.
Interface의 가장 큰 장점은 class extends와 달리, 여러개를 추가할 수 있습니다.

interface Greetable {
	name: string;
    
    greet(phrase: string): void;
}

// 아래 코드 처럼 implements 여러개의 Interface 추가 가능
// class Person implements Greetable, AnotherInterface {}

class Person implements Greetable {
	name: string;
    age = 30;
    
    constructor(n: string){
    	this.name = n;
    }
    
    greet(phrase: string) {
    	console.log(phrase + " " + this.name);
    }
}

let user1: Greetable;

user1 = new Person("max");
// 위 처럼 Person에 age를 직접 추가한 경우에는 age를 자동으로 포함합니다.

console.log(user1);
// Person {age: 30, name: "max");

그래서 왜 Interface를 사용할까?

class type 부족한 부분이 있을 때 Interface를 활용해 다른 코드 의존, 중복 없이 추가할 수 있습니다.

예를들어 class에 함수가 없을 때, Interface에 함수를 추가해 implements해 추가할 수 있습니다.

profile
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)

0개의 댓글