TypeScript 学习笔记 — 类型推断和类型保护(十一)
类型推断
TypeScript 编译器会根据一些简单的规则来推断开发者定义的变量的类型, 当没有标明变量的类型时,编译器会将变量的初始值作为该变量的类型
1.赋值推断
赋值时推断,类型从右像左流动,会根据赋值推断出变量类型,这种是比较常见的,声明时不需要给类型
let str = "zhufeng";
let age = 11;
let boolean = true;
2.返回值推断
自动推断函数返回值类型
function sum(a: string, b: string) {
return a + b;
}
sum("a", "b");
3.函数推断(反向推断)
函数从左到右进行推断(上下文类型):先声明一个函数类型,后把这个类型赋予给一个变量,在赋值一个函数,再看被赋值的函数是否满足,事先声明的函数类型,
上下文类型推断时,会根据参数的位置进行相应的推断,函数的参数多的时候,就会推断失败报错
type Sum = (a: string, b: string) => string; // 函数类型
const sum: Sum = (a, b) => a + b; // 还可以根据函数类型,推导出函数参数和返回值的类型
type ICallback = (x: string, y: string) => void; // 不关心返回值
function fn(cb: ICallback) {
let r = cb("1", "2"); // 调用函数后不会根据返回值来推导,默认采用就是上下文中声明的类型
}
fn((a, b) => {});
4.属性推断
可以通过属性值,推断出属性的类型
let person = {
name: "yyya",
age: 18,
};
let { name, age } = person; // string number
5.类型反推
可以使用 typeof 关键字反推变量类型
let person = {
name: "yyya",
age: 18,
};
type Person = typeof person; // type Person = {name: string; age: number;}
6.索引访问操作符
interface IPerson {
name: string;
age: number;
job: {
address: string;
};
}
type job = IPerson["job"]; // type job = { address: string; }
7.类型映射
interface IPerson {
name: string;
age: number;
}
type MapPerson = { [key in keyof IPerson]: IPerson[key] }; // type MapPerson = {name: string; age: number;}
类型保护
TypeScript 能够在特定的区块中保证变量属于某种确定的类型。可以在此区块中放心的引用此类型的属性,或者调用此类型的方法
通过判断识别所执行的代码块,自动识别变量属性和方法
1.typeof 类型保护
判断基本类型:ts 默认在使用联合类型,针对某一种类型进行处理,对不同的类型进行范围缩小
function double(a: string | number) {
if (typeof a === "string") {
return a + a;
} else {
return a * 2;
}
}
2.instanceof 类型保护
判断一个实例是否属于某个类
class Cat {}
class Dog {}
const getInstance = (clazz: { new (...args: any[]): Cat | Dog }) => {
return new clazz();
};
let r = getInstance(Cat);
if (r instanceof Cat) {
r;
} else {
r;
}
3.in 类型保护
判断一个属性是否属于某个对象
interface Bird {
fly: string;
}
interface Fish {
swim: string;
}
function getType(type: Bird | Fish) {
if ("swim" in type) {
type;
} else {
type;
}
}
4.可辨识联合类型
通过接口中的 kind 作为可辨识类型
interface Bird {
fly: string;
kind: "鸟";
}
interface Fish {
swim: string;
kind: "鱼";
}
function getType(type: Bird | Fish) {
if (type.kind == "鸟") {
type;
} else {
type;
}
}
// 判断一个变量是数组,通过其类型来辨识
function ensureArray<T>(input: T | T[]): T[] {
if (Array.isArray(input)) {
return input;
} else {
return [input];
}
}
5.null 保护
变量判空给默认值的方式实现
function addPrefix(num?: number) {
num = num || 0; // null 保护
return function (prefix: string) {
return prefix + num!.toFixed();
};
}
let r = addPrefix()("$");
6.自定义类型保护
直接调用isBird方法
不确认 返回 true 是 Bird,还是返回 false 是 Bird,因此工具方法中判断类型的方法 全部需要使用 is 语法
function isBird(val: Bird | Fish | (string & { kind: "string" })): val is Bird {
return val.kind == "鸟"; // 必须是boolean
}
function getType(val: Bird | Fish) {
if (isBird(val)) {
// 此时不确认 返回true是Bird,还是返回false是Bird
val;
} else {
val;
}
}
TypeScript 学习笔记 — 类型推断和类型保护(十一)的更多相关文章
- TypeScript 学习笔记 — 函数中的类型(四)
目录 函数的两种声明方式 可选参数 默认参数 剩余参数 函数的重载 this 的类型 对于函数主要关心的是:函数的入参类型 和 函数的返回值类型 函数的两种声明方式 通过 function 关键字来进 ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- TypeScript学习笔记(八):1.5版本之后的模块和命名空间
我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...
随机推荐
- vmware迁移虚拟机
迁移 1.打开"VMware",点击"虚拟机详细信息"可以看到虚拟机的储存路径. 2. 按照储存路径找到虚拟机文件位置,将整个虚拟机文件复制,粘贴到需要转移的路 ...
- 基于Python的性能分析
1.什么是性能分析 字面意思就是对程序的性能,从用户角度出发就是运行的速度,占用的内存. 通过对以上情况的分析,来决定程序的哪部份能被优化.提高程序的速度以及内存的使用效率. 首先我们要弄清楚造成时间 ...
- C#利用win32API创建窗体
效果图 代码实现 1 using System; 2 using System.Runtime.InteropServices; 3 //using System.Windows.Forms; 4 5 ...
- N 年前,为了学习分库分表,我把 Cobar 源码抄了一遍
10 几年前,互联网产业蓬勃发展,相比传统 IT 企业,互联网应用每天会产生海量的数据. 如何存储和分析这些数据成为了当时技术圈的痛点,彼时,分库分表解决方案应运而生. 当时最流行的 Java 技术论 ...
- linux源码编译安装软件原理
目录 一.关于软件包 二.软件编译过程 三.编译安装常用参数 四.源码编译出错的解决思路 五.各种软件安装方法的特点 一.关于软件包 在linux中安装软件是需要安装包的,软件的安装包有各种类型: ...
- 记一次 .NET某企业数字化平台 崩溃分析
一:背景 1. 讲故事 前些天群里有一个朋友说他们软件会偶发崩溃,想分析看看是怎么回事,所幸的是自己会抓dump文件,有了dump就比较好分析了,接下来我们开始吧. 二:WinDbg 分析 1. 程序 ...
- 一个基于 Spring Dubbo 微服务的快速开发脚手架,新手入门必备!
Spring-dubbo-skeleton 这是一个基于 Spring Dubbo 的快速开发脚手架,Github 地址:https://github.com/yxhsea/spring-dubbo- ...
- Vue cli之组件的嵌套
前面显示Home.vue页面组件的内容时,我们是在App.vue通过import导入使用的.这个过程就是组件的嵌套使用.那么我们除了App.vue可以导入其他页面以外,也可以通过在Home.vue中导 ...
- iOS直播助手第一个版本总结
经过1个月的努力,终于完成了直播助手iOS11版本的适配,第一个版本也已经提审,趁着这个空档进行一下总结: 打算后续按照目录进行完善 1.iOS直播采集介绍,直播助手iOS11采集使用的方法 2.iO ...
- 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 ...