TypeScript 클래스 소개 — 정적 속성, 추상류 등

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
TypeScript의 클래스는 JavaScript의 클래스와 마찬가지로 원형 계승 모델의 특수한 문법으로 클래스를 바탕으로 하는 대상 언어에서 유사한 계승이다.클래스는 ES6에 추가된 특수 함수일 뿐 다른 언어class 키워드를 모방하기 위한 것이다.
JavaScript에서 우리는 class 성명과 class 표현식을 가질 수 있다. 왜냐하면 그것들은 함수일 뿐이기 때문이다.모든 다른 함수와 마찬가지로 함수 성명과 함수 표현식이 있다.TypeScript도 마찬가지입니다.클래스는 새 객체를 작성하는 템플릿으로 사용됩니다.TypeScript는 JavaScript 클래스의 구문을 확장한 다음 자체 휨을 추가합니다.이 글에서 우리는 정적 속성, 추상류와 구조 함수를 소개할 것이다.

정적 특성
TypeScript를 사용하여 구성원을 인스턴스 변수로 지정할 수 있습니다. 앞에 키워드static가 없고 정적 구성원을 키워드static로 지정할 수 있습니다.
클래스를 실례화하지 않은 상태에서 정적 구성원을 방문할 수 있습니다.물론 멤버를 위한 방문 수식자입니다.따라서 클래스 밖에서 공공 정적 구성원을 직접 방문할 수 있다.개인 정적 구성원은 클래스에서만 사용할 수 있으며 보호된 구성원은 해당 구성원의 클래스와 하위 클래스에 대한 접근을 정의할 수 있습니다.
필드와 방법 모두 static 키워드를 사용할 수 있습니다.예를 들어, 다음 코드에서 사용할 수 있습니다.

class Person {  
  static numPeople = 0;    
  constructor(name: string) {  
    Person.numPeople++;  
  }  
  static getNumPeople() {  
    return this.numPeople;  
  }  
}

const john = new Person('John');  
const jane = new Person('Jane');  
console.log(Person.numPeople);  
console.log(Person.getNumPeople());

위의 코드에서 실례화Person류가 있을 때마다 우리는 정적 속성numPeople을 1 증가시킨다.정적 속성은 클래스의 모든 실례에 의해 공유되고 그 어떠한 실례에도 속하지 않기 때문에 우리는 numPeople로 직접 접근할 수 있다Person.numPeople.
마찬가지로 우리는 정태적인 방법getNumPeople이 하나 있는데 직접 호출할 수 있고 실례화Person류가 필요 없다.따라서 우리가 numPeople를 사용하여 Person.numPeople를 얻고 Person.getNumPeople()를 호출할 때 두 함수는 모두 2로 되돌아온다.
구성원이 정적이기 때문에 값은 클래스의 일부분이지 실례의 일부분이 아니기 때문에 실례가 삭제되더라도 값은 보류됩니다.이것은 실례 변수와 달리 실례 변수는 클래스 내부this에서 접근하고 실례 변수는 클래스 외부의 클래스 실례에서 접근한다.

추상류
TypeScript에는 하나의 클래스를 구현하고 다른 클래스를 파생시킬 수 있는 추상 클래스가 있습니다.그것들은 직접 실례화할 수 없다.
인터페이스와 달리 추상류는 구성원들에게 세부 사항을 제공할 수 있다.추상류를 설명하려면 abstract 키워드를 사용할 수 있습니다.우리는 또한 방법에 대해 abstract 키워드를 사용하여 추상적인 방법을 설명할 수 있는데 이런 방법은 추상적인 클래스에서 파생되어 실현된다.
추상적인 방법은 이 방법의 실현을 포함하지 않는다.추상류에서 파생된 하위 클래스에서 열거하는 방법을 실현한다.그것들은 방문 수식자도 선택적으로 포함할 수 있다.
다음 코드와 같이 추상적인 클래스와 방법을 사용할 수 있습니다.

abstract class Person {  
  name: string;  
  age: number;  
  constructor(name: string, age: number) {  
    this.name = name;  
    this.age = age;  
  } abstract getName(): string;  
  abstract getAge(): number;  
}

class Employee extends Person{  
  constructor(name: string, age: number) {  
    super(name, age);  
  } 

  getName() {  
    return this.name;  
  } 

  getAge() {  
    return this.age;  
  }  
}

let employee = new Employee('Jane', 20);  
console.log(employee.getName());  
console.log(employee.getAge());

