TypeScript 字符串字面量类型

摘要:在本教程中,您将学习 TypeScript 字符串字面量类型,它定义了一种接受指定字符串字面量的类型。

字符串字面量类型允许您定义一种仅接受一个指定字符串字面量的类型。

以下定义了一个接受字面量字符串 'click' 的字符串字面量类型

let click: 'click';Code language: JavaScript (javascript)

click 是一种字符串字面量类型,仅接受字符串字面量 'click'。如果您将字面量字符串 'click' 分配给 click,它将是有效的

click = 'click'; // validCode language: JavaScript (javascript)

但是,当您将另一个字符串字面量分配给 click 时,TypeScript 编译器将发出错误。例如

click = 'dblclick'; // compiler errorCode language: JavaScript (javascript)

错误

Type '"dblclick"' is not assignable to type '"click"'.Code language: JavaScript (javascript)

字符串字面量类型用于限制变量可以存储的可能字符串值。

字符串字面量类型可以很好地与联合类型结合使用,以定义变量的一组有限的字符串字面量值

let mouseEvent: 'click' | 'dblclick' | 'mouseup' | 'mousedown';
mouseEvent = 'click'; // valid
mouseEvent = 'dblclick'; // valid
mouseEvent = 'mouseup'; // valid
mouseEvent = 'mousedown'; // valid
mouseEvent = 'mouseover'; // compiler errorCode language: JavaScript (javascript)

如果您在多个地方使用字符串字面量类型,它们将变得冗长。

为了避免这种情况,您可以使用类型别名。例如

type MyMouseEvent = 'click' | 'dblclick' | 'mouseup' | 'mousedown';
let mouseEvent: MyMouseEvent;
mouseEvent = 'click'; // valid
mouseEvent = 'dblclick'; // valid
mouseEvent = 'mouseup'; // valid
mouseEvent = 'mousedown'; // valid
mouseEvent = 'mouseover'; // compiler error

let anotherEvent: MyMouseEvent;Code language: JavaScript (javascript)

摘要

  • TypeScript 字符串字面量类型定义了一种接受指定字符串字面量的类型。
  • 将字符串字面量类型与联合类型和类型别名一起使用,以定义接受一组有限的字符串字面量的类型。
本教程是否有帮助?