[TypeScript] 3. Classes

3. Classes

3-1. class 사용법

방법1

class Player {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: String
  ) {}
}

const ys = new Player('park', 'ys', 'hailey');

ys.firstName; //error
ys.nickname;

방법2 (abstract method: 추상 메소드)

오직 다른곳에서만 상속받을수만 있는 클래스
메소드 : 클래스 안에 존재하는 함수

abstract class User {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: String
  ) {}
}

class Player extends User {}

const ys = new Player('park', 'ys', 'hailey');
const ys1 = new User('park', 'ys', 'hailey'); //error 직접적인 설계 불가능

ys.firstName; //error
ys.nickname;

abstract class User {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: String
  ) {}
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Player extends User {}

const ys = new Player('park', 'ys', 'hailey');

ys.getFullName(); //잘 작동함

방법3 (protected 사용법)

필드가 외부로부터는 보호되지만 다른 자식 클래스에서는 사용되기 원할 때

abstract class User {
  constructor(
    protected firstName: string,
    protected lastName: string,
    protected nickname: String
  ) {}
  abstract getNickName(ar: string): void;
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Player extends User {
  getNickName() {
    console.log(this.nickname); //private는 접근 불가 error
  }
}

const ys = new Player('park', 'ys', 'hailey');

ys.getFullName();

코드가 같지만 js는 다르게 보임

'use strict';
class User {
  constructor(firstName, lastName, nickname) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.nickname = nickname;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
class Player extends User {
  getNickName() {
    console.log(this.nickname);
  }
}
const ys = new Player('park', 'ys', 'hailey');
ys.getFullName();

3-2. Interfaces 1

type Words = {
  [key: string]: string;
  // Words 타입이 number만을 property로 가지는 오브젝트라는 뜻
};
let dict: Words = {
  '1': 'food',
};

type Words = {
  [key: string]: string;
};

class Dict {
  private words: Words;
  constructor() {
    this.words = {};
  }
  add(word: Word) {
    if (this.words[word.term] === undefined) {
      this.words[word.term] = word.def;
    }
  }
  def(term: string) {
    return this.words[term];
  }
}

class Word {
  constructor(
    public readonly term: string, //public이지만 바꿀 수 없게 하는 법
    public readonly def: string
  ) {}
}
const kimchi = new Word('Kimch', '한국의');

kimchi.def = '김치'; //바꿀 수 없음

const dict = new Dict();

dict.add(kimchi);
dict.def('kimchi');

방법1

type Player {
  nickname : string,
  healthBar: number
}

const nico :Player = {
    nickname : 'nico',
    healthBar : 10
    }

방법2

type Food = string;
const kimch: Food = 'delicious';

방법3-1

• typescript에게 object의 모양을 알려주는 방법1
• interface 보다 활용할 수 있는 점이 많음

type Team = 'Red' | 'Blue' | 'Yellow';
type Player = {
  nickname: string;
  team: Team;
};

type Hello = string; //사용 가능

const nico: Player = {
  nickname = 'nico',
  team = 'yellow', // 'pink'적으면 오류 뜸
};

방법3-2

• typescript에게 object의 모양을 알려주는 방법2
• 오로지 object의 모양을 typescript에게 설명해 주기 위해서만 사용
• 객체 지향 프로그래밍의 개념을 활용해서 디자인 됨
• 각각 작성해도 알아서 모아줌

type Team = 'Red' | 'Blue' | 'Yellow';
interface Player {
  nickname: string;
  team: Team;
}

interface Hello = string //사용 불가

const nico: Player = {
  nickname = 'nico',
  team = 'yellow', // 'pink'적으면 오류 뜸
};

interface VS type

//example 1
interface User {
  name: string;
}

interface Player extends User {}

const ys: Player = {
  name: 'yesol',
};

// example 2
type User = {
  name: string;
};

type Player = User & {};
const ys: Player = {
  name: 'yesol',
};

interface 장점

각각 만들어도 알아서 합쳐줌(type은 불가능)

interface User {
  nickname: string;
}
interface User {
  lastName: string;
}
interface User {
  health: number;
}

const ys: User = {
  nickname = 'yesol',
  lastName = 'park',
  health = 10,
};

3-2. Interfaces 2

abstract class User {
  constructor(protected firstName: string, protected lastName: string) {}
  abstract sayHi(name: string): string;
  abstract fulName(): string;
}