TypeScript学习(Never、辨析联合类型、索引签名)

2023-11-09

Never

程序语言的设计确实应该存在一个底部类型的概念,当你在分析代码流的时候,这会是一个理所当然存在的类型。TypeScript 就是这样一种分析代码流的语言,因此它需要一个可靠的,代表永远不会发生的类型。
never 类型是 TypeScript 中的底层类型。它自然被分配的一些例子:

一个从来不会有返回值的函数(如:如果函数内含有 while(true) {});
一个总是会抛出错误的函数(如:function foo() { throw new Error(‘Not Implemented’) },foo 的返回类型是 never);

你也可以将它用做类型注解:但是,never 类型仅能被赋值给另外一个 never:

let foo: never = 123; // Error: number 类型不能赋值给 never 类型

// ok, 作为函数返回类型的 never
let bar: never = (() => {
  throw new Error('Throw my hands in the air like I just dont care');
})();

用例:详细的检查

function foo(x: string | number): boolean {
  if (typeof x === 'string') {
    return true;
  } else if (typeof x === 'number') {
    return false;
  }

  // 如果不是一个 never 类型,这会报错:
  // - 不是所有条件都有返回值 (严格模式下)
  // - 或者检查到无法访问的代码
  // 但是由于 TypeScript 理解 `fail` 函数返回为 `never` 类型
  // 它可以让你调用它,因为你可能会在运行时用它来做安全或者详细的检查。
  return fail('Unexhaustive');
}

function fail(message: string): never {
  throw new Error(message);
}

与 void 的差异(void表示无返回值类型、Never代表无返回的值)

一旦有人告诉你,never 表示一个从来不会优雅的返回的函数时,你可能马上就会想到与此类似的 void,然而实际上,void 表示没有任何类型,never 表示永远不存在的值的类型。

当一个函数返回空值时,它的返回值为 void 类型,但是,当一个函数永不返回时(或者总是抛出错误),它的返回值为 never 类型。void 类型可以被赋值(在 strictNullChecking 为 false 时),但是除了 never 本身以外,其他任何类型不能赋值给 never。

辨析联合类型

当类中含有字面量成员时,我们可以用该类的属性来辨析联合类型。

作为一个例子,考虑 Square 和 Rectangle 的联合类型 Shape。Square 和 Rectangle有共同成员 kind,因此 kind 存在于 Shape 中。

