Class Casting如何在Typescript中工作

Question

我有一個關於Casting in Typescript的問題。

我有一個用例，我將一個對象轉換為一個具有方法的類的特定類型。 當我之后想要調用此方法時，它是未定義的，比較下面的代碼段：

export class Test {
  property1: any;
  property2: any;

  constructor(){}

  sayHello(): string {
    return 'hello';
  }
}


testData = {
    property1: '',
    property2: 2
  } as Test;

testData.sayHello(); <-- undefined

我還在stackblitz的角度應用程序中准備了一個工作或非工作的例子： https ：//stackblitz.com/edit/angular-y3s9r4

任何人都可以解釋這種行為嗎？ 如何inherit方法呢？

Answer 1

在打字稿中，這稱為類型斷言，而不是強制轉換。 不同術語的原因恰恰在於其行為與其他語言不同，即沒有運行時行為。 類型斷言不轉換值並且不執行任何運行時檢查，它們只告訴編譯器您作為開發人員知道某個值將是某種類型。 你如何掌握這些知識並不是編譯器的業務。

所以這段代碼：

testData = {
    property1: '',
    property2: 2
  } as Test;

只是告訴編譯器對象文字是Test類型。 對象文字與您的類具有相同的字段，但它沒有任何方法（因為沒有人將它們放在那里）。

要創建類的實例，必須將new運算符與類構造函數一起使用。 如果要傳入數據，可以使用接受數據的構造函數並將其分配給當前實例：

export class Test {
    property1: any;
    property2: any;

    constructor(data: Partial<Test>) {
        Object.assign(this, data);
    }

    sayHello(): string {
        return 'hello';
    }
}


let testData = new Test({
    property1: '',
    property2: 2
});

testData.sayHello();  //ok 

Answer 2

普通對象和類實例之間存在差異。 讓我用Javascript解釋一下。

當你寫這個：

const x = { id: 0 };

它被翻譯成這個：

const x = { id: 0 };

但是當你寫這個

class Test { 
  id = 0;

  getId() { 
   return this.id; 
 } 
}
const x = new Test();

它轉化為：

function Test() {
  this.id = 0;

  this.getId = () => this.id;
}
const x = new Test();

如您所見，在第一種情況下，沒有任何功能。 在第二種情況下，有。

當你在Typescript中寫這個：

const x: Test = {id: 1};

這只是開發人員的便利，因為變量不是在Javascript中輸入的。 這是你的linter到位並告訴你有錯誤的地方。

Answer 3

Typescript只是一種語法幫助。 它沒有為代碼帶來新功能。 例如，您的類語法將轉換為普通JavaScript。 如果你創建一個像你一樣的對象，它只是沒有別的對象。 通過使用as Test ，IDE將顯示屬性並假裝強制轉換。 但是會發生一個更新的版本，並且沒有任何類屬性被繼承。 它只是IDE支持。 如果您希望testData成為您的類的實例，您必須：

let testData = new Test();
testData.property1 = 'test';

然后你可以使用testData.sayHello()

Answer 4

類型轉換只是讓轉換器認為每個實例都是一個類型。 在任何時候，它都不會為您創建該類的實際實例。

類型轉換本質上是危險的，因為您丟失了編譯時檢查，如果您的實際數據結構不符合您的界面，它可能會在運行時中斷。

類型轉換有一些有效的用例（例如，你有一個來自遠程端點的外部定義良好的JSON，你想要定義它的結構，我經常輸入對接口的響應）。

但是，如果您希望在實例上使用實際方法，則必須創建它們。 您必須使用構造函數並傳入適當的值。