본문 바로가기
개발/TypeScript

[TypeScript] 타입스크립트 클래스 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 23.

이번 글에서는 TypeScript에서 클래스 사용법에대해 알아본다.



1.Basic

1
2
3
4
5
6
7
8
9
10
11
12
class Greeter {
    greeting: string;
    constructor(message:string){
        this.greeting = message;
    }
    greet = () => {
        return "Hello, " + this.greeting;
    }
}
 
let greeter = new Greeter("world");
console.log(greeter.greet());   //Hello, world
cs


클래스의 기본사용법이다.




2.Inheritance

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//inheritance
class Animal{
    move = (distanceInMeters: number = 0=>{
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}
 
class Dog extends Animal {
    bark = () => {
        console.log("Woof! Woof!");
    }
}
 
const dog = new Dog();
dog.bark();     //Woof! Woof!
dog.move(10);   //Animal moved 10m.
 
 
class AnimalCompex{
    name: string;
    constructor(theName: string){
        this.name = theName;
    }
    move(distanceInMeters: number = 0){
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
 
class Snake extends AnimalCompex{
    constructor(name: string){
        super(name);
    }
    move = (distanceInMeter = 5=> {
        console.log("Slithering...");
        super.move(distanceInMeter);
    }
}
 
class Horse extends AnimalCompex {
    constructor(name: string){
        super(name);
    }
    move = (distanceInMeters = 45=> {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}
 
let sam = new Snake("Sammy the Python");
let tom: AnimalCompex = new Horse("Tommy thre Palomino");
sam.move();
/*
Slithering...
Sammy the Python moved 5m.
*/
tom.move();
/*
Galloping...
Tommy thre Palomino moved 45m.
*/
cs


상속을 이용한 코드이다.




3.Accessors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class EmployeeAccessors {
    private _fullName: string;
    
    constructor(fullName: string){
        this._fullName = fullName;
    }
 
    get fullName(): string {
        return this._fullName;
    }
 
    set fullName(newName: string){
            this._fullName = newName;
    }
}
 
let employeeAccessors = new EmployeeAccessors('Bob');
 
console.log(employeeAccessors.fullName);    //getter
employeeAccessors.fullName = "James";       //setter
console.log(employeeAccessors.fullName);    //getter
cs


TypeScript에서 getter와 setter를 선언하고 호출하는 방법이다.

우선 private 변수는 관습적으로 언더바를 앞에다 붙여주고, fullName으로 getter와 setter를 사용해준다.




4.Static Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Static Properties
class Grid {
    static orgin = {x: 0, y: 0};
    calculateDistanceFromOrgin(point: {x: number; y: number;}){
        let xDist = (point.x - Grid.orgin.x);
        let yDist = (point.y - Grid.orgin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor(public scale: number){}
}
 
let grid1 = new Grid(1.0);
let grid2 = new Grid(5.0);
console.log(grid1.calculateDistanceFromOrgin({x:10, y:10}));    //14.142135623730951
console.log(grid2.calculateDistanceFromOrgin({x:10, y:10}));    //2.8284271247461903
cs


정적변수도 Java에서와 마찬가지로 Class이름에 '.'을 붙여서 사용해준다.




5.Abstract Classes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//Abstract Classes
abstract class Department {
    constructor(public name: string){
 
    }
 
    printName(): void{
        console.log("Department name : " + this.name);
    }
 
    abstract printMetting(): void;
}
 
class AccountingDepartment extends Department{
 
    constructor(){
        super("Accounting and Auditing");
    }
 
    //override 필수
    printMetting(): void {
        console.log("The Accounting Department meets each Monday at 10am.");
    }
 
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}
 
let department: Department;
//error cannot create an instance of an abstract class//department = new Department();
department = new AccountingDepartment();
department.printName();     //Department name : Accounting and Auditing
department.printMetting();  //The Accounting Department meets each Monday at 10am.
//error method doesn't exist on declared abstract type //department.generateReprots();
cs



Java에서의 추상 클래스와 같은 방법으로 사용된다.


필자는 TypeScript 공식 홈페이지를 참조하여 글을 작성했다.

자세한 내용을 확인하고 싶으면 아래 링크를 참조한다.

https://www.typescriptlang.org/index.html

태그

댓글0