TypeScript数组类型

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

TypeScript数组类型概述

数组用于保存一组数据，例如一组用户名、一组成绩、一组商品价格或一组状态值。在 JavaScript 中，数组比较灵活，同一个数组中可以同时保存字符串、数字、布尔值等不同类型的数据。这种写法虽然自由，但也容易让数组中的数据含义变得混乱。例如，一个名为 usernames 的数组本来应该保存用户名，如果其中混入数字或布尔值，后续代码在遍历或处理数据时就可能出现问题。

TypeScript 可以通过数组类型明确规定数组中元素的类型。最常见的写法是 类型[]，例如 string[] 表示字符串数组，number[] 表示数字数组，boolean[] 表示布尔数组。数组一旦被标注为某种类型，数组中的每一项都应该符合该类型要求。比如 string[] 中只能保存字符串，number[] 中只能保存数字，boolean[] 中只能保存 true 或 false。

数组类型不仅会检查初始化时的数据，也会检查后续通过数组方法添加的数据。例如，一个字符串数组可以继续添加字符串，但不能通过 push 方法添加数字。一个数字数组可以添加整数或小数，但不能添加字符串。这种检查可以减少错误数据进入数组，使数组的用途更加明确。

除了 类型[] 写法，TypeScript 还支持 Array<类型> 写法。例如，string[] 和 Array<string> 都表示字符串数组，number[] 和 Array<number> 都表示数字数组。两种写法含义相同。对于初学者来说，优先掌握 类型[] 写法即可，因为这种写法更简洁，也更常见。后续学习泛型时，再理解 Array<类型> 会更加自然。

数组类型还可以提升编辑器的代码提示能力。当 TypeScript 知道某个数组是字符串数组时，遍历数组时就能推断出每一项都是字符串，因此可以提示字符串相关的方法。当 TypeScript 知道某个数组是数字数组时，遍历数组时就能推断出每一项都是数字，因此可以直接进行数字运算。也就是说，数组类型不仅用于限制错误数据，还能让后续代码编写更加清晰。

在实际开发中，只要一个变量用于保存一组同类数据，就适合使用数组类型。例如，一组用户名可以使用 string[]，一组成绩可以使用 number[]，一组是否完成的状态可以使用 boolean[]。掌握数组类型后，后续学习 Vue3 中的列表渲染、商品列表、用户列表、表格数据和接口返回数组时，就能更容易看懂数据结构和类型标注之间的关系。

案例源码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TypeScript 数组类型</title>
</head>
<body>
  <h1>TypeScript 数组类型</h1>

  <p>
    本节学习 TypeScript 中数组类型的基本写法。
    数组用于保存一组数据，例如一组用户名、一组成绩、一组商品价格等。
  </p>

  <p>
    在 JavaScript 中，数组可以同时保存多种类型的数据。
    在 TypeScript 中，可以明确规定数组中元素的类型，
    从而减少错误数据进入数组。
  </p>

  <p>
    说明：本节中的代码是 TypeScript 代码，浏览器不能直接运行。
    当前阶段建议使用 TypeScript 官方在线工具
    <a href="https://www.typescriptlang.org/play/" target="_blank">TypeScript Playground</a>
    测试代码。
  </p>

  <hr>

  <h2>一、为什么需要数组类型</h2>

  <p>
    在 JavaScript 中，数组非常灵活。
    一个数组中可以同时保存字符串、数字、布尔值等不同类型的数据。
  </p>

  <pre><code>let list = ["jack", 18, true];</code></pre>

  <p>
    上面的代码在 JavaScript 中可以运行。
    但是，如果一个数组原本只想保存用户名，
    却不小心放入了数字或布尔值，后续代码就可能出错。
  </p>

  <pre><code>let usernames = ["jack", "lucy", 100];</code></pre>

  <p>
    这个数组从名字上看，应该保存用户名。
    但是数组中出现了数字 <code>100</code>，
    这就不符合数据本来的含义。
  </p>

  <p>
    TypeScript 可以通过数组类型限制数组中的元素类型。
  </p>

  <pre><code>let usernames: string[] = ["jack", "lucy", "tom"];

usernames.push("rose"); // 正确
usernames.push(100);    // 错误：usernames 只能保存字符串</code></pre>

  <p>
    这就是数组类型的作用：
    <strong>规定数组中只能保存指定类型的数据。</strong>
  </p>

  <hr>

  <h2>二、数组类型的基本写法</h2>

  <p>
    TypeScript 中，数组类型最常用的写法是：
  </p>

  <pre><code>类型[]</code></pre>

  <p>
    例如：
  </p>

  <pre><code>let usernames: string[] = ["jack", "lucy", "tom"];
