在 Typescript 中创建自定义类型

Posted on by

Javascript 是一种弱类型语言，这意味着我们通常不会考虑类型。Typescript是强类型的，这意味着一切都有类型。

有时我们想让一个对象或函数的返回符合某种格式。这是我们使用自定义类型的地方。Typescript 允许我们定义自己的自定义类型，然后我们可以在代码中使用它们。

为什么我们要使用自定义类型？#

假设您有一个始终以某种格式返回数据的函数，并使用 API 来获取该数据。如果 API 以错误的格式返回数据，我们可能不希望格式错误的数据最终出现在我们的代码中可能导致问题的地方。在这种情况下，我们可能会要求函数的返回符合某种类型。因此，我们将定义自己的类型。

别名类型#

如何创建类型的一个示例称为别名类型。我们如何定义类型的示例如下所示：

type Company = {
    name: string,
    address: string,
    value?: number
}

如果我们给某个东西 type Company，那么我们希望它至少有一个name和address，以及一个可选的value，这不是必须给出的。如您所见，在我们的类型中有一个问号表示该属性是可选的。

如果我们要在代码中使用它，我们可能会这样做：

let myFunction = async function(): Promise<Company> {
    let getApi = await fetch('/myApi/data', {
        method: 'GET'
    })
    let getResult:Company = await getApi.json();
    return getResult;
}

在上面的代码中，我们返回了一个Company类型的Promise，如果我们没有得到它，我们会得到一个错误。因此，例如，如果我们尝试运行它并且我们没有从我们的 API 中获取地址或名称，我们将遇到一个我们可以处理的错误。

扩展别名类型#

您可以扩展别名类型，即如果您想向其中添加新元素。例如：

type Company = {
    name: string,
    address: string,
    value?: number
}

type SubCompany = Company & {
    identity: string
}

在上面，SubCompany将拥有Company拥有的所有内容，以及一个名为identity的必需属性。

改为使用接口#

到目前为止，我们所说的一切都在使用type关键字，但我们可以使用关键字来做同样的事情interface。您使用哪一个确实是个人喜好。我们上面的例子看起来像这样interface：

interface Company {
    name: string,
    address: string,
    value?: number
}

interface SubCompany extends interface {
    identity: string
}

联合类型#

我们还可以使用更简单的语法定义自定义类型，称为联合类型。假设我们有一个类型，它可以是字符串或数字，称为myType。我们可以定义该类型，如下所示：

type myType = number | string

文字类型#

这是我们设置类型的地方，该类型具有可以从中选择的特定值列表。假设我们的原始类型Company只能有三个值，red、blue或green。我们可以定义一个文字类型，并将其用作我们的name属性的类型：

type Option = "blue" | "green" | "red" 
type Company = {
    name: Option,
    address: string,
    value?: number
}

推荐阅读：