interface Square {
  kind: 'square';
  size: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

type Shape = Square | Rectangle;

如果你使用检查(== 、 === 、!=、!==)或者使用具有判断性的属性(在这里是 kind),TypeScript 将会认为你会使用的对象类型一定是拥有特殊字面量的,并且它会为你自动把类型范围变小:

function area(s: Shape) {
  if (s.kind === 'square') {
    // 现在 TypeScript 知道 s 的类型是 Square
    // 所以你现在能安全使用它
    return s.size * s.size;
  } else {
    // 不是一个 square ?因此 TypeScript 将会推算出 s 一定是 Rectangle
    return s.width * s.height;
  }
}

详细的检查

interface Square {
  kind: 'square';
  size: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

// 有人仅仅是添加了 `Circle` 类型
// 我们可能希望 TypeScript 能在任何被需要的地方抛出错误
interface Circle {
  kind: 'circle';
  radius: number;
}

type Shape = Square | Rectangle | Circle;

一个可能会让你的代码变差的例子:

function area(s: Shape) {
  if (s.kind === 'square') {
    return s.size * s.size;
  } else if (s.kind === 'rectangle') {
    return s.width * s.height;
  }

  // 如果你能让 TypeScript 给你一个错误,这是不是很棒?
}

你可以通过一个简单的向下思想,来确保块中的类型被推断为与 never 类型兼容的类型。例如,你可以添加一个更详细的检查来捕获错误:

function area(s: Shape) {
  if (s.kind === 'square') {
    return s.size * s.size;
  } else if (s.kind === 'rectangle') {
    return s.width * s.height;
  } else {
    // Error: 'Circle' 不能被赋值给 'never'
    const _exhaustiveCheck: never = s;
  }
}

它将强制你添加一种新的条件:

function area(s: Shape) {
  if (s.kind === 'square') {
    return s.size * s.size;
  } else if (s.kind === 'rectangle') {
    return s.width * s.height;
  } else if (s.kind === 'circle') {
    return Math.PI * s.radius ** 2;
  } else {
    // ok
    const _exhaustiveCheck: never = s;
  }
}

Switch

function area(s: Shape) {
  switch (s.kind) {
    case 'square':
      return s.size * s.size;
    case 'rectangle':
      return s.width * s.height;
    case 'circle':
      return Math.PI * s.radius ** 2;
    default:
      const _exhaustiveCheck: never = s;
  }
}

strictNullChecks

如果你使用 strictNullChecks 选项来做详细的检查,你应该返回 _exhaustiveCheck 变量(类型是 never),否则 TypeScript 可能会推断返回值为 undefined:

function area(s: Shape) {
  switch (s.kind) {
    case 'square':
      return s.size * s.size;
    case 'rectangle':
      return s.width * s.height;
    case 'circle':
      return Math.PI * s.radius ** 2;
    default:
      const _exhaustiveCheck: never = s;
      return _exhaustiveCheck;
  }
}

Redux

import { createStore } from 'redux';

type Action =
  | {
      type: 'INCREMENT';
    }
  | {
      type: 'DECREMENT';
    };

/**
 * This is a reducer, a pure function with (state, action) => state signature.
 * It describes how an action transforms the state into the next state.
 *
 * The shape of the state is up to you: it can be a primitive, an array, an object,
 * or even an Immutable.js data structure. The only important part is that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * In this example, we use a `switch` statement and strings, but you can use a helper that
 * follows a different convention (such as function maps) if it makes sense for your
 * project.
 */
function counter(state = 0, action: Action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter);

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.

store.subscribe(() => console.log(store.getState()));

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

索引签名

可以用字符串访问 JavaScript 中的对象(TypeScript 中也一样),用来保存对其他对象的引用。

let foo: any = {};
foo['Hello'] = 'World';
console.log(foo['Hello']); // World

我们在键 Hello 下保存了一个字符串 World,除字符串外,它也可以保存任意的 JavaScript 对象,例如一个类的实例。

class Foo {
  constructor(public message: string) {}
  log() {
    console.log(this.message);
  }
}

let foo: any = {};
foo['Hello'] = new Foo('World');
foo['Hello'].log(); // World

当你传入一个其他对象至索引签名时,JavaScript 会在得到结果之前会先调用 .toString 方法:

let obj = {
  toString() {
    console.log('toString called');
    return 'Hello';
  }
};

let foo: any = {};
foo[obj] = 'World'; // toString called
console.log(foo[obj]); // toString called, World
console.log(foo['Hello']); // World

只要索引位置使用了 obj,toString 方法都将会被调用。

数组有点稍微不同,对于一个 number 类型的索引签名,JavaScript 引擎将会尝试去优化(这取决于它是否是一个真的数组、存储的项目结构是否匹配等)。因此,number 应该被考虑作为一个有效的对象访问器(这与 string 不同),如下例子:

let foo = ['World'];
console.log(foo[0]); // World

TypeScript 索引签名

const obj = {
  toString() {
    return 'Hello';
  }
};

const foo: any = {};

// ERROR: 索引签名必须为 string, number....
foo[obj] = 'World';

// FIX: TypeScript 强制你必须明确这么做:
foo[obj.toString()] = 'World';

强制用户必须明确的写出 toString() 的原因是:在对象上默认执行的 toString 方法是有害的。例如 v8 引擎上总是会返回 [object Object]

const obj = { message: 'Hello' };
let foo: any = {};

// ERROR: 索引签名必须为 string, number....
foo[obj] = 'World';

// 这里实际上就是你存储的地方
console.log(foo['[object Object]']); // World

当然,数字类型是被允许的,这是因为:

需要对数组 / 元组完美的支持;
即使你在上例中使用 number 类型的值来替代 obj,number 类型默认的 toString 方法实现的很友好(不是 [object Object])。

因此,我们有以下结论:

TypeScript 的索引签名必须是 string 或者 number。symbols 也是有效的,TypeScript 支持它。

声明一个索引签名

你也可以指定索引签名

const foo: {
  [index: string]: { message: string };  // 这里的index没有任何意义,你也可以写username 来让你的代码更容易理解
} = {};

// 储存的东西必须符合结构
// ok
foo['a'] = { message: 'some message' };

// Error, 必须包含 `message`
foo['a'] = { messages: 'some message' };

// 读取时,也会有类型检查
// ok
foo['a'].message;

// Error: messages 不存在
foo['a'].messages;

所有成员都必须符合字符串的索引签名

// ok
interface Foo {
  [key: string]: number;
  x: number;
  y: number;
}

// Error
interface Bar {
  [key: string]: number;
  x: number;
  y: string; // Error: y 属性必须为 number 类型
}

这可以给你提供安全性,任何以字符串的访问都能得到相同结果。

interface Foo {
  [key: string]: number;
  x: number;
}

let foo: Foo = {
  x: 1,
  y: 2
};

// 直接
foo['x']; // number

// 间接
const x = 'x';
foo[x]; // number

使用一组有限的字符串字面量

type Index = 'a' | 'b' | 'c';
type FromIndex = { [k in Index]?: number };

const good: FromIndex = { b: 1, c: 2 };

// Error:
// `{ b: 1, c: 2, d: 3 }` 不能分配给 'FromIndex'
// 对象字面量只能指定已知类型,'d' 不存在 'FromIndex' 类型上
const bad: FromIndex = { b: 1, c: 2, d: 3 };

变量的规则一般可以延迟被推断:

type FromSomeIndex<K extends string> = { [key in K]: number };

同时拥有 string 和 number 类型的索引签名

这并不是一个常见的用例,但是 TypeScript 支持它。string 类型的索引签名比 number 类型的索引签名更严格。这是故意设计,它允许你有如下类型:

interface ArrStr {
  [key: string]: string | number; // 必须包括所用成员类型
  [index: number]: string; // 字符串索引类型的子级

