12.【TypeScript 教程】字面量类型

简介: 12.【TypeScript 教程】字面量类型

TypeScript 字面量类型

本节介绍三种字面量类型,分别是字符串字面量类型、布尔字面量类型和数字字面量类型。

1. 解释

在计算机科学中,字面量(literal)是用于表达源代码中一个固定值的表示法(notation)。


通俗的讲,字面量也可以叫直接量,就是你看见什么,它就是什么。


我们之前介绍字符串类型,其实是一个集合类型,所有的字符串集合在一起构成了 string 类型。而字符串字面量类型就直接多了,你定义为 'mybj',那这个变量的类型就是 'mybj' 类型。

2. 字符串字面量类型

字符串字面量类型允许你指定字符串必须的固定值。

let protagonist: 'Sherlock'
 
protagonist = 'Sherlock'
protagonist = 'Watson' // Error, Type '"Watson"' is not assignable to type '"Sherlock"'

代码解释: 变量 protagonist 被声明为 'Sherlock' 字面量类型,就只能赋值为 'Sherlock'

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'
 
class UIElement {
  animate(dx: number, dy: number, easing: Easing) {
      if (easing === 'ease-in') {}
      else if (easing === 'ease-out') {}
      else if (easing === 'ease-in-out') {}
      else {
          // Error, 不应该传递 null 或 undefined
      }
  }
}
 
let button = new UIElement()
button.animate(0, 0, 'ease-in')
button.animate(0, 0, 'uneasy') // Error, 'uneasy' 不被允许

代码解释:

第 1 行,通过类型别名,声明了类型 Easing'ease-in' | 'ease-out' | 'ease-in-out'

这样三个字符串字面量构成的联合类型。

第 4 行,你只能从三种允许的字符中选择其一来做为参数传递,传入其它值则会产生错误。

字符串字面量类型还可以用于区分函数重载:

function createElement(tagName: 'img'): HTMLImageElement
function createElement(tagName: 'input'): HTMLInputElement
 
function createElement(tagName: string): Element {}

代码解释:

如果参数 tagName 为 'img' 类型,返回值类型为 HTMLImageElement; 如果参数 tagName 为 'input' 类型,返回值类型为 HTMLInputElement

3. 布尔字面量类型

声明布尔字面量类型,注意这里是 : 不是 == 等号是变量赋值,: 表示声明的类型。

let success: true
let fail: false
let value: true | false

接口的返回值,会有正确返回和异常两种情况,这两种情况要有不同的数据返回格式:

type Result = { success: true, code: number, object: object } | { success: false, code: number, errMsg: string }
 
let res: Result = { success: false, code: 90001, errMsg: '该二维码已使用' }
 
if (!res.success) {
  res.errMsg // OK
  res.object // Error, Property 'object' does not exist on type '{ success: false; code: number; errMsg: string; }
}

代码解释:

类型别名 Result 是一个由两个对象组成的联合类型,都有一个共同的 success 属性,这个属性的类型就是布尔字面量类型。因为涉及很多后续才会介绍的知识点,这里看不懂没关系,只需要大概了解这是布尔字面量类型的一种应用即可。

4. 数字字面量类型

TypeScript 还具有数字字面量类型。

比如骰子只有六种点数:

let die: 1 | 2 | 3 | 4 | 5 | 6
 
die = 9 // Errorv

5. 小结

本小节介绍了几种字面量类型,对于之前没有接触过的同学可能是个新的知识点,在类型保护那一节,我们还会再次介绍到字面量类型,以便巩固学习。

目录
相关文章
|
10月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
10月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
10月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
563 82
|
10月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
497 6
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
517 2
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
417 2
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
261 0