본문 바로가기

Front-End/TypeScript

TypeScript #8 (클래스 실습)

반응형

원래 이전부터 쓰던 방식

class Person2 {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    introduce(): string {
        return `Hi, I'm ${this.name}. I'm ${this.age} years old.`;
    }
}

 

 

더 간단하게 ㄱㄱ

class Person2 {

    constructor(public name: string, private age: number) {}
    
    introduce(): string {
        return `Hi, I'm ${this.name}. I'm ${this.age} years old.`;
    }
}

 

 

인터페이스 선언은 앞에서든 뒤에서든 상관 없긴 한데, 앞에서 하는 게 좋다.

interface Vehicle {
    break(): void;
    accelerate(): void; 
    trunk(): void;
}

 

 

"차량" 이라는 부모 클래스 생성 : 공통적으로 받을 요소들이나 기능들 주로 선언.

Vehicle(교통 수단)이라는 규약(인터페이스)를 위에서 선언했고 이를 따르겠다는 의미로 'implements' 사용.

class Car implements Vehicle{
    carModel: string;
    owner: string;
    carWeight: number;
    buyYear: number;
    isSunk: boolean;
    distance: number;

    drive() {
        console.log("Go");
    }

    alarm() {
        console.log("Beep Beep");
    }

    back() {
        console.log("Back");
    }

    wipe() {
        console.log("Wipe");
    }

    break() {
        console.log("Break");
    }

    accelerate() {
        console.log("Accelerate");
    }

    trunk() {
        console.log("Trunk");
    }
}

 

 

"차량" 의 한 종류인 자식 클래스로 "덤프트럭"  클래스 생성.

이 때 부모 클래스인 "차량"을 따를 것(상속)이기 때문에, 'extends' 사용.

class DumpTruck extends Car {
    storage: number;
    operate() {
        console.log("Operate");
    }
    spread() {
        console.log("Spread");
    }
}

 

 

마찬가지로, "차량"의 한 종류인 "버스" 라는 자식 클래스 생성.

이 때 'super' 를 이용해서 생성자 클래스에서 쓸 인자들을 부모 클래스로부터 받아옴.

class Bus extends Car {
    passenger: number;
    busNumber: number;

    constructor(passenger: number, busNumber: number) {
        super();
        console.log("Bus constructor")
    }

    openDoor() {
        console.log("Open Door");
    }
    trunk() {
        console.log("");
    }
}

 

 

 

 

 

반응형

'Front-End > TypeScript' 카테고리의 다른 글

TypeScript #10 (함수 유효성 검사)  (0) 2025.07.02
TypeScript #9 (함수)  (0) 2025.07.02
TypeScript #7 (타입 연습 문제)  (0) 2025.07.02
TypeScript #6 (예제로 보는 모듈 맛보기)  (0) 2025.07.01
TypeScript #5 (클래스)  (0) 2025.07.01