為什么要在Typescript中使用接口

Question

誰能告訴我為什么要在Typescript中使用Interface？它們是什么？

接口示例：

interface Person {
    firstName: string;
    lastName: string;
}

class Student {
    fullName: string;
    constructor(public firstName: string, public lastName: string) {
        this.fullName = firstName + " " + lastName;
    }
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let student = new Student("John", "Smith");
console.log(greeter(student));

輸出：您好，約翰·史密斯

沒有接口相同輸出的示例：

class Student {
    fullName: string;
    constructor(firstName: string, lastName: string) {
        this.fullName = firstName + " " + lastName;
    }
}

function greeter(person : Student) {
    return "Hello, " + person.fullName;
}

let student = new Student("John", "Smith");
console.log(greeter(student));

輸出：您好，約翰·史密斯

為什么界面在這種特殊情況下有用？ 我發現很難理解打字稿中接口的使用。 任何詳細的解釋都非常感謝！

Answer 1

JS是一種松散類型的語言。 因此，以下是可能的：

 var a = new Student(); a.fullName = a.firstName + ' ' + a.lastName 

定義接口后，它將知道對象的架構是什么，如果執行該選項，它將給您一個錯誤。

Typescript的整個目標是提供編譯時警告。 僅當您的對象具有預定義的結構時，才能實現此目的。 這也有助於鍵入內容，因為IDE可以為您提供有效的建議。

Answer 2

接口是定義對象文字將具有的屬性的非常好方法。 這與根據策略模式定義合同非常相似，您的對象字面量將通過打字稿來驗證，基於策略模式。 由於未實現Person您的代碼將無法編譯。

Answer 3

接口對於靜態類型檢查很有用。 這意味着，當您開發應用程序時，您的IDE（例如WebStorm或VS Code）可以告訴您您將嘗試訪問未定義的屬性，或者將字符串放入需要數字的變量中。

然后，您可以再次在構建/傳輸時間運行這些檢查。 因此，如果運送此類代碼，則可以告訴它以防止運送錯誤代碼。

例如，在JavaScript中，您可以發貨：

const x = {
  user: {
      name: 'Rajesh',
  },
};
console.log(x.myUser.name);

此代碼將交付並編譯。 但是，如果您嘗試調用它，則該腳本將中斷，並且您的網站將無法正常工作。

如果您將其用作接口，則IDE可能會警告您有關該問題的信息。 而且，如果您將捆綁程序（例如tsc編譯器）配置為不允許出現這些問題，則它甚至都不會讓您發布錯誤的代碼，並且您的網站將繼續運行。

因此，一旦編譯成JavaScript，它並不是完全在技​​術上有用的事情，而是從build /“ devops”的角度來看。 與短絨相同，與測試相同，與文檔相同。 如果您沒有它，那沒關系，您的網站正在運行，但是如果您有任何一個，則您破壞它的可能性較小。