  // example
  length: number;
}

设计模式:索引签名的嵌套

interface NestedCSS {
  color?: string; // strictNullChecks=false 时索引签名可为 undefined
  [selector: string]: string | NestedCSS;
}

const example: NestedCSS = {
  color: 'red',
  '.subclass': {
    color: 'blue'
  }
};

尽量不要使用这种把字符串索引签名与有效变量混合使用。如果属性名称中有拼写错误,这个错误不会被捕获到:

const failsSilently: NestedCSS = {
  colour: 'red' // 'colour' 不会被捕捉到错误
};

取而代之,我们把索引签名分离到自己的属性里,如命名为 nest(或者 children、subnodes 等):

interface NestedCSS {
  color?: string;
  nest?: {
    [selector: string]: NestedCSS;
  };
}

const example: NestedCSS = {
  color: 'red',
  nest: {
    '.subclass': {
      color: 'blue'
    }
  }
}

const failsSliently: NestedCSS = {
  colour: 'red'  // TS Error: 未知属性 'colour'
}

索引签名中排除某些属性

有时,你需要把属性合并至索引签名(虽然我们并不建议这么做,你应该使用上文中提到的嵌套索引签名的形式),如下例子:

type FieldState = {
  value: string;
};

type FromState = {
  isValid: boolean; // Error: 不符合索引签名
  [filedName: string]: FieldState;
};

TypeScript 会报错,因为添加的索引签名,并不兼容它原有的类型,使用交叉类型可以解决上述问题:

type FieldState = {
  value: string;
};

type FormState = { isValid: boolean } & { [fieldName: string]: FieldState };

请注意尽管你可以声明它至一个已存在的 TypeScript 类型上,但是你不能创建如下的对象:


type FieldState = {
  value: string;
};

type FormState = { isValid: boolean } & { [fieldName: string]: FieldState };

// 将它用于从某些地方获取的 JavaScript 对象 declare可以向TypeScript域中引入一个变量,在编写代码的时候就能够实现智能提示的功能。
declare const foo: FormState;

const isValidBool = foo.isValid;
const somethingFieldState = foo['something'];

// 使用它来创建一个对象时,将不会工作
const bar: FormState = {
  // 'isValid' 不能赋值给 'FieldState'
  isValid: false
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript学习(Never、辨析联合类型、索引签名) 的相关文章

  • javascript:全局变量泄漏

    每当我向 Firefox 提交插件时 我都会收到一封电子邮件 告诉我我的一些变量正在泄漏到全局范围内 一旦他们告诉我我解决了问题 但在那之前有什么方法 程序 来检查变量是否泄漏到全局范围内 Thanks Both JSLint http w
  • appendChild 错误:无法在层次结构中的指定点插入节点

    There is an error with the function appendChild Node cannot be inserted at the specified point in the hierarchy JS var a
  • Chrome 扩展程序可以相互通信吗?

    我正在编写一个Chrome扩展程序 并且想要实现一个接口或api 以便我将来制作的其他扩展程序可以使用它 最终的效果可能如下 分机 B 呼叫extensionA someMethod someParameters 并向分机A发送一些数据 分
  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs
  • 返回上一页

    我正在使用表格来 评价 页面 此表单将数据 发布 到其他地方的 php 脚本 我只是想在处理表单后显示一个链接 这将使用户返回到上一页 我可以在 php 脚本中使用 javascript 来执行此操作吗 GF 您可以使用链接来调用histo
  • 调用类实例方法 onclick javascript

    我有一个 javascript 文件 其中包含包含方法函数的类 我想知道如何从 onClick 事件调用类实例方法 function MyClass this instanceData Display Me this DisplayData
  • Dialogflow Fulfillment Webhook 调用失败

    I am new to dialogflow fulfillment and I am trying to retrieve news from news API based on user questions I followed doc
  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti
  • Chrome 开发工具命中代码但未命中断点

    我在 chrome 开发工具上启用了断点 并且在一行上有一个断点 我知道 chrome 正在运行 因为我将断点放在具有以下语句的行上 alert why is this not breaking 如果我在本地主机中找到该文件 则断点有效 断
  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • 从 Angular 11 更新到 12 时,MatSelect OverlayDir 现在是私有的。现在如何访问它?

    在 Angular 11 中 node modules angular material select 中有一个变量 Overlay pane containing the options deprecated To be turned i
  • 联合数据类型上的条件数据类型

    假设您有以下类型 type Foo prop1 foo prop2 null type Bar prop1 bar prop2 number type FooOrBar Foo Bar 是否可以使用条件类型重写上述代码 我已经尝试过以下方法
  • Aurelia 中的角度服务?

    我还没有找到详细说明如何从 Angular 1 x 迁移到 Aurelia 的详细文档 到目前为止 我只看到人们详细介绍了 Angular 的概念directive可以在 Aurelia 中使用重制 customElement 好吧 足够简
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • 在 Nodejs 中,如何停止 FOR 循环直到 MongoDB 调用返回

    我正在研究下面的代码片段 我有一个名为 stuObjList 的 JSON 对象数组 我想循环遍历数组以查找具有特定标志集的特定 JSON 对象 然后进行数据库调用以检索更多数据 当然 FOR 循环不会等待数据库调用返回并到达 j leng
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 使用 File API polyfill 读取数据 URL

    我正在尝试使用文件 API 库 https github com mailru FileAPI https github com mailru FileAPI 作为不支持文件 API 的浏览器的后备 以便将文件作为数据 URL 读取并将其传
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • Jquery 以编程方式更改

    文本

    编辑 解决方案是将其添加到个人资料页面而不是性别页面 profile live pageinit function event p pTest text localStorage getItem gender 我在列表视图中有一个带有一些文
  • 区分 NaN 输入和输入类型为“number”的空输入

    我想使用 type number 的表单输入 并且只允许输入数字

随机推荐

  • CenterNet姿势估计decode部分代码解读

    代码链接 https github com xingyizhou CenterNet blob 1085662179604dd4c2667e3159db5445a5f4ac76 src lib models decode py L497 代
  • npm和yarn的区别(包管理工具)

    包管理工具npm和yarn的一些区别 1 官网文档 npm https www npmjs cn yarn https yarn bootcss com 2 npm存在的一些不足 npm install的时候巨慢 特别是新的项目拉下来要等半
  • 留学文书可以彻底被AI取代吗?留学顾问是否会被AI逼到墙角?

    近日 ChatGPT再次 进化 其最新版本ChatGPT 4又掀高潮 其生产者OpenAI 称 ChatGPT 4是最先进的系统 能生产更安全和更有用的回复 和上一代相比 GPT 4拥有了更广的知识面和更强的解决问题能力 在创意 视觉输入和
  • Qt中图像的显示与基本操作

    Qt可显示基本的图像类型 利用QImage QPxmap类可以实现图像的显示 并且利用类中的方法可以实现图像的基本操作 缩放 旋转 1 Qt可显示的图像类型 参考Qt的帮助文档 可支持的类型 即可以直接读取并显示的格式有BMP GIF JP
  • Java Package 访问控制权限 相关

    Java Package 访问控制权限 1 1 关于java的包机制 1 2 带有package的java程序如何执行 1 3 访问控制权限 1 1 关于java的包机制 不同功能的类放到不同的软件包中 查找方便 解决类的重名问题 1 2
  • 实验2熟悉常用的HDFS操作

    1 实验目的 1 理解HDFS在Hadoop体系结构中的角色 2 熟练使用HDFS操作常用的Shell命令 3 熟悉HDFS操作常用的Java API 2 实验平台 1 操作系统 Linux 2 Hadoop版本 2 7 4 3 JDK版本
  • 详解ETL银行数据仓储抽取和加载流程概述

    ETL和ELT ETL是Extract Transfrom Load即抽取 转换 加载三个英文单词首字母的集合 E 抽取 从源系统 Souce 获取数据 T 转换 将源系统获取的数据进行处理加工 比如数据格式转化 数据精度转换 数据清洗 缺
  • python绘制小提琴图_Python:matplotlib 和 Seaborn 之热图、小提琴图和箱线图 (三十四)...

    热图 热图是直方图的二维版本 可以替代散点图 和散点图一样 要绘制的两个数字变量的值位于坐标轴上 和直方图类似 图形区域被划分为网格 并将每个网格的点数加起来 因为没有空间表示长条高度 因此用网格颜色表示计数 你可以通过 Matplotli
  • android module 之间引入出现manifest 冲突

    原因 manifest 文件中属性冲突 例如 原因是导入的库在build gradle中的minSdkVersion与你的应用的minSdkVersion不匹配导致的 app要求应用最小系统版本和库要求系统最小版本不一致 改成 样的就行了
  • 怎么提高团队的代码质量

    1 java代码规范 阿里巴巴IDEA代码规范包 安装和使用的方法 https www jianshu com p 8973b20f2de9 2 编写高质量的单元测试 开发人员能提交测试之前 通过单元测试完成自测 3 保证代码质量要做到持续
  • unity 鼠标点击在2D 物体上 和UI上

    unity 鼠标点击在2D 物体上 和UI上 1 鼠标是否点击在2D 物体上
  • Git的下载与安装教程

    一 Git下载 官网下载地址 Git git scm com 点击 Download for Windows 跳转至详细下载页面 以Windows64位安装版为例 点击 64 bit Git for Windows Setup 即可进行下载
  • 3分钟阿里云服务器网络收发包PPS性能详解

    阿里云服务器ECS网络收发包PPS是什么 云服务器PPS多少合适 网络收发包PPS是指云服务器每秒可以处理的网络数据包数量 单位是PPS即packets per second每秒发包数量 阿里云百科来详细说下阿里云服务器网络收发包PPS性能
  • 【Unity学习笔记】[Unity中文课堂教程] C#中级编程代码

    Unity学习笔记 Unity中文课堂教程 C 中级编程代码 最近想补一补C 基础 Unity官方的C 中级编程教程质量很高 于是开个帖子把跟着敲 记录了部分价讲解和我自己的理解的代码存在这 原课程链接 添加链接描述 https www b
  • s3c2440上的nor flash启动与nand flash启动的区别

    nor flash启动与nand flash启动的区别 1 接口区别 NOR FLASH地址线和数据线分开 来了地址和控制信号 数据就出来 NAND Flash地址线和数据线在一起 需要用程序来控制 才能出数据 通俗的说 就是光给地址不行
  • vue基础之组件化及父子间通信

    基本组件拆分和嵌套 为了不是项目看起来复杂难懂 所以我们采用组件化开发 所有的组件单独放 在需要使用的地方嵌套即可 app vue
  • Vue组件嵌套和组件通信

    一 组件嵌套 组件嵌套 在一个组件中使用另一个组件 div div
  • Lodash中的_.cloneDeep(value) 深拷贝和_.clone(value) 浅拷贝

    Lodash 是一个一致性 模块化 高性能的 JavaScript 实用工具库 cloneDeep value 这个方法类似 clone 除了它会递归拷贝 value 注 也叫深拷贝 参数 value 要深拷贝的值 返回 返回拷贝后的值 例
  • 距离计算方法-聚类

    k 均值聚类算法的性能会受到所选距离计算方法的影响 所以 今天总结了一下有关距离计算的一些总结 如有错误 望大家指正 1 欧式距离是大家最熟悉的了 比如两点之间的距离的计算 可以写成向量的运算形式 工程中用的最多 2 曼哈顿距离 Manha
  • TypeScript学习(Never、辨析联合类型、索引签名)

    Never 程序语言的设计确实应该存在一个底部类型的概念 当你在分析代码流的时候 这会是一个理所当然存在的类型 TypeScript 就是这样一种分析代码流的语言 因此它需要一个可靠的 代表永远不会发生的类型 never 类型是 TypeS