let scores: number[] = [90, 85, 100];
let flags: boolean[] = [true, false, true];</code></pre>

  <p>
    上面三行代码分别表示：
  </p>

  <ol>
    <li><code>string[]</code> 表示字符串数组，数组中只能保存字符串。</li>
    <li><code>number[]</code> 表示数字数组，数组中只能保存数字。</li>
    <li><code>boolean[]</code> 表示布尔数组，数组中只能保存 <code>true</code> 或 <code>false</code>。</li>
  </ol>

  <p>
    可以这样理解：
  </p>

  <pre><code>let usernames: string[] = ["jack", "lucy"];</code></pre>

  <p>
    其中：
  </p>

  <ol>
    <li><code>usernames</code> 是变量名。</li>
    <li><code>string[]</code> 表示这是一个字符串数组。</li>
    <li><code>["jack", "lucy"]</code> 是数组中的具体数据。</li>
  </ol>

  <hr>

  <h2>三、字符串数组 string[]</h2>

  <p>
    如果数组中保存的是一组字符串，可以使用 <code>string[]</code>。
  </p>

  <pre><code>let names: string[] = ["张三", "李四", "王五"];

names.push("赵六"); // 正确

names.push(100);    // 错误：不能把数字放入字符串数组
names.push(true);   // 错误：不能把布尔值放入字符串数组</code></pre>

  <p>
    <code>string[]</code> 表示数组中的每一项都应该是字符串。
  </p>

  <p>
    常见的字符串数组包括：
  </p>

  <ol>
    <li>用户名列表。</li>
    <li>城市名称列表。</li>
    <li>商品分类名称列表。</li>
    <li>提示信息列表。</li>
  </ol>

  <pre><code>let cities: string[] = ["北京", "上海", "广州", "深圳"];
let categories: string[] = ["手机", "电脑", "图书"];</code></pre>

  <hr>

  <h2>四、数字数组 number[]</h2>

  <p>
    如果数组中保存的是一组数字，可以使用 <code>number[]</code>。
  </p>

  <pre><code>let scores: number[] = [90, 85, 100];

scores.push(95);    // 正确
scores.push(88.5);  // 正确

scores.push("优秀"); // 错误：不能把字符串放入数字数组</code></pre>

  <p>
    <code>number[]</code> 表示数组中的每一项都应该是数字。
    整数和小数都属于 <code>number</code>。
  </p>

  <p>
    常见的数字数组包括：
  </p>

  <ol>
    <li>成绩列表。</li>
    <li>价格列表。</li>
    <li>库存数量列表。</li>
    <li>编号列表。</li>
  </ol>

  <pre><code>let prices: number[] = [99.8, 199, 299.5];
let ids: number[] = [101, 102, 103];</code></pre>

  <hr>

  <h2>五、布尔数组 boolean[]</h2>

  <p>
    如果数组中保存的是一组布尔值，可以使用 <code>boolean[]</code>。
  </p>

  <pre><code>let checkedList: boolean[] = [true, false, true];

checkedList.push(false); // 正确

checkedList.push("yes"); // 错误：不能把字符串放入布尔数组
checkedList.push(1);     // 错误：不能把数字放入布尔数组</code></pre>

  <p>
    <code>boolean[]</code> 表示数组中的每一项都应该是布尔值。
    布尔值通常用于表示是否选中、是否完成、是否登录等状态。
  </p>

  <pre><code>let finishedList: boolean[] = [true, true, false];
let visibleList: boolean[] = [false, true, true];</code></pre>

  <hr>

  <h2>六、Array&lt;类型&gt; 写法</h2>

  <p>
    除了 <code>类型[]</code> 写法，TypeScript 还提供了另一种数组类型写法：
  </p>

  <pre><code>Array&lt;类型&gt;</code></pre>

  <p>
    例如：
  </p>

  <pre><code>let names: Array&lt;string&gt; = ["张三", "李四"];
let scores: Array&lt;number&gt; = [90, 80, 100];
let flags: Array&lt;boolean&gt; = [true, false];</code></pre>

  <p>
    这两种写法含义相同。
  </p>

  <pre><code>let names1: string[] = ["张三", "李四"];
let names2: Array&lt;string&gt; = ["张三", "李四"];</code></pre>

  <p>
    对初学者来说，建议优先掌握 <code>类型[]</code> 写法。
    这种写法更简洁，也更常见。
  </p>

  <hr>

  <h2>七、数组元素类型必须一致</h2>

  <p>
    如果一个数组被标注为 <code>string[]</code>，
    那么数组中的元素就应该全部是字符串。
  </p>

  <pre><code>let names: string[] = ["张三", "李四", "王五"];</code></pre>

  <p>
    下面这种写法是错误的：
  </p>

  <pre><code>let names: string[] = ["张三", "李四", 100];</code></pre>

  <p>
    错误原因：
    <code>names</code> 被标注为字符串数组，
    但是数组中出现了数字 <code>100</code>。
  </p>

  <p>
    如果一个数组被标注为 <code>number[]</code>，
    那么数组中的元素就应该全部是数字。
  </p>

  <pre><code>let scores: number[] = [90, 85, 100];</code></pre>

  <p>
    下面这种写法是错误的：
  </p>

  <pre><code>let scores: number[] = [90, 85, "100"];</code></pre>

  <p>
    错误原因：
    <code>"100"</code> 带引号，是字符串，不是数字。
  </p>

  <hr>

  <h2>八、数组方法中的类型检查</h2>

  <p>
    TypeScript 不仅会检查数组初始化时的数据类型，
    也会检查后续通过数组方法添加的数据类型。
  </p>

  <pre><code>let names: string[] = ["张三", "李四"];

