例子如下：

![](https://img-blog.csdnimg.cn/img_convert/0808dc688c23e426a948b0a10935ab39.png)

和這個知識點相關的 tsc 編譯選項：strictPropertyInitialization

![](https://img-blog.csdnimg.cn/img_convert/6165a41e13075e1fb1a6253d3598af24.png)

strictPropertyInitialization 設定控制是否需要在建構函式中初始化類欄位。
![](https://img-blog.csdnimg.cn/img_convert/7fe2dadd8e4c7bbff5f1aae2e0a10e4a.png)

正確做法：

```typescript
class GoodGreeter {
  name: string;

constructor() {
    this.name = "hello";
  }
}
```

![](https://img-blog.csdnimg.cn/img_convert/ec634cf75904eb6cb73e35362560ec25.png)

請注意，該欄位需要在建構函式本身中進行初始化。 TypeScript 不會分析您從建構函式呼叫的方法來檢測初始化，因為派生類可能會覆蓋這些方法並且無法初始化成員。

class 成員需要在建構函式里進行初始化操作。如果在建構函式里呼叫其他函式，然後在這些其他函式里進行欄位初始化，這樣也不行。

如果一定要這樣做，即您打算透過建構函式以外的方式明確初始化欄位（例如，可能外部庫正在為您填充類的一部分），您可以使用明確賦值斷言運算子，！：

```typescript
class OKGreeter {
  // Not initialized, but no error
  name!: string;
}
```

如果一個 class field 設定為 readonly，這表示它只能在建構函式內被賦值。

![](https://img-blog.csdnimg.cn/img_convert/09d54c16e252e565132e13099c4c40e6.png)

子類建構函式的第一行語句，必須是 super() 函式呼叫;

![](https://img-blog.csdnimg.cn/img_convert/18c4ffd0f949734e6b0357396e54bfb7.png)

## 什麼是 TypeScript class 裡的成員方法

準確定義：A function property on a class is called a method.

除了標準型別註解之外，TypeScript 不會向方法新增任何其他新內容。

需要注意的是，在 TypeScript 方法實現內部，必須用 this. 來訪問其成員變數。

![](https://img-blog.csdnimg.cn/img_convert/4d5fa1e35470223491cabfc080855dbc.png)

下列程式碼裡，m 方法內部，訪問的是 class 外部定義的型別為 number 的 x 變數，而不是 class 內部型別為 string 的變數。

```typescript
let x: number = 0;

class C {
  x: string = "hello";

m() {
    // This is trying to modify 'x' from line 1, not the class property
    x = "world";
Type 'string' is not assignable to type 'number'.Type 'string' is not assignable to type 'number'.
  }
}
```

## class 的訪問其 accessors

```typescript
class C {
  _length = 0;
  get length() {
    return this._length;
  }
  set length(value) {
    this._length = value;
  }
}
```

TypeScript 對訪問器有一些特殊的推理規則：

(1)如果get存在但沒有set，則該屬性自動為只讀
(2)如果沒有指定setter引數的型別，則根據getter的返回型別推斷
(3)Getter 和 setter 必須具有相同的成員可見性

## 關於 TypeScript class 繼承和介面實現的一些坑

重要的是要理解implements 子句只是檢查類是否可以被視為介面型別。 它根本不會改變類的型別或其方法。 一個常見的錯誤來源是假設一個implements 子句會改變類的型別——它不會！

看這個例子：

```typescript
interface Checkable {
  check(name: string): boolean;
}

class NameChecker implements Checkable {
  check(s) {
    // Notice no error here
    return s.toLowerCase() === "ok";
  }
}

const a = new NameChecker();

console.log(a.check('ok'));

```

語法錯誤：
![](https://img-blog.csdnimg.cn/img_convert/da4b38a46e4e4c6267cc7260151a0197.png)

原因是因為第 6 行程式碼裡，我們沒有為 check 方法的引數 s 指明型別，因此其型別預設為 any. 這就和 interface Checkable 裡定義的 check 方法的輸入引數型別 string 不一致了。

解決辦法：

![](https://img-blog.csdnimg.cn/img_convert/0412b7c2324bff6d7872c0df6cb2e20a.png)

同樣，使用可選屬性實現介面不會建立該屬性：

```typescript
interface A {
  x: number;
  y?: number;
}
class C implements A {
  x = 0;
}
const c = new C();
c.y = 10;
```
![](https://img-blog.csdnimg.cn/img_convert/11a16591fbebe698cdf2e123f918d3bb.png)

解決辦法：
![](https://img-blog.csdnimg.cn/img_convert/284f5384b9856474b16143e36a536280.png)

TypeScript 裡的 class field

相關文章