Interfaces

type Player = {
	nickname : string,
    healthBar : number
} // 타입스크립트에게 object의 모양을 알려주는 것, 속성의 이름과 타입에 대해 알려줌

const kiki : Player = {
	nickname : "kiki",
    healthBar : 10
}

type Food = string

const kimchi:Food = "hot"

Interface : 객체의 모양을 특정해주기 위해 사용

인터페이스는 자바스크립트로 컴파일되지 않는다.-> 파일의 크기를 줄일 수 있음

추상클래스와 비슷한 보호를 제공하지만, 자바스크립트 파일에선 보이지 않음

type Team = "red" | "blue" | "yellow" // concrete타의 특정값을 쓸 수도 있음
type Health = 1 | 5 | 10

interface Player {
	nickname : string,
    team : Team // red, blue, yellow 값만 쓸 수 있음
    health : Health
}
// interface : 객체의 모양을 특정해주기 위해 사용

const kiki :Player = {
	nickname : "kiki",
    team : "blue", // 지정한 값 외의 값은 쓸 수 없음
    health : 10
}

interface도 class처럼 상속가능함

interface User {
	name : string
}

interface Player extends User{
	
}

const kiki :Player = { 
	name : "kiki" // Player가 User 를 상속받았기 때문에 name 속성 사용 가능
}


////////// type 키워드로 같은 기능 구현
type User = {
	name : string
}

type Player = User & {

} // &연산자를 써서 속성 공유

const kiki :Player = { 
	name : "kiki" 
}

interface는 property 들을 축적시킬 수 있음

interface User {
	name : string
}

interface User {
	lastName : string
}

interface User {
	health : number
}

// 3개의 인터페이스 생성 -> 3번을 각각 만들어도 타입스크립트가 알아서 하나로 합쳐줌

const kiki: User = {
	name : "kiki",
    lastName : "kuku",
    health : 99
}

추상 클래스만들기

abstract class User {
	constructor(
    	protected firstName : string,
        protected lastName : string
    ) {}
    abstract sayHi(name:string):string
    abstract fullName():string
} // 추상클래스는 상속받는 다른 클래스가 가질 property와 method를 지정하도록 해줌
// 지정한 메소드를 상속받는 다른 클래스가 구현해야함
// 추상클래스는 인스턴스 생성을 허용하지 않음 -> new 키워드로 객체 생성 불가
// 상속받는 클래스가 어떻게 동작해야할 지 일러주기 위해 추상클래스 사용

class Player extends User {
	fullName(){
    	return `${this.firstName} ${this.lastName}`
    }
  	sayHi(name:string){
    	return `Hello ${name}. My name is ${this.FullName()}`
    }
}

// 추상클래스를 인터페이스로 바꾸기 -> 인터페이스를 쓰면 코드가 더 가벼워진다
// 인터페이스는 타입스크립트에서만 존재하고 자바스크립트에서는 존재하지 않음
// -> 자바스크립트 코드로 컴파일되지 않음(파일의 크기를 줄일 수 있음)
interface User {
	firstName : string,
    lastName : string,
    sayHi(name:string):string,
    fullName():string
}

interface Human {
	health : number
}

// 인터페이스의 내용을 상속하기 위해서 extends대신 implements 키워드 사용
// 코드가 더 가벼워짐!
// 각각 다른 인터페이스에서 상속받기도 가능
class Player implements User, Human {
	constructor(
    	public firstName : string, // 인터페이스는 private property들을 사용하지 못함
        public lastName : string,
        public health : number
    ){}
	fullName(){
    	return `${this.firstName} ${this.lastName}`
    }
  	sayHi(name:string){
    	return `Hello ${name}. My name is ${this.FullName()}`
    }
}

인터페이스 또한 타입으로 사용 가능

interface User {
	firstName : string,
    lastName : string,
    sayHi(name:string):string,
    fullName():string
}

function makeUser(user:User):User{
	return "hi"
}

makeUser({
	firstName : "kiki",
    lastName : "kuku",
    fullName : ()=> "xx",
    sayHi(name) => "string"
})

타입과 인터페이스의 비교

 

타입과 인터페이스의 공통점 

오브젝트의 모양과 타입을 알려주는 것이 목표

추상클래스를 대체해서 사용 가능

 

타입과 인터페이스의 차이점

상속하는 방법이 다름