TypeScript_2_typescript类型补充

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量386 收藏
点赞数
分类专栏： ts 文章标签： javascript 前端 开发语言 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mjjhen/article/details/123313087
版权

TypeScript_2_typescript类型补充

目录

TypeScript中的类型补充

函数的参数类型

  • 函数是JavaScript非常重要的组成部分，TypeScript允许我们指定函数的参数和返回值的类型。

  • 参数的类型注解

    • 声明函数时，可以在每个参数后添加类型注解，以声明函数接受的参数类型：

      在这里插入图片描述

函数的返回值类型

  • 我们也可以添加返回值的类型注解，这个注解出现在函数列表的后面：

    在这里插入图片描述

  • 和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推断函数的 返回类型：

    • 某些第三方库处于方便理解，会明确指定返回类型，但是这个看个人喜好；

匿名函数的参数

  • 匿名函数与函数声明会有一些不同：

    • 当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时；

    • 该函数的参数会自动指定类型；

      在这里插入图片描述

  • 我们并没有指定item的类型，但是item是一个string类型：

    • 这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型；
    • 这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型；

对象类型

  • 如果我们希望限定一个函数接受的参数是一个对象，这个时候要如何限定呢？

    • 我们可以使用对象类型；

      在这里插入图片描述

  • 在这里我们使用了一个对象来作为类型：

    • 在对象我们可以添加属性，并且告知TypeScript该属性需要是什么类型；
    • 属性之间可以使用 , 或者 ; 来分割，最后一个分隔符是可选的；
    • 每个属性的类型部分也是可选的，如果不指定，那么就是any类型；

可选类型

  • 对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个?：

    在这里插入图片描述

联合类型

  • TypeScript的类型系统允许我们使用多种运算符，从现有类型中构建新类型。

  • 我们来使用第一种组合类型的方法：联合类型（Union Type）

    • 联合类型是由两个或者多个其他类型组成的类型；
    • 表示可以是这些类型中的任何一个值；
    • 联合类型中的每一个类型被称之为联合成员（union’s members）；

    在这里插入图片描述

使用联合类型

  • 传入给一个联合类型的值是非常简单的：只要保证是联合类型中的某一个类型的值即可

    • 但是我们拿到这个值之后，我们应该如何使用它呢？因为它可能是任何一种类型。

    • 比如我们拿到的值可能是string或者number，我们就不能对其调用string上的一些方法；

  • 那么我们怎么处理这样的问题呢？

    • 我们需要使用缩小（narrow）联合（后续我们还会专门讲解缩小相关的功能）；

    • TypeScript可以根据我们缩小的代码结构，推断出更加具体的类型；

在这里插入图片描述

可选类型补充

  • 其实上，可选类型可以看做是 类型 和 undefined 的联合类型：

在这里插入图片描述

类型别名

  • 在前面，我们通过在类型注解中编写 对象类型 和 联合类型，但是当我们想要多次在其他地方使用时，就要编写多 次。
  • 比如我们可以给对象类型起一个别名：
    在这里插入图片描述
    在这里插入图片描述

类型断言as

  • 有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions）。

    • 比如我们通过 document.getElementById，TypeScript只知道该函数会返回 HTMLElement ，但并不知道它 具体的类型：

      在这里插入图片描述

  • TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本，此规则可防止不可能的强制转换：

在这里插入图片描述
在这里插入图片描述

非空类型断言!

  • 当我们编写下面的代码时，在执行ts的编译阶段会报错：

    • 这是因为传入的message有可能是为undefined的，这个时候是不能执行方法的；

      在这里插入图片描述

  • 但是，我们确定传入的参数是有值的，这个时候我们可以使用非空类型断言：

    • 非空断言使用的是 ! ，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测；

      在这里插入图片描述

可选链的使用

  • 可选链事实上并不是TypeScript独有的特性，它是ES11（ES2020）中增加的特性：

    • 可选链使用可选链操作符 ?.；

    • 它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行；

    • 虽然可选链操作是ECMAScript提出的特性，但是和TypeScript一起使用更版本；
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

