[TypeScript] Interface & Type

interface & type

interface는 오로지 object의 모양을 typescript에게 설명해 주기 위해서만 사용된다.

type Team = "red" | "blue" | "yellow" // ok
// interface Team = "red" | "blue" | "yellow" // X
// interface  Tema = string //X

type Player = {
	name: string
    team: Team
}

interface Player {
	name: string
    team: Team
}

// 상속

type User = {
	name: string
}

interface Player extends User {
	~~~~
}

type Player = User & {
	~~~~
}

// 인터페이스 합쳐줌 Type으로는 불가능!

interface User {
	name: string
}

interface User {
	lastName: string
}

interface User {
	health: number
}

const bibliya: User = {
	name: 'blbliya",
    lastName: "n",
    health: 10
}

// Type

type PlayerA = {
    name: string
}

type PlayerAA = PlayerA & {
    lastName: string
}

// type에서는 불가!
// type PlayerAA = {
//     health: number
// }

const playerA: PlayerAA = {
    name: "Blbliya",
    lastName: "Seo"
}

// interface

interface PlayerB {
    name: string
}

interface PlayerBB extends PlayerB {
    lastName: string
}

//interface는 가능!
interface PlayerBB {
    health: number
}

const playerB: PlayerBB = {
    name: "Blbliya",
    lastName: "Seo",
    health: 10
}

 

abstract class & interface

1. Abstact Class 구현

TypeScript

// 추상 클래스로 구현

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}`;
    }
}

JavaScript

// 추상 클래스로 구현
class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}
class Player extends User {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
    sayHi(name) {
        return `Hello, ${name}. My name is ${this.fullName}`;
    }
}

2. Interface 구현

TypeScript

// 인터페이스로 구현

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

// implement를 쓰면 가벼워 지는데
// 그 이유는 추적하지 못하기 때문에 javascript에서 User를 안 보이게 사용할 수 있다
// extends를 쓰면 JavaScript로 변환할 때 그래도 변역이 되어서 감

// interface를 상속할 때는 property를 private이나 protected로 만들지 못한다!
// only public

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}`;
    }
}

JavaScript

class Player {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
    sayHi(name) {
        return `Hello, ${name}. My name is ${this.fullName}`;
    }
}

type으로 사용할 수 도 있고 두개 이상의 인터페이스를 받을 수도 있다
TypeScript

// 인터페이스로 구현

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

interface Human {
    health: number
}

// 두개의 인터페이스를 사용

class Player implements User, Human {
    constructor(
        public firstName: string,
        public lastName: string,
        public health: number
    ) {}
    fullName(){
        return `${this.firstName} ${this.lastName}`;
    }
    sayHi(name: string){
        return `Hello, ${name}. My name is ${this.fullName}`;
    }
}

function makeUser(user: User): User {
    return {
        firstName: "bibliya",
        lastName: "Seo",
        fullName: () => `xxx`,
        sayHi: (name) => `string`
    }
}

// makeUser({
//     firstName: "bibliya",
//     lastName: "Seo",
//     fullName: () => `xxx`,
//     sayHi: (name) => `string`
// })

JavaScript

// 인터페이스로 구현
// 두개의 인터페이스를 사용
class Player {
    constructor(firstName, lastName, health) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.health = health;
    }
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
    sayHi(name) {
        return `Hello, ${name}. My name is ${this.fullName}`;
    }
}
function makeUser(user) {
    return {
        firstName: "bibliya",
        lastName: "Seo",
        fullName: () => `xxx`,
        sayHi: (name) => `string`
    };
}
// makeUser({
//     firstName: "bibliya",
//     lastName: "Seo",
//     fullName: () => `xxx`,
//     sayHi: (name) => `string`
// })

type과 interface 모두 추상 클래스를 대체할 수 있다

TypeScript

// type & interface 모두 추상 클래스를 대체할 수 있음!

type PlayerA = {
    firstName: string
}

interface PlayerB {
    firstName: string
}

class User implements PlayerA {
    constructor(
        public firstName: string
    ){}
}

class User2 implements PlayerB {
    constructor(
        public firstName: string
    ){}
}

JavaScript

"use strict";
// type & interface 모두 추상 클래스를 대체할 수 있음!
class User {
    constructor(firstName) {
        this.firstName = firstName;
    }
}
class User2 {
    constructor(firstName) {
        this.firstName = firstName;
    }
}