Interface(인터페이스)
- 인터페이스는 상호간에 정의한 약속 혹은 규칙을 뜻한다. (쉽게 설명하면 사용 설명서같은 느낌도 든다.)
- 객체의 속성, 함수의 매개변수 및 리턴값, 배열 및 객체의 접근 방식, 클래스에 대해 인터페이스를 지정할 수 있다. (타입의 틀을 정할 수 있다.)
객체에서의 인터페이스
// 객체
interface Person {
name: string;
age: number;
gender?: string; // ?을 통한 옵션 속성 사용(선택적으로 사용 가능)
}
//
const tomas: Person = {
name: "tomas",
age: 20,
};
//
const james: Person = {
name: "james",
age: 30,
gender: "male",
};
// 객체의 readonly(읽기 전용 속성)
interface Beer {
readonly brand: string;
}
//
const cass: Beer = {
brand: "Cass",
};
//
cass.brand = "Hite"; // annot assign to 'brand' because it is a read-only property.
- 위처럼 인터페이스를 활용하여 필요한 속성 개수, 속성명을 정할 수 있다.
- 인터페이스에 정의된 성을 기입할때, 순서를 지킬 필요는 없다.
- 특정 속성명 뒤에
?를 기입하게 되면, 옵션 속성으로서 해당하는 속성을 선택적으로 사용할 수 있게 된다.
readonly 키워드를 사용할 경우, 해당 속성이 가진 값의 수정이 불가능해진다.
배열에서의 인터페이스
const arr: ReadonlyArray<number> = [1, 2, 3, 3, 5];
arr.push(1); // Property 'push' does not exist on type 'readonly number[]'.
- 배열을 선언할때
ReadonlyArray 타입을 통해 배열을 생성하면, 읽기 전용의 배열이 생성된다.
push와 같은 메소드를 통해 기존 배열을 수정할 수 없었다.
함수에서의 인터페이스
interface User {
(userName: string, userAge: number): boolean;
}
//
const person1: User = (userName: string, userAge: number): boolean => {
console.log(userName, userAge);
return true;
};
- 함수의 인자 및 리턴값들에 대한 타입을 지정해줄 수 있다.
클래스에서의 인터페이스
interface personInfo {
name: string;
namePerson(person: string): void;
}
//
class Person implements personInfo {
name: string = "yongmin";
namePerson(personName: string) {
this.name = personName;
}
}
implement 키워드를 통해, 클래스에 인터페이스를 지정할 수 있다.- 클래스 내부의 멤버 변수, 메서드의 인자에 타입을 지정해줄 수 있다.
Reference