Typescript：界面

在本文中，您将了解什么是接口以及如何使用它们，以及类型和接口之间的区别。本文将帮助您对接口有一个基本的了解。

这将是一系列完整的打字稿，您将从字符串、布尔值等基本主题学习到类型别名、枚举、接口、泛型等更复杂的主题。

界面

接口声明是命名对象类型的另一种方式。你可以使用以下interface关键字来创建它：

interface User {
    name: string,
    age: number,
}

// ✅ CORRECT
let newUser : User = {name: "John", age: 28};
// ❌ ERROR: property 'age' is missing
let newUser : User = {name: "John"};
// ❌ ERROR: missing the following properties from type 'User': name, age 
let newUser : User = {};

您还可以使用readonly可选方法interface：

interface User {
    readonly id: number     // readonly variable
    name: string,
    age: number,
    specialKey? : string,   // optional 
}

您还可以将函数传递给 interface，有两种方法可以做到这一点：

// Method-1
interface User {
    getDiscount(coupon: string): number     
}

// For Both you need to call this like this:
const newUser: User = {
    getDiscount: (coupon: "KIJ298DD9J") => {
        return 10;
    }
}

// Method-2
interface User {
    getDiscount: (coupon: string) => number
}

// 👉 You see I have changed the 'coupon' to 'couponName'
// You don't need to match the name of the parameter here
// It will take care of it
const newUser: User = {
    getDiscount: (couponName: "KIJ298DD9J") => {
        return 10;
    }
}

在方法 1中，您可以简单地使用()来表示它的功能如下：getDiscount(): number和字符串是返回类型，并且它不需要任何参数。

在方法 2中，我们使用类似这样的箭头函数getDiscount: () => number。

接口与类型

类型别名和接口非常相似，在很多情况下，您可以自由选择。几乎所有类型的功能都可以interface在中使用。type关键区别在于，类型无法重新打开以添加新属性，而接口始终可扩展。

让我们通过几个例子来区分它们：

添加新字段

您interface可以向现有接口添加新字段，但不能向现有类型添加新字段。这将引发错误。

界面

interface User {
    id: string;    
    email: string;
}

interface User {
    name: string;
}

// Now you can add all the three values to the User interface
const user: User = {
    id: "2323232",
    email: "foo@email.com",
    name: "Foo";
}

类型

type User = {
    id: string;
}

type User = {
    email: string;
}

// ❌ ERROR: Duplicate identifier "User"

在中，interface您可以添加新字段并根据需要进行更改，但在中则type无法执行此操作。一旦type创建，就无法更改。

扩展

扩展已经定义interface或type两者都有不同的方法。interface使用extends关键字，而type使用交集。

界面

interface Car {
    model: string;
    color: string;
}

// 👇 You can extend an interface using 'extends' keywords
interface Tesla extends Car {
  autoPilotModelName: string;
};

// ✅ Use Case
const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

类型

type Car = {
    model: string;
    color: string;
}
// 👇 In type you need to use Intersection
type Tesla = Car & {
  autoPilotModelName: string;
};

const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

联盟

在中interface你不能创建联合类型，但是如果你使用，你可以这样做type。让我们举个例子：

界面

interface User  {
    email: string;
}

interface Admin  {
    email: string;
    adminKey: string;
}

// ❌ ERROR: '{' expected.
interface Person = User | Admin;

// ✅ CORRECT: you can create union type like this
type Person = User | Admin;

// ✅ CORRECT: However you can use union type inside the interface
interface Person {
    person: User | Admin;
}

类型

type User = {
    email: string;
}

type Admin = {
    email: string;
    adminKey: string;
}

// ✅ You can do that.
type Person = User | Admin;

在上面的例子中，你可能注意到，当我尝试将联合类型赋值给接口（interface Person = User | Admin）时，它抛出了错误。这是因为你无法将任何内容赋值给interface。它的减速语法与类似class。但两者的工作方式不同。

class MyClass {}

interface Hello {}

总结

在本文中，我解释了什么是以及如何使用它，以及和interface之间的区别。本文将帮助您对该接口有一个基本的了解。typeinterface

这是一系列 TypeScript 课程，旨在帮助您从零开始学习 TypeScript。如果您喜欢这篇文章，别忘了点赞 ❤️ 并收藏 🏷️ 以便以后使用。如果您有任何问题或反馈，请随时在下面的评论区留言。我们下期再见。

与我联系

文章来源：https://dev.to/j471n/typescript-interface-3748

Typescript：界面

Typescript：界面

目录

界面

接口与类型

添加新字段

扩展

联盟

总结