반응형
원래 이전부터 쓰던 방식
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 |