类型推断

TypeScript 编译器会根据一些简单的规则来推断开发者定义的变量的类型,​ 当没有标明变量的类型时,编译器会将变量的初始值作为该变量的类型

1.赋值推断

赋值时推断,类型从右像左流动,会根据赋值推断出变量类型,这种是比较常见的,声明时不需要给类型

  1. let str = "zhufeng";
  2. let age = 11;
  3. let boolean = true;

2.返回值推断

自动推断函数返回值类型

  1. function sum(a: string, b: string) {
  2. return a + b;
  3. }
  4. sum("a", "b");

3.函数推断(反向推断)

函数从左到右进行推断(上下文类型):先声明一个函数类型,后把这个类型赋予给一个变量,在赋值一个函数,再看被赋值的函数是否满足,事先声明的函数类型,

上下文类型推断时,会根据参数的位置进行相应的推断,函数的参数多的时候,就会推断失败报错

  1. type Sum = (a: string, b: string) => string; // 函数类型
  2. const sum: Sum = (a, b) => a + b; // 还可以根据函数类型,推导出函数参数和返回值的类型
  3. type ICallback = (x: string, y: string) => void; // 不关心返回值
  4. function fn(cb: ICallback) {
  5. let r = cb("1", "2"); // 调用函数后不会根据返回值来推导,默认采用就是上下文中声明的类型
  6. }
  7. fn((a, b) => {});

4.属性推断

可以通过属性值,推断出属性的类型

  1. let person = {
  2. name: "yyya",
  3. age: 18,
  4. };
  5. let { name, age } = person; // string number

5.类型反推

可以使用 typeof 关键字反推变量类型

  1. let person = {
  2. name: "yyya",
  3. age: 18,
  4. };
  5. type Person = typeof person; // type Person = {name: string; age: number;}

6.索引访问操作符

  1. interface IPerson {
  2. name: string;
  3. age: number;
  4. job: {
  5. address: string;
  6. };
  7. }
  8. type job = IPerson["job"]; // type job = { address: string; }

7.类型映射

  1. interface IPerson {
  2. name: string;
  3. age: number;
  4. }
  5. type MapPerson = { [key in keyof IPerson]: IPerson[key] }; // type MapPerson = {name: string; age: number;}

类型保护

TypeScript 能够在特定的区块中保证变量属于某种确定的类型。可以在此区块中放心的引用此类型的属性,或者调用此类型的方法

通过判断识别所执行的代码块,自动识别变量属性和方法

1.typeof 类型保护

判断基本类型:ts 默认在使用联合类型,针对某一种类型进行处理,对不同的类型进行范围缩小

  1. function double(a: string | number) {
  2. if (typeof a === "string") {
  3. return a + a;
  4. } else {
  5. return a * 2;
  6. }
  7. }

2.instanceof 类型保护

判断一个实例是否属于某个类

  1. class Cat {}
  2. class Dog {}
  3. const getInstance = (clazz: { new (...args: any[]): Cat | Dog }) => {
  4. return new clazz();
  5. };
  6. let r = getInstance(Cat);
  7. if (r instanceof Cat) {
  8. r;
  9. } else {
  10. r;
  11. }

3.in 类型保护

判断一个属性是否属于某个对象

  1. interface Bird {
  2. fly: string;
  3. }
  4. interface Fish {
  5. swim: string;
  6. }
  7. function getType(type: Bird | Fish) {
  8. if ("swim" in type) {
  9. type;
  10. } else {
  11. type;
  12. }
  13. }

4.可辨识联合类型

通过接口中的 kind 作为可辨识类型

  1. interface Bird {
  2. fly: string;
  3. kind: "鸟";
  4. }
  5. interface Fish {
  6. swim: string;
  7. kind: "鱼";
  8. }
  9. function getType(type: Bird | Fish) {
  10. if (type.kind == "鸟") {
  11. type;
  12. } else {
  13. type;
  14. }
  15. }
  16. // 判断一个变量是数组,通过其类型来辨识
  17. function ensureArray<T>(input: T | T[]): T[] {
  18. if (Array.isArray(input)) {
  19. return input;
  20. } else {
  21. return [input];
  22. }
  23. }

5.null 保护

