본문 바로가기

Web/TypeScript

[TypeScript] Interfaces

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