在 TypeScript 中定义一个字符串数组
要定义字符串数组,请将数组的类型设置为 string[]
,例如 const arr: string[] = []
。 如果我们尝试将任何其他类型的值添加到数组中,类型检查器将显示错误。
// ✅ Array of strings with inline declaration
const arr: string[] = ['red', 'blue', 'green'];
// ✅ Empty array of strings
const arr2: string[] = [];
// ✅ Using a type
type Colors = string[];
第一个例子展示了如何定义一个内联类型的字符串数组。
如果我们尝试将任何其他类型的值添加到数组中,则会出现错误。
const arr: string[] = ['red', 'blue', 'green'];
// ⛔️ Error: Argument of type 'number' is
// not assignable to parameter of type 'string'.ts(2345)
arr.push(100);
当我们必须将数组初始化为空时,此方法非常有用。 如果你没有显式地键入一个空数组,TypeScript 会假定它的类型是 any[]
。
// 👇️ const arr2: any[]
const arr2 = [];
TypeScript 不知道我们将向数组添加什么类型的值,因此它使用非常广泛的 any
类型。
这意味着我们可以将任何类型的值添加到数组中,但我们不会从类型检查器中获得任何帮助。
我们应该始终明确设置空数组的类型。
const arr: string[] = ['red', 'blue', 'green'];
const arr2: string[] = [];
// ✅ Works
arr2.push('hello');
// ⛔️ Error: Argument of type 'number' is not
// assignable to parameter of type 'string'.ts(2345)
arr2.push(100);
另一方面,如果你用值初始化数组,你可以让 TypeScript 推断它的类型。
// 👇️ const arr: string[]
const arr = ['a', 'b', 'c'];
我们还可以使用类型来定义字符串数组。
type Colors = string[];
const arr3: Colors = ['red', 'blue', 'green'];
如果有一个具有字符串数组属性的对象,我们也可以使用接口。
interface Colorful {
colors: string[];
}
const arr3: Colorful = {
colors: ['red', 'blue', 'green'],
};
在某些情况下,我们可能知道数组将只有 N 个特定类型的元素。 在这种情况下,我么可以使用元组。
// 👇️ const arr: [string, string]
const arr: [string, string] = ['hello', 'world'];
我们在上面声明的 arr 变量是一个包含 2 个字符串的元组。
如果我们需要声明一个只读字符串数组,请使用 Readonly
实用程序类型。
const arr: Readonly<string[]> = ['hello', 'world'];
// ⛔️ Property 'push' does not exist
// on type 'readonly string[]'.ts(2339)
arr.push('test');
我们将 string[]
类型传递给 Readonly
实用程序类型,因此该数组只能读取,但不能更改。
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间:2023/04/14 浏览次数:153 分类:Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。