가수면
인터페이스 vs 타입 앨리어스 본문
interface
객체를 정의할 때, 확장성이 있을 때 사용
type
데이터를 정의할 때, 확장성이 없거나 적다고 판단될 때 사용
확장
interface
interface User {
id: number;
name: string;
age: number;
}
interface Admin extends User {
role: string;
}
type
type PeopleType = {
name: string
age: number
}
type StudentType = PeopleType & {
school: string
}
함수 정의
interface
interface Calculation {
(a: number, b: number): number;
}
const add: Calculation = (a, b) => a + b;
interface login {
(username: string, password: string): boolean;
}
let loginUser: login;
loginUser = function(id: string, pw: string) {
console.log('로그인 했습니다');
return true;
}
type
type Calculation = (a: number, b: number) => number;
const add: Calculation = (a, b) => a + b;
interface
읽기 전용 속성
재할당 불가
interface CraftBeer {
readonly brand: string;
}
let myBeer: CraftBeer = {
brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!
let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error
interface ReadonlyStringArray {
readonly [index: number]: string;
}
const arr: ReadonlyStringArray = ['Thor', 'Hulk'];
arr[2] = 'Capt'; // Error!
만약 인터페이스 정의하지 않은 속성들을 추가로 사용하고 싶을 때
interface CraftBeer {
brand?: string;
[propName: string]: any;
}
'JavaScript > TypeScript' 카테고리의 다른 글
타입스크립트에서 children (0) | 2023.04.01 |
---|---|
라이브러리 매개변수 (0) | 2023.03.27 |
string | undefined 등 props 관련 오류 (0) | 2023.01.08 |
json 타입 가져오기 (0) | 2023.01.08 |
State (0) | 2023.01.07 |
Comments