了解 Typescript 中的类型和接口

界面

什么是接口：

• 接口是在 Typescript 中定义对象的形状或结构的一种方式。
• 它主要用于描述对象的蓝图，确保它们遵循特定的结构。

主要特点：

1。用于对象结构

• 定义属性、方法及其类型。

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

2。支持扩展：

• 接口可以扩展其他接口来继承属性。

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

3。类可以实现接口：

• 强制类遵守接口结构。

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

输出：

Admin {
  username: 'user1',
  password: '123',
  email: '',
  street: '3/2 street',
  city: 'hcmc'
}

4。可以声明函数

• 接口可以声明函数签名

interface AddUser{
  (name: string) : void;
}

const user : AddUser = (name) => console.log(`Hello ${name}`);

类型

什么是类型：

• 类型是一种灵活的方式，可以为 Typescript 中的几乎所有内容定义类型别名。
• 它可以描述对象、并集、交集、元组等等。

主要特点：

1。任何类型的别名：

• 可以定义基本类型、对象，甚至并集和交集。

type UserType = {
  id: string,
  name: string
}
type ID = string | number; //Union type

2。支持交叉点类型：

• 将多种类型合并为一种

type UserType = {
  id: string,
  name: string
}

type AddressType = {
  street: string,
  city: string,
}
type UserWithAddress = UserType & AddressType;

3。支持元组：

• 可以为每个元素定义具有特定类型的固定长度数组。

type Coordinates = [number, number];
const point: Coordinates = [10, 20];

4。无法重新打开：

• 与接口不同，您不能重新声明或扩展现有类型。

class AdminType extends UserType {
  // ERROR: 'UserType' only refers to a type, but is being used as a value here.ts(2693)
}

接口和类型之间的主要区别

Aspect	Interface	Type
Usage	Define Object structure	Flexible: can be define objects, unions, intersections, tuples.
Extensibility	Can be extended using extends	Can be combined using & (intersection).
Reopen/Declartion	Can be reopened to add new properties.	Cannot be reopened.
Primitive Type	Cannot represent primitives directly.	Can alias primitive (e.g,.type ID = string);
Union and Typle Support	Not supported.	Fully supported

方面 界面 类型 标题> 用法 定义对象结构 灵活：可以定义对象、并集、交集、元组。 可扩展性 可以使用 extends 进行扩展 可以使用 &（交集）组合。 重新开放/声明 可以重新打开以添加新属性。 无法重新打开。 原始类型 无法直接表示基元。 可以给原语起别名（例如.type ID = string）； 联合和类型支持 不支持。 完全支持 表>

何时使用用户界面与类型

使用接口：

• 描述对象的形状或使用类时。

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

使用类型：

• 定义联合或元组或任何高级类型定义时。

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

组合类型：

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

最佳实践：

1. 使用接口来描述对象，使用类型来描述其他一切。
2. 使用 类型 进行更高级的用例，例如并集或交集。
3. 如果您在引用它的团队中工作，请选择界面以保持一致性

以上是了解 Typescript 中的类型和接口的详细内容。更多信息请关注PHP中文网其他相关文章！