TypeScript-字面量类型和TypeScript-可辨识联合、可辨识联合完整性检查

简介: TypeScript-字面量类型和TypeScript-可辨识联合、可辨识联合完整性检查

字面量概述


字面量就是源代码中一个 固定的值例如数值字面量: 1, 2, 3, ... 例如字符串字面量: 'a', 'abc', ...

  • 在 TS 中我们可以把字面量作为具体的类型来使用:
  • 当使用字面量作为具体类型时, 该类型的取值就必须是该字面量的值
type MyNum = 1;
let value1: MyNum = 1;
let value2: MyNum = 2;

如上的代码在编译器当中 let value2: MyNum = 2; 是报错的,取值就必须是该字面量的值




可辨识联合概述


具有共同的 可辨识特征一个类型别名, 包含了具有共同的 可辨识特征 的类型的 联合

关于什么是共同的可辨识特征如下:

// 正方形
interface Square {
    // 共同的可辨识特征
    kind: "square";
    size: number;
}
// 长方形
interface Rectangle {
    // 共同的可辨识特征
    kind: "rectangle";
    width: number;
    height: number;
}
// 圆圈
interface Circle {
    // 共同的可辨识特征
    kind: "circle";
    radius: number;
}


假如我现在要求如上这三个图形的面积,实现代码分别如下:

// 正方形
interface Square {
    // 共同的可辨识特征
    kind: "square";
    size: number;
}
// 长方形
interface Rectangle {
    // 共同的可辨识特征
    kind: "rectangle";
    width: number;
    height: number;
}
// 圆圈
interface Circle {
    // 共同的可辨识特征
    kind: "circle";
    radius: number;
}
type Shape = (Square | Rectangle | Circle);
function area(s: Shape) {
    switch (s.kind) {
        case "square":
            return s.size * s.size;
        case "rectangle":
            return s.width * s.height;
        case "circle":
            // ** 是ES7中推出的幂运算符
            return Math.PI * s.radius ** 2;
    }
}

如上代码中的 Shape 就是一个 可辨识联合

  • 因为: 它的取值是一个 联合
  • 因为: 这个联合的每一个取值都有一个共同的 可辨识特征




可辨识联合完整性检查


在企业开发中, 如果想对可辨识联合的完整性进行检查, 主要有两种实现方式分别如下


方式一

给函数添加返回值 + 开启 strictNullChecks

如果实现的不完整在编译器当中是会进行报错的:

// 正方形
interface Square {
    // 共同的可辨识特征
    kind: "square";
    size: number;
}
// 长方形
interface Rectangle {
    // 共同的可辨识特征
    kind: "rectangle";
    width: number;
    height: number;
}
// 圆圈
interface Circle {
    // 共同的可辨识特征
    kind: "circle";
    radius: number;
}
type Shape = (Square | Rectangle | Circle);
function area(s: Shape): number {
    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 + never

如果实现的不完整在编译器当中是会进行报错的:

// 正方形
interface Square {
    // 共同的可辨识特征
    kind: "square";
    size: number;
}
// 长方形
interface Rectangle {
    // 共同的可辨识特征
    kind: "rectangle";
    width: number;
    height: number;
}
// 圆圈
interface Circle {
    // 共同的可辨识特征
    kind: "circle";
    radius: number;
}
type Shape = (Square | Rectangle | Circle);
function MyNever(x: never): never {
    throw new Error('可辨识联合处理不完整' + x);
}
function area(s: Shape): number {
    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:
            return MyNever(s)
    }
}


实现完整就不会报错:



最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
6天前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
42 7
|
5天前
|
JavaScript 前端开发
TypeScript内置类型一览(Record<string,any>等等)(下)
TypeScript内置类型一览(Record<string,any>等等)
|
5天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(中)
TypeScript内置类型一览(Record<string,any>等等)
|
5天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(上)
TypeScript内置类型一览(Record<string,any>等等)
|
6天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
6天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
6天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
6天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型
|
6天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型
|
6天前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。