TypeScript类型定义-进阶篇1

简介: TypeScript类型定义-进阶篇

一、类型别名

类型别名用来给一个类型起个新名字。

简单的例子

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

上例中,我们使用 type 创建类型别名。

类型别名常用于联合类型。

二、字符串字面量类型

简单的例子

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错,event 不能为 'dbclick'
// index.ts(7,47): error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.

上例中,我们使用 type 定了一个字符串字面量类型 EventNames,它只能取三种字符串中的一种。

注意,类型别名与字符串字面量类型都是使用 type 进行定义。

三、元组

1、简单的例子

定义一对值分别为 stringnumber 的元组:

let xcatliu: [string, number] = ['Xcat Liu', 25];

当赋值或访问一个已知索引的元素时,会得到正确的类型:

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
xcatliu[0].slice(1);
xcatliu[1].toFixed(2);

也可以只赋值其中一项:

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';

但是当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项。

let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];

错误:

let xcatliu: [string, number] = ['Xcat Liu'];
let xcatliu: [string, number];
xcatliu = ['Xcat Liu'];
xcatliu[1] = 25;

2、越界的元素

当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型:

let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];
xcatliu.push('http://xcatliu.com/');
xcatliu.push(true);
// index.ts(4,14): error TS2345: Argument of type 'boolean' is not assignable to
// parameter of type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.


相关文章
|
JavaScript 前端开发
TypeScript类型定义-进阶篇2
TypeScript类型定义-进阶篇
|
JavaScript 前端开发 安全
带你读《现代TypeScript高级教程》十四、扩展类型定义(1)
带你读《现代TypeScript高级教程》十四、扩展类型定义(1)
|
JavaScript
带你读《现代TypeScript高级教程》十四、扩展类型定义(2)
带你读《现代TypeScript高级教程》十四、扩展类型定义(2)
|
JavaScript API
带你读《现代TypeScript高级教程》十四、扩展类型定义(3)
带你读《现代TypeScript高级教程》十四、扩展类型定义(3)
|
JavaScript 前端开发 安全
《现代Typescript高级教程》扩展类型定义
扩展类型定义 在 TypeScript 中,我们可以通过声明文件(.d.ts 文件)来为现有的 JavaScript 库提供类型定义,或者为现有的类型添加额外的属性和方法。这个过程通常被称为“类型声明扩展”。在这篇文章中,我们将详细探讨如何通过声明文件扩展类型定义。
159 0
|
JavaScript
TypeScript数组类型定义
TypeScript数组类型定义
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
75 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
57 6
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
53 2