type과 interface
둘 다 데이터의 객체나 값의 타입을 정의하기 위해 사용
type
-
기존 타입을 재사용하거나 새로운 타입을 정의할 때 사용
-
일반 타입처럼 사용되기 때문에 타입 앨리어싱(Type Aliasing)이라고도 불림
-
computed property나 Union타입이나 Tuple타입 등을 정의하는데 사용
-
타입 주석자리에 사용 가능
// type type Animal = {breath: true}; const sseung1: Animal & {think: true} = {breath: true, think: true}
- union( | )
- 보통 또는 이라고 부른다 string | number (string 또는 number)
type Person = {name: string} | {age: number};
// 속성 중 한개만 있어도 에러가 나지 않음
const my: Person = {name: "sseung" };
const my: Person = {age: 33};- intersection(&)
- 둘 다여야한다 (확장)
// 속성 중 한개만 없어도 에러가 남
type Person = {name: string} & {age: number};
const my: Person = {name: "sseung", age: 33}; // 가능
const my: Person = {name: "sseung"}; // age가 없음으로 에러interface
- 객체의 형태를 정의
extends
- 객체지향에서 사용하는 것으로, class 뿐만아니라 interface에서도 사용 가능
- 기존 클래스를 상속받아 새로운 클래스를 만들 때 'extends'로 부모 클래스를 지정할 수 있다.
- 자식 클래스에서 부모클래스로부터 상속받은 속성과 메서드를 오버라이드하여 새롭게 정의 가능
// interface에서 extends 사용 예시
interface Person {
name: string;
age: number;
sayHello(): void;
}
interface Employee extends Person {
employeeID: number;
}
// class에서 extends 사용 예시
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
class Employee extends Person {
employeeID: number;
constructor(name: string, age: number, employeeID: number) {
super(name, age);
this.employeeID = employeeID;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and my employee ID is ${this.employeeID}.`);
}
}🧐 내 생각 정리
상황에 맞게 골라쓰면 되지만 보통
객체를 사용할 때에는 interface, 그 외의 타입 지정해야할 때에는 type을 쓰면 되는 것 같다.
공부하며 정리&기록하는 ._. 씅로그
Front-end