迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

TypeScript NonNullable 类型如何工作

作者:迹忆客 最近更新:2022/06/06 浏览次数:

NonNullable 类型是 TypeScript 中的一种实用类型,它创建一个新类型,同时删除所有 null 或未定义的元素。 它允许我们采用现有的类型,并修改它们,使它们更适合某些情况。 让我们看看它是如何工作的。

自定义类型

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

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

Alias 类型

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

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

如果我们给某个东西提供类型 Company,那么我们希望它至少有一个名称和地址,以及一个可选值,这不是必须给出的。 如我们所见,在我们的类型中有一个问号表示该属性是可选的。

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

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 中获取地址或名称,我们将遇到一个我们可以处理的错误。

扩展 Alias 类型

我们可以扩展 Alias 类型,即 如果你想给它添加一个新元素。 例如:

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

type SubCompany = Company & {
    identity: string
}

在上面,SubCompany 将拥有 Company 拥有的所有内容,以及一个称为身份的必需属性。

改为使用接口

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

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

interface SubCompany extends interface {
    identity: string
}

Union 类型

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

type myType = number | string

Literal 类型

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

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

NonNullable 实用程序类型

NonNullable 实用程序类型与其他实用程序类型的工作方式很相似,因为它可以采用现有类型,并根据需要对其进行修改。 例如,假设我们有一个特定的联合类型,它接受 null 和 undefined 作为潜在选项:

type myType = string | number | null | undefined

这个例子在一个例子中效果很好,但是我们的代码的另一部分我们不想接受 nullundefined 。 我们可以为此创建一个新类型,或者我们可以重用 myType,使用 NonNullable

type myType = string | number | null | undefined
type noNulls = NonNullable<myType>

在上面的例子中,noNulls 现在是 string | number 类型。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便