names.push("王五"); // 正确
names.push(100);    // 错误：不能向字符串数组中添加数字</code></pre>

  <p>
    再看数字数组：
  </p>

  <pre><code>let scores: number[] = [90, 85];

scores.push(100);   // 正确
scores.push("优秀"); // 错误：不能向数字数组中添加字符串</code></pre>

  <p>
    这说明：
    只要数组类型已经确定，后续操作数组时也必须遵守这个类型。
  </p>

  <hr>

  <h2>九、数组遍历中的类型提示</h2>

  <p>
    使用数组类型后，遍历数组时，TypeScript 可以知道每个元素的类型。
  </p>

  <pre><code>let names: string[] = ["张三", "李四", "王五"];

names.forEach(function (name) {
  console.log(name.toUpperCase());
});</code></pre>

  <p>
    在这段代码中，TypeScript 知道 <code>name</code> 是字符串。
    因此，编辑器可以提示字符串相关的方法。
  </p>

  <p>
    数字数组也是一样：
  </p>

  <pre><code>let scores: number[] = [90, 85, 100];

scores.forEach(function (score) {
  console.log(score + 10);
});</code></pre>

  <p>
    在这段代码中，TypeScript 知道 <code>score</code> 是数字。
    因此，可以直接进行数字运算。
  </p>

  <p>
    这就是数组类型带来的好处：
    <strong>不仅能限制错误数据，也能让编辑器提供更准确的代码提示。</strong>
  </p>

  <hr>

  <h2>十、什么时候使用数组类型</h2>

  <p>
    当一个变量用于保存一组同类数据时，就适合使用数组类型。
  </p>

  <p>
    例如，保存一组用户名：
  </p>

  <pre><code>let usernames: string[] = ["jack", "lucy", "tom"];</code></pre>

  <p>
    保存一组成绩：
  </p>

  <pre><code>let scores: number[] = [90, 85, 100];</code></pre>

  <p>
    保存一组是否完成的状态：
  </p>

  <pre><code>let finishedList: boolean[] = [true, false, true];</code></pre>

  <p>
    当前阶段可以先记住：
  </p>

  <ol>
    <li>一组字符串，使用 <code>string[]</code>。</li>
    <li>一组数字，使用 <code>number[]</code>。</li>
    <li>一组布尔值，使用 <code>boolean[]</code>。</li>
    <li>初学阶段优先使用 <code>类型[]</code> 写法。</li>
  </ol>

  <hr>

  <h2>十一、完整小示例</h2>

  <p>
    下面通过一个简单的学生成绩案例，综合演示数组类型。
  </p>

  <pre><code>// 学生姓名列表：字符串数组
let studentNames: string[] = ["张三", "李四", "王五"];

// 学生成绩列表：数字数组
let scores: number[] = [90, 85, 100];

// 是否通过考试：布尔数组
let passedList: boolean[] = [true, true, true];

// 向字符串数组中添加数据
studentNames.push("赵六");

// 向数字数组中添加数据
scores.push(95);

// 向布尔数组中添加数据
passedList.push(false);

// 遍历学生姓名
studentNames.forEach(function (name) {
  console.log("学生姓名：" + name);
});

// 遍历学生成绩
scores.forEach(function (score) {
  console.log("学生成绩：" + score);
});

// 遍历是否通过考试
passedList.forEach(function (passed) {
  console.log("是否通过：" + passed);
});

// 错误示例
// studentNames.push(100);
// scores.push("优秀");
// passedList.push("是");</code></pre>

  <p>
    这个案例中：
  </p>

  <ol>
    <li><code>studentNames</code> 是字符串数组，只能保存学生姓名。</li>
    <li><code>scores</code> 是数字数组，只能保存成绩。</li>
    <li><code>passedList</code> 是布尔数组，只能保存是否通过的状态。</li>
  </ol>

  <p>
    数组类型可以让每个数组的用途更清晰，
    也可以避免错误类型的数据被添加到数组中。
  </p>

  <hr>

  <h2>十二、本节总结</h2>

  <p>
    本节学习了 TypeScript 数组类型。
  </p>

  <ol>
    <li>数组用于保存一组数据。</li>
    <li>TypeScript 可以规定数组中元素的类型。</li>
    <li><code>string[]</code> 表示字符串数组。</li>
    <li><code>number[]</code> 表示数字数组。</li>
    <li><code>boolean[]</code> 表示布尔数组。</li>
    <li><code>Array&lt;类型&gt;</code> 是另一种数组类型写法。</li>
    <li>初学阶段建议优先使用 <code>类型[]</code> 写法。</li>
    <li>数组初始化时，元素类型应保持一致。</li>
    <li>使用 <code>push</code> 等方法添加元素时，也要保持类型一致。</li>
    <li>数组类型可以帮助编辑器提供更准确的代码提示。</li>
  </ol>

</body>
</html>