[TypeScript] Object, Interface, Class

Object

// const는 상수를 지정할 때 사용하지만 Object의 값은 수정할 수 있다.
const student = {
    id : "123456",
    name : "Kent"
};

// 아래 두 방법으로 Object의 값에 접근할 수 있다.
student.id = "654321";
student["name"] = "Kevin"

console.log(student); // 출력 : { id: '654321', name: 'Kevin' }
console.log(student["id"]); // 출력 : 654321
console.log(student.name); // 출력 : Kevin

---

Interface

객체(Object)의 구조를 나타내는 경우

interface Car {
    door : number;
    weight : number;
    isOpened? : boolean;
    // function
    move() : void;
};

// Car 형태의 Object
const Boxter718:Car = {
    door : 2,
    weight : 1685,
    isOpened : false,
    move() => {console.log("move")}
};

// 함수에 인자로 Object를 전달하는 경우
function upgradeCar(car : Car, costs? : number):void {
    // code
    console.log(`Car's weight is ${car.weight}KG`);
}

upgradeCar(Boxter718); // 출력 : Car's weight is 1685KG
upgradeCar("Boxter911", 10000); // Car 형태의 인자를 전달하지 않아 오류가 발생한다.

Boxter718.move(); // 출력 : move
Boxter718.go(); // interface에 없는 함수 go를 실행하였기에 오류가 발생한다.

함수의 구조를 나타내는 경우

interface numOperation {
    (num : number, num2 : number):number;
};

const sum:numOperation = (num, num2) => {
    return num + num2;
}
// 위 sum 함수는 numOperation을 implement 하였기 때문에 아래와 같은 형태를 갖는다.
const sum(num : number, num2 : number):number{
    return num + num2
}

// 아래 함수는 numOperation을 implement 하였지만, 반환 형태에 맞지않아 에러가 발생한다.
const multiply(num : number, num2 : number):string{
    return num * num2;
}

---

Class

Class는 변수와 함수가 결합 된 객체이고, 생성자(constructor)와 함수의 내용은 비워둘 수 없다.

class House {
    room : number;
    toilet : number;
    name? : string;

    // 생성자
    constructor(room : number, toilet : number, name? : string) {
        this.room = room;
        this.toilet = toilet;
        // Optional Argument에 대한 처리
        if (name === undefined) {
            console.log("No Name");
        }
    }

    visit():void{
        console.log("Welcome to House");
    }

    quit(): void; // 함수의 내용이 비어있어 오류가 발생한다.
}

var house = new House(3,1);
house.visit();

상속

• 상속받는 클래스의 이름 뒤에 extends [부모 클래스] 이 들어간다.
• 부모 객체의 생성자를 호출하기 위해서는 super()를 사용한다.

// 음료 크기
enum drinkSize{
    Tall,
    Grande,
    Venti
};
// 음료 타입
enum drinkType{
    Cold,
    Hot
};

// 음료에 대한 기본적인 정보를 담은 객체
class Drink{
    size : drinkSize;
    type : drinkType;
    own_cup : boolean;
    takeout : boolean;

    constructor(size:drinkSize, type:drinkType, own_cup:boolean, takeout:boolean){
        this.size = size;
        this.type = type;
        this.own_cup = own_cup;
        this.takeout = takeout;
    }
}

// Drink를 상속받는 Coffee
class Coffee extends Drink{
    constructor(size:drinkSize, type:drinkType, own_cup:boolean, takeout:boolean){
				// 부모 객체 생성자 호출
        super(size, type, own_cup, takeout);
    }
}

Union Type

| 를 이용하여 arg의 타입이 number 혹은 Person이 될 수 있다.

override 기능을 지원하지 않아 이렇게 사용할 수 있다.

class Person {
  age: number;
  constructor(arg: number | Person) {
    if (typeof arg === 'number') {
      this.age = arg;
    } else if (arg instanceof Person) {
      this.age = arg.age;
    }
  }
}