??和!!的作用

  • 有时候我们还会看到 !! 和 ?? 操作符，这些都是做什么的呢？

  • !!操作符：

    • 将一个其他类型转换成boolean类型；

    • 类似于Boolean(变量)的方式；

  • ??操作符：

    • 它是ES11增加的新特性；

    • 空值合并操作符（??）是一个逻辑操作符，当操作符的左侧是 null 或者 undefined 时，返回其右侧操作数， 否则返回左侧操作数；

      在这里插入图片描述
      在这里插入图片描述

字面量类型

  • 除了前面我们所讲过的类型之外，也可以使用字面量类型（literal types）：

    在这里插入图片描述

  • 那么这样做有什么意义呢？

    • 默认情况下这么做是没有太大的意义的，但是我们可以将多个类型联合在一起；

      在这里插入图片描述

字面量推理

  • 我们来看下面的代码：

在这里插入图片描述

  • 这是因为我们的对象再进行字面量推理的时候，info其实是一个 {url: string, method: string}，所以我们没办法将 一个 string 赋值给一个 字面量 类型。

在这里插入图片描述
在这里插入图片描述

类型缩小

  • 什么是类型缩小呢？
    • 类型缩小的英文是 Type Narrowing；
    • 我们可以通过类似于 typeof padding === “number” 的判断语句，来改变TypeScript的执行路径；
    • 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小;
    • 而我们编写的 typeof padding === "number 可以称之为 类型保护（type guards）；
  • 常见的类型保护有如下几种：
    • typeof
    • 平等缩小（比如===、!==）
    • instanceof
    • in
    • 等等…
typeof
  • 在TypeScript中，检查返回的值typeof是一种类型保护：应为TypeScript对如何typeof操作不同的值进行编码

在这里插入图片描述

平等缩小
  • 我们可以使用Switchh或者相等的一些运算符来表达相等性（比如===，！，，！=）

在这里插入图片描述

instanceof
  • JavaScript有一个运算符来检查一个值是否是另一个值的实例；

在这里插入图片描述

in

  • JavaScript有一个运算符，用于缺点对象是否具有带名称的属性：in运算符

    • 如果指定的属性在指定的对象或其原型链中，则in运算符返回true

      在这里插入图片描述

TypeScript中的函数类型

  • 在JavaScript开发中，函数是重要的组成部分，并且函数可以作为一等公民（可以作为参数，也可以作为返回值进行传递）。

  • 那么在使用函数的过程中，函数是否也可以有自己的类型呢？

    • 我们可以编写函数类型的表达式（FunctionTypeExpressions），来表示函数类型；

      在这里插入图片描述

TypeScript函数类型解析

  • 在上面的语法中(num1:number,num2:number)=>void，代表的就是一个函数类型：

    • 接收两个参数的函数：num1和num2，并且都是number类型；
    • 并且这个函数是没有返回值的，所以是void；

  • 在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的：

    在这里插入图片描述

参数的可选类型

  • 可以指定某个参数是可选的：

    在这里插入图片描述

  • 这个时候这个参数x依然是有类型的，它是什么类型呢？number|undefined

    在这里插入图片描述

  • 另外可选类型需要在必传参数的后面：

    在这里插入图片描述

默认参数

  • 从ES6开始，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：

    在这里插入图片描述

  • 这个时候y的类型其实是undefined和number类型的联合。

剩余参数.

  • 从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

    在这里插入图片描述

可推导的this类型

  • this是JavaScript中一个比较难以理解和把握的知识点：

    • 我在公众号也有一篇文章专门讲解this：https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA；
    • 因为this在不同的情况下会绑定不同的值，所以对于它的类型就更难把握了；

  • 那么，TypeScript是如何处理this呢？我们先来看一个例子：

    在这里插入图片描述

  • 上面的代码是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：

    • TypeScript认为函数sayHello有一个对应的this的外部对象info，所以在使用时，就会把this当做该对象。

