type Team = "red" | "blue" | "yellow"
type Health = 1 | 5 | 10
interface Player {
nickname: string,
team: Team
health: Health
}
Interfaces는 한 가지 용도만을 가짐
object 모양을 특정하기 위함
TypeScript에게 object 모양을 알려주기 위한 방법은
1. Type - 좀 더 유연함
2. Interfaces - 객체 지향 프로그래밍의 개념을 활용해서 디자인
interface User {
name:string
}
// interface는 새 타입, 필드를 정의할 떄 기존 이름 사용 가능
interface User {
nickname:string
}
interface Player extends User {
}
const seojin : Player = {
name:"seojin"
}
> interface 상속 방법
type User = {
name:string
}
// Error, type은 이미 정의된 이름 사용 불가
type User = {
nickname:string
}
type Player = User & {
}
const seojin : Player = {
name: "seojin"
}
> type 상속 방법
// 추상 클래스
abstract class User {
constructor(
protected firstName:string,
protected lastName:string
) {}
abstract sayHi(name:string):string
abstract fullName():string
}
class Player extends User {
fullName(){
return `${this.firstName} ${this.lastName}`
}
sayHi(name:string){
return `Hello ${name}. My name is ${this.fullName()}`
}
}
// interface
interface User {
firstName: string,
lastName: string,
sayHi(name:string):string
fullName():string
}
class Player implements User {
constructor(){
public firstName:string,
public lastName:string
){}
fullName(){
return `${this.firstName} ${this.lastName}`
}
sayHi(name:string){
return `Hello ${name}. My name is ${this.fullName()}`
}
}
'Web > TypeScript' 카테고리의 다른 글
[TypeScript] 객체지향 - Classes (0) | 2024.07.05 |
---|---|
[TypeScript] 다형성(Polymorphism) (0) | 2024.07.05 |
[TypeScript] 기본 문법 - 함수 (1) | 2024.07.05 |
[TypeScript] 기본 문법 - Type (1) | 2024.07.04 |
[TypeScript] 를 쓰는 이유 (0) | 2024.07.04 |