[typescript] interface와 type의 비교
9216 단어 typescripttypescript
type과 interface는 상당히 비슷한 기능을 갖고 있다.
많은 부분에서 interchangable하다.
type은 주로 function에 사용하고, interface는 object (class 타입)에 주로 사용한다. 이것은 반드시 그래야하는것은 아니고, 단지 더 자연스러운 방식 을 선택하는 것이다.
type과 interface의 차이점
🚀 type 에서만 가능한 것들
union
type Cat = { type: 'Animal', species: 'Cat' };
type Dog = { type: 'Animal', species: 'Dog'};
type Pet = Cat | Dog;
const kitty: Pet = { type: 'Animal', species: 'Dog' }
primitives
type Id = string | number;
type date = string;
shorthand functions
type Func = (str: string) => string
type returnBool<T> = (a: T) => boolean;
const isValidNumber: returnBool<any> = (a) => Number.isInteger(a);
isValidNumber(1) // true
isValidNumber('a') // false
🚀 interface 에서만 가능한 것들
declaration merging
// 기존 Request가 있다고 가정
interface Req {
url: string;
params: string;
}
// 굳이 다른이름으로 extends하거나 type을 재 정의하는 것보다, 같은 이름으로 merging하는 것이 자연스러움
interface Req {
method: string;
}
const request: Req = {
url: '/posts/',
params: '?id=1',
method: 'GET',
}
familiarity (extends)
interface Point2D {
x: number;
y: number;
}
interface Point3D extends Point2D {
z: number;
}
const pos: Point3D = {
x: 1,
y: 2,
z: 0,
}
// type에서도 intersection(&)이라는 것으로 이용해서 extends 처럼 만들 수 있다. 하지만 이 경우는 intersection(&)보다 extends가 더 자연스럽다.
type Point2D = {
x: number;
y: number;
}
type Point3D = Point2D & {
z: number;
}
const pos: Point3D = {
x: 1,
y: 2,
z: 0,
}
Ref
Author And Source
이 문제에 관하여([typescript] interface와 type의 비교), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@devstefancho/typescript-interface와-type의-비교저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)