变量判空给默认值的方式实现

  1. function addPrefix(num?: number) {
  2. num = num || 0; // null 保护
  3. return function (prefix: string) {
  4. return prefix + num!.toFixed();
  5. };
  6. }
  7. let r = addPrefix()("$");

6.自定义类型保护

直接调用isBird方法不确认 返回 true 是 Bird,还是返回 false 是 Bird,因此工具方法中判断类型的方法 全部需要使用 is 语法

  1. function isBird(val: Bird | Fish | (string & { kind: "string" })): val is Bird {
  2. return val.kind == "鸟"; // 必须是boolean
  3. }
  4. function getType(val: Bird | Fish) {
  5. if (isBird(val)) {
  6. // 此时不确认 返回true是Bird,还是返回false是Bird
  7. val;
  8. } else {
  9. val;
  10. }
  11. }

TypeScript 学习笔记 — 类型推断和类型保护(十一)的更多相关文章

  1. TypeScript 学习笔记 — 函数中的类型(四)

    目录 函数的两种声明方式 可选参数 默认参数 剩余参数 函数的重载 this 的类型 对于函数主要关心的是:函数的入参类型 和 函数的返回值类型 函数的两种声明方式 通过 function 关键字来进 ...

  2. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  3. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  9. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  10. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

随机推荐

  1. vmware迁移虚拟机

    迁移 1.打开"VMware",点击"虚拟机详细信息"可以看到虚拟机的储存路径. 2. 按照储存路径找到虚拟机文件位置,将整个虚拟机文件复制,粘贴到需要转移的路 ...

  2. 基于Python的性能分析

    1.什么是性能分析 字面意思就是对程序的性能,从用户角度出发就是运行的速度,占用的内存. 通过对以上情况的分析,来决定程序的哪部份能被优化.提高程序的速度以及内存的使用效率. 首先我们要弄清楚造成时间 ...

  3. C#利用win32API创建窗体

    效果图 代码实现 1 using System; 2 using System.Runtime.InteropServices; 3 //using System.Windows.Forms; 4 5 ...

  4. N 年前,为了学习分库分表,我把 Cobar 源码抄了一遍

    10 几年前,互联网产业蓬勃发展,相比传统 IT 企业,互联网应用每天会产生海量的数据. 如何存储和分析这些数据成为了当时技术圈的痛点,彼时,分库分表解决方案应运而生. 当时最流行的 Java 技术论 ...

  5. linux源码编译安装软件原理

    目录 一.关于软件包 二.软件编译过程 三.编译安装常用参数 四.源码编译出错的解决思路 五.各种软件安装方法的特点 一.关于软件包 ​ 在linux中安装软件是需要安装包的,软件的安装包有各种类型: ...

  6. 记一次 .NET某企业数字化平台 崩溃分析

    一:背景 1. 讲故事 前些天群里有一个朋友说他们软件会偶发崩溃,想分析看看是怎么回事,所幸的是自己会抓dump文件,有了dump就比较好分析了,接下来我们开始吧. 二:WinDbg 分析 1. 程序 ...

  7. 一个基于 Spring Dubbo 微服务的快速开发脚手架,新手入门必备!

    Spring-dubbo-skeleton 这是一个基于 Spring Dubbo 的快速开发脚手架,Github 地址:https://github.com/yxhsea/spring-dubbo- ...

  8. Vue cli之组件的嵌套

    前面显示Home.vue页面组件的内容时,我们是在App.vue通过import导入使用的.这个过程就是组件的嵌套使用.那么我们除了App.vue可以导入其他页面以外,也可以通过在Home.vue中导 ...

  9. iOS直播助手第一个版本总结

    经过1个月的努力,终于完成了直播助手iOS11版本的适配,第一个版本也已经提审,趁着这个空档进行一下总结: 打算后续按照目录进行完善 1.iOS直播采集介绍,直播助手iOS11采集使用的方法 2.iO ...

  10. mkfs.xfs报错 mkfs.xfs: /dev/new/new_box appears to contain an existing filesystem (ext4). mkfs.xfs: Use the -f option to force overwrite.

    在设置逻辑卷文件类型时候报错 mkfs.xfs: /dev/new/new_box appears to contain an existing filesystem (ext4). mkfs.xfs ...