Typescript-challenge 6

January·2022년 7월 28일
0

type 활용

type Food = string

type Player = {
  nickname: string,
  healthBar: number
}

type Team = "read" | "blue" | "yellow"
type Health = 1 | 5 | 21

type Player = {
  nickname: string,
  team: Team,
  healthBar: Health
}

많은 종류의 타입을 설명하거나 지정된 값, 옵션으로 제한할 수 있다. type과 interface는
약간의 차이점은 있지만 거의 비슷하다. type은 원하는 모든 것을 만들 수 있다.

interface

interface Player {
  nickname: string,
  healthBar: number
}

interface는 객체만을 특정할 수 있는 한가지 용도만 가지고 있다.

상속

interface User {
  name: string
}

interface Player extends User {
  health: number
}

const mayer : Player = {
  name: "john"
}

interface는 class처럼 상속이 가능하다.

type User {
  name: string
}
type Player = User & {
  health: number
}
const mayer : Player = {
  name: "john"
}

type으로 상속할때는 다른 방법이다.

interface 같은 이름으로 별개 작성해도 합쳐짐

interface User {
  name: string
}

interface User {
  age: number
}

const me: User = {
  name: "John",
  age: 33
}

클래스와 인터페이스의 차이점

abstract class User {
  constructor(
    private firstName:string,
    private lastName:string,
    public nickName:string
  ) {}
  getFullName() {
    return `${this.firstName} ${this.lastName}`
}
  
class Player extends User {
}

자바스크립트에 사용되지 않는 User클래스가 출력이 된다. 그래서 인터페이스를 사용하면 자바스크립트에서는 표기 되지 않고 타입스크립트에서만 명시해줄 수 있다. interface를 상속할때는 private property를 사용하지 못한다.

interface 오브젝트나 클래스의 모양을 묘사하도록 해준다.

interface User {
  firstName:string,
  lastName:string,
  nickName:string,
  getFullName(): string
}
  
class Player implements User {
  constructor(
    public firstName: string,
    public lastName: string,
    public nickName: string
  ){}
  getFullName() {
    return `${firstName} ${lastName} and ${nickName}`
  }
}

extends를 쓰면 자바스크립트로 바뀐다. 그래서 자바스크립트가 사용하지 않는 단어인 implements를 대신 쓴다. 그래서 자바스크립트의 코드가 가벼워질 수 있다.

interface는 타입스크립트에서만 존재한다. 코드가 가벼워지고 파일 사이즈를 줄일 수 있는 방법이다.

class Player implements User, Human {
  constructor(
    public firstName: string,
    public lastName: string,
    public nickName: string,
    public Health: string
  ){}
  getFullName() {
    return `${firstName} ${lastName} and ${nickName}`
  }
}

Human 인터페이스를 추가로 상속할 수 있다.

즉, 타입스크립트에게 객체 모양을 알려주기 위해서는 인터페이스를 쓰고 나머지 상황에서는 타입을 쓴다.

0개의 댓글