不确定的this类型

  • 但是对于某些情况来说，我们并不知道this到底是什么？

    在这里插入图片描述

  • 这段代码运行会报错的：

    • 这里我们再次强调一下，TypeScript进行类型检测的目的是让我们的代码更加的安全；
    • 所以这里对于sayHello的调用来说，我们虽然将其放到了info中，通过info去调用，this依然是指向info对象的；
    • 但是对于TypeScript编译器来说，这个代码是非常不安全的，因为我们也有可能直接调用函数，或者通过别的对象来调用函数；

指定this的类型

  • 这个时候，通常TypeScript会要求我们明确的指定this的类型：

    在这里插入图片描述

函数的重载

  • 在TypeScript中，如果我们编写了一个add函数，希望可以对字符串和数字类型进行相加，应该如何编写呢？

  • 我们可能会这样来编写，但是其实是错误的：

    在这里插入图片描述

  • 那么这个代码应该如何去编写呢？

    • 在TypeScript中，我们可以去编写不同的重载签名（overloadsignatures）来表示函数可以以不同的方式进行调用；
    • 一般是编写两个或者以上的重载签名，再去编写一个通用的函数以及实现；

sum函数的重载

  • 比如我们对sum函数进行重构：

    • 在我们调用sum的时候，它会根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数的重载签名；

      在这里插入图片描述

  • 但是注意，有实现提的函数，是不能直接被调用的：

    在这里插入图片描述

联合类型和重载

  • 我们现在有一个需求：定义一个函数，可以传入字符串或者数组，获取它们的长度。

  • 这里有两种实现方案：

    • 方案一：使用联合类型来实现；

    • 方案二：实现函数重载来实现；

      在这里插入图片描述
      在这里插入图片描述

  • 在开发中我们选择使用哪一种呢？

    • 在可能的情况下，尽量选择使用联合类型来实现；
