타입스크립트의 클래스

한 입 크기로 잘라먹는 타입스크립트 - 타입스크립트의 클래스

 

 

1. 타입스크립트의 클래스
class 에서 필드 선언시, 암시적으로 'any' 형식이 포함된다는 오류가 발생한다. 변수의 타입을 추론할 정보가 없기 때문이다.
이런 경우에 암시적 any 타입이 할당되어도 상관 없는 경우, tsconfig.json 에서 "noImplicitAny": false 옵션을 추가한다. 암시적 any 옵션을 허용하지 않는 옵션을 false 처리 한다.

- chapter1.ts

/**
 * 타입스크립트의 클래스
 */
const employee = {
    name: '송진성'
  , age: 31
  , position: 'developer'
  , work() {
        console.log('일함');
    }
};

class Employee {
    // 필드
    name;
    age;
    position;
}

- tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext"
      , "module": "ESNext"
      , "outDir": "dist"
      , "strict": true
      , "moduleDetection": "force"
      , "skipLibCheck": true // 추가
      , "allowJs": true
      , "noImplicitAny": false
    }
  , "include": ["src"]
  , "ts-node": {
        "esm": true
    }
}

하지만 any 타입같은 위험한 코드들을 방지하기 위해 "noImplicitAny": true 로 하는 것이 좋다.
클래스 내부의 필드의 타입을 정의한다.
하지만 다시 오류가 발생하는데, 초기값과 생성자가 없어서 오류가 발생한다.
오류를 제거하는 가장 간단한 방법은 선택적 프로퍼티로 만들어 주면 된다.

- chapter1.ts

...
class Employee {
    // 필드
    name?: string;
    age?: number;
    position?: string;
}

그렇게 좋은 방법은 아니다.
다른 방법으로는 초기값을 설정한다.

- chapter1.ts

...
class Employee {
    // 필드
    name: string = '';
    age: number = 0;
    position: string = '';
}

만약 초기값으로 설정한 마땅한 값이 없을땐, 생성자를 만들어 매개변수로 받은 값을 필드에 할당한다.
이후 메서드도 마저 정의하여 타입스크립트의 클래스를 완성한 뒤, 인스턴스를 만들어 본다.

- chapter1.ts

...
class Employee {
    // 필드
    name: string;
    age: number;
    position: string;

    // 생성자
    constructor(name: string, age: number, position: string) {
        this.name = name;
        this.age = age;
        this.position = position;
    }

    // 메서드
    work() {
        console.log('일함');
    }
}

// 객체의 인스턴스
const employeeB = new Employee('송진성', 31, '개발자');
console.log(employeeB);

터미널에서 tsx 명령어를 통해 실행한다.

- Terminal

tsx src/chapter1.ts
    Employee { name: '송진성', age: 31, position: '개발자' }

타입스크립트의 클래스는 자바스크립트의 클래스로 취급되는 동시에 타입으로도 취급된다.
즉, 클래스가 하나의 타입으로도 작용한다는 것이다.

- chapter1.ts

...
// 객체 타입으로 정의됨
const employeeC: Employee = {
    name: ''
  , age: 0
  , position: ''
  , work() {}
}

타입스크립트는 구조적 타입 시스템을 따르기 때문이다.
Employee 클래스를 확장한 더 세분화된 클래스를 생성한다.

- chapter1.ts

...
// 세분화된 클래스 (상속받는 클래스, 파생 클래스)
class ExecutiveOfficer extends Employee { // Employee 상속
    // 필드
    officeNumber: number;

    // 생성자
    constructor(name: string, age:number, position: string, officeNumber: number) {
        super(name, age, position); // 자바스크립트와 다르게 super() 생략하면 오류, 매개변수를 빠트려도 오류
        this.officeNumber = officeNumber;
    }
}

타입스크립트에서 클래스를 사용하면 자바스크립트에서 클래스를 사용할 때보다 더 안전하게 사용할 수 있다.


참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런