위의 코드에서 우리는 추상Person류가 있는데 추상적인 방법getName과 getAge이 있다.
보시다시피 추상적인 방법에는 서명만 있습니다.이러한 방법의 실제 실현은 Employee류에서 이 류는 Person류로 확장되었다.
우리는 getName류에서 실제getAge와 Employee 방법을 실현했다.
TypeScript에서 클래스를 검사하는 방법은 유형을 서명하고 반환하기 때문에 우리는 추상 클래스에서 개술한 추상적인 방법을 실현해야 한다.이것은 위의 예시에서 getName 방법은 인자가 없어야 하고 문자열을 되돌려야 한다는 것을 의미한다.
마찬가지로 getAge 방법은 매개 변수를 가지고 있지 않고 숫자를 되돌려야 한다.추상적인 방법이 실현된 후에 우리는 다른 방법을 호출하는 것처럼 그것들을 호출할 수 있다.

구조 함수
우리가 유형 스크립트를 성명할 때, 우리는 동시에 여러 내용을 성명했다.실체의 코드 앞에 class 키워드가 있는 이 종류의 실례를 설명하고 있습니다.예를 들어 다음과 같이 쓸 수 있습니다.

class Employee{  
  name: string;  
  age: number;  
  constructor(name: string, age: number) {  
    this.name = name;  
    this.age = age;  
  }
}  
let employee: Employee = new Employee('Jane', 20);

위 코드 세션의 마지막 줄에서 우리는 Employee 클래스 Employee 의 실례 형식으로 사용합니다.
그 밖에 우리는 또 다른 값을 만들고 있는데, 이를 구조 함수라고 부른다.이것은 new 키워드로 클래스를 만들 때 호출되는 함수입니다.
위의 TypeScript 코드를 ES5 또는 이전 버전으로 컴파일하면 다음과 같은 코드가 생성됩니다.

"use strict";  
var Employee = /** @class (function () {  
    function Employee(name, age) {  
        this.name = name;  
        this.age = age;  
    }  
    return Employee;  
}());  
var employee = new Employee('Jane', 20);

위의 코드에서 구조 함수는 다음 코드입니다.

function Employee(name, age) {  
  this.name = name;  
  this.age = age;  
}

우리가 이렇게 하는 것은 자바스크립트에서 우리가 어떤 버전을 사용하든지 간에 클래스는 함수를 구성하는 문법사탕일 뿐이기 때문이다.TypeScript의 상속 모델은 JavaScript에서만 확장됩니다.기존 JavaScript 코드와 100% 호환되어야 하기 때문에 기존 JavaScript 코드를 사용하여 TypeScript를 사용할 수 있습니다.
TypeScript에서 우리는 typeof 조작부호를 통해 구조 함수의 유형을 얻을 수 있다.이것은 클래스의 구조 함수 유형을 얻기 위해 확장되었기 때문에 JavaScript의 사용법과 다릅니다.다음 코드를 실행하면...

class Employee{  
  name: string;  
  age: number;  
  static companyName: string = 'ABC Company';  
  constructor(name: string, age: number) {  
    this.name = name;  
    this.age = age;  
  }}

let employeeConstructor: typeof Employee = Employee;  
console.log(Employee.companyName);  
console.log(employeeConstructor.companyName);

우리가 두 개의 companyName 문장에 기록된 정적 구성원console.log의 값을 얻었을 때 이것은 의미가 있다.우리가 컴파일한 출력에서 본 바와 같이...

"use strict";  
var Employee = /** @class */ (function () {  
    function Employee(name, age) {  
        this.name = name;  
        this.age = age;  
    }  
    Employee.companyName = 'ABC Company';  
    return Employee;  
}());  
var employeeConstructor = Employee;  
console.log(Employee.companyName);  
console.log(employeeConstructor.companyName);

JavaScript와 TypeScript 클래스는 결국 함수일 뿐입니다.클래스 문법은 자바스크립트의 계승을 더욱 쉽게 사용할 수 있게 한다. 클래스 기반의 계승을 사용하는 것처럼 보이지만, 실제로는 원형 계승 모델 위에 있는 문법 설탕이다. 자바스크립트가 처음 출시된 이래 줄곧 이렇다.
TypeScript는 추상 클래스를 정의하여 계승 과정을 간소화할 수 있습니다. 그 중 일부는 추상 클래스로 이루어지고, 다른 실현은 추상 클래스를 확장하는 하위 클래스에서 이루어집니다.
우리는 또 자류가 실현할 수 있는 추상적인 방법이 있다.추상적인 방법은 서명과 되돌아오는 형식만 있고 세부 사항은 이루어지지 않습니다.
정적 구성원은 클래스의 실례가 아니라 클래스에 속하는 구성원을 정의할 수 있습니다.
마찬가지로 자바스크립트가 탄생한 이래 존재해 온 원형 계승 모델에 대해 유형문법은 결국 문법사탕이라는 것을 알아야 한다.그러나 이제 우리는 그것을 한쪽에 놓을 수 있다. 왜냐하면 우리는 문법사탕을 사용하여 그것을 더욱 쉽게 이해하고 계승할 수 있기 때문이다.