MJJH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript 运行时类型检查补充工具
10-14
主要介绍了TypeScript 运行时类型检查补充工具，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
实用程序类型：实用程序类型的集合，补充TypeScript内置的映射类型和别名（对于静态类型，请考虑“ lodash”）
02-06
实用程序类型的集合，补充TypeScript内置的映射类型和别名（对于静态类型，请考虑“ lodash”）。 觉得有用吗？ 需要更多更新吗？ 什么是新的？ :party_popper: 现在已更新以支持TypeScript v3.7 :party_popper...
【TS】如何在 typescript 中合并一个 interface union？
高厉害 0w0
12-17 2193
这玩意利用了 union type 在 conditional type 中的 distributive 的特性，将 union 在第一个 condition 中 map 到多个具有单独类型参数 function，然后再 infer 到函数的参数上，就从 union 变成了 intersection。对上面这个合并的函数来说，我们要求他的参数类型一定是同时满足 union 中所有函数的参数类型的，所以一定是取交。函数中的参数，在上面的例子中，这个函数实际上是将 union 中的两个函数合在了一起。
Typescript的复合类型
Cupido
06-18 407
TS支持符合类型检查 这样可以让对象具备多类型数据结构
TypeScript中的interface、type、class——并非是泰联元名重复
weixin_40918145的博客
03-26 3488
type 和 interface 有什么异同？ 1.interface侧重于描述数据结构，type侧重于描述类型 interface A{ name:string; } type B = 'bb'|'cc' 2.都可以描述一个对象或者函数 interface user { name: string; age: number } interface setUser { (name: string, age: number): void } type hoster = { n
3、Typescript中补充的六个类型
下半夜的风
04-20 659
元组可以看做是数组的拓展，它表示已知元素数量和类型的数组。可以看到，上面我们定义了一个元组 tuple，它包含三个元素，且每个元素的类型是固定的。当我们为 tuple 赋值 时：各个位置上的元素类型都要对应，元素个数也要一致。这里我们给元组 tuple 的索引为 1 即第二个元素赋值为 3，第二个元素类型为 number，我们赋值给 3，所以没有问题。上面的例子中，我们访问的 tuple 的第二个元素的元素类型为 number，而数值没有 split 方法，所以会报错。
通俗易懂TypeScript系列六：模块
long328583644的专栏
06-28 806
从ECMAScript 2015开始，JavaScript引入了模块的概念。 TypeScript也沿用这个概念。模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你使用export导出它们。 相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你可以通过import导入它们1、export导出任何声明（比如变量，函数...
TypeScriptLearn:学习微软出品的typeScript的语法
05-17
不重合的是类型声明 接口的灵活实现 还有一些补充的 关键字/抽象类/函数重载/泛型 写了一些语法demo,供大家研究 如果你是一名在行人员 强烈建议阅读英语，以获取第一手资料 目前本仓库没增加编译工具，仅是研究了...
pd_markerovka2
04-17
目的：根据任务补充应用程序的当前功能。 任务： 设计数据库以存储有关用户，角色，图像验证请求，标记历史记录的信息 在服务器上创建方法以验证图像，存储历史记录和验证请求 实施用户注册和授权
typescript 模块_TypeScript中的模块增强
08-13 1007
typescript 模块Before getting into module augmentation, let’s look at some TypeScript merging principles which will become useful as we progress. 在进行模块扩充之前，让我们看一下一些TypeScript合并原则，这些原则将随着我们的进步而变得有用。 I...
3.0 TypeScript补充（& ，type）
本以为成功很简单，没想到活成普通人都需拼尽全力！
02-03 714
上一篇： TypeScript类型2（object,any,unknown,void,never,enum）https://blog.csdn.net/qq_42543244/article/details/122756084在之前的两篇中，关于类型这块，基本已经完成了，本篇补充点额外的东西； &：同时 // let school: string & number; //错误用法： 这个写法没错误,但是到底有什么值既是string还是number？ let school: { nam
Typescript 中的模块使用
Wang的专栏
08-07 1810
在Typescript中定义一些零散的类 // 工具正则 var lettersRegexp = /^[A-Za-z]+$/; var numberRegexp = /[0-9]+$/; // 定义一个接口 interface StringValidator { isAcceptable(s:string):boolean; } // 定义一种校验器 class LettersOnl...
TypeScript 3.9 正式发布！平均编译时长从 26 秒缩短至 10 秒
Admans的专栏
05-14 1927
作者 | 微软官方博客 译者 | 核子可乐 策划 | 小智 稿源|前端之巅 今天，微软在其官方博客宣布：TypeScript 3.9 版本已经正式发布，详情见下文。 有些朋友可能对 TypeScript 还不太熟悉，这是一种以 JavaScript 为基础开发的语言，新增 type 声明与注释等多种语法。TypeScript 编译器能够使用这些语法对代码进行 type 检查，而后输出能够适配多种不同运行时、且清晰可读的 JavaScript 代码。 由于 TypeScript 具有丰富的...
TypeScript学习（八）：数组的补充及内置对象说明
Kreme的博客
10-25 603
在前面我们提到了有关数组的定义和数组的一些特性，那篇博客只提到了三种定义方式，这里我们再补充两种方式： 第一种：数组泛型 // 语法格式：Array<elemType> let list: Array<number> = [1, 2, 3]; 第二种：类数组 function sum() { let args: { [index: num...
TypeScript模块扩展变成覆盖原模块的解决方案
HermitSun的博客
01-29 4481
之前写过和TS模块机制有关的问题，联想到遇到的一个“奇怪”的问题，在扩展VantUI的类型声明时，曾经遇到这样一个问题，如果这么写，就能正确扩展模块： // src/shims-vant.d.ts import { VanComponent } from 'vant/types/component' declare module 'vant' { export class Calendar ...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 203
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 248
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 762
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
typescript笔记
09-13
TypeScript是一种在JavaScript的基础上进行类型检测和语法补充的编程语言。它被称为强类型语言，可以支持静态和动态类型。 TypeScript相比于JavaScript有许多优点，例如它可以提供更好的代码可读性、可维护性和可靠...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值