2024年9月1日

TypeScript 初学者教程：从零开始理解 TypeScript 语法

在这个教程中，我们将使用一段面向 Foxglove Studio 的 TypeScript 代码作为例子，逐步学习 TypeScript 的基础语法。无论你是编程新手，还是有其他语言的基础，这个教程都会帮助你掌握 TypeScript 的核心概念。

1. 引入模块与类型

import { Input, Message } from "./types";
  • 导入语句: 通过import关键字从指定的路径（例如"./types"）中导入模块或类型。TypeScript 支持模块化编程，可以在不同文件之间共享代码。Input和Message可能是预定义的类型或接口，用于定义数据的结构。

2. 定义类型

type Output = {  sf_ts: bigint;  pecp_ts: bigint;  get_pecp_system_ts: bigint;  get_pecp_header_ts: bigint;  sf_start_ts: bigint;  sf_sub_pecp_ts: bigint;};

  • 类型别名: type关键字用于定义一个类型别名，这里定义了一个名为Output的对象类型。

  • 属性类型: Output类型有六个属性，每个属性的类型为bigint，表示大整数，用于存储精确的时间戳。

3. 声明常量

export const inputs = [  "/horizon/perception/obstacles",  "/apps/sensor_fusion/fusion",];export const output = "/i";

  • 常量声明: 使用const关键字定义常量，这些变量在定义后不能被修改。

  • 导出常量: export关键字将这些常量导出，使它们可以被其他文件导入和使用。

4. 数组

let horizonTimestamps: bigint[] = []; // 存储历史的 horizon 时间戳
  • 数组声明: bigint[]表示一个bigint类型的数组。使用[]表示该变量是一个数组，数组中的每个元素都是bigint类型。

5. 函数声明

export default function script(  event:    | Input<"/horizon/perception/obstacles">    | Input<"/apps/sensor_fusion/fusion">): Output | undefined {  // 函数体}

  • 函数声明: 使用function关键字定义函数。函数名为script，并且是默认导出(export default)，这意味着它是模块的主要导出对象。

  • 参数类型: event是函数的参数，类型为联合类型(|)，表示event可以是两个类型中的一种。

  • 返回值类型: Output | undefined表示函数要么返回Output类型的对象，要么返回undefined，表示没有返回值。

6. 条件判断

if (event.topic === "/horizon/perception/obstacles") {  // 条件成立时执行的代码}
  • 条件语句: if语句用于条件判断。如果event.topic的值等于指定的字符串，则执行代码块内的内容。

7. 对象与属性访问

const horizonMessage = event.message;if (horizonMessage.header) {  const horizonTimestamp = horizonMessage.header.time_stamp;}

  • 对象解构: 从对象中提取出特定属性并赋值给新的变量。例如horizonMessage是从event.message中提取出来的。

  • 属性访问: 使用.符号访问对象的属性，例如horizonMessage.header。

8. 数组操作

if (horizonTimestamps.length >= 10) {  horizonTimestamps.shift(); // 移除第一个元素}horizonTimestamps.push(horizonTimestamp);

  • 数组方法:

    • push(): 向数组末尾添加一个元素。

    • shift(): 移除数组中的第一个元素。

  • 条件操作: 检查数组长度并根据条件执行相应的数组操作。

9. 过滤与映射

const validHorizonTimestamps = horizonTimestamps.filter(  (ts) => ts < fusionTimestamp);let closestHorizonTimestamp = BigInt(0);if (validHorizonTimestamps.length > 0) {  closestHorizonTimestamp = BigInt(    Math.max(...validHorizonTimestamps.map((ts) => Number(ts)))  );}

  • 数组过滤: filter()方法用于从数组中筛选出符合条件的元素。这里筛选出所有小于fusionTimestamp的时间戳。

  • 数组映射: map()方法用于将数组中的每个元素映射为新值，例如，将bigint类型转换为number类型。

  • 查找最大值: 使用Math.max()找出数组中的最大值，...展开运算符将数组元素展开为独立参数。

10. 返回对象

return {  sf_ts: fusionTimestamp,  pecp_ts: closestHorizonTimestamp,  sf_start_ts: fusionStartTimestamp,  get_pecp_system_ts: fusionGetPecpSystemTimestamp,  get_pecp_header_ts: fusionGetPecpHeaderTimestamp,  sf_sub_pecp_ts: fusionTimestamp - closestHorizonTimestamp,};
  • 对象返回: 函数返回一个对象，包含多个属性。属性的名称和类型必须与定义的Output类型一致。

11. 默认返回值

return undefined;
  • 返回 undefined: 当函数没有要返回的内容时，可以显式地返回undefined。这在逻辑分支中很常见，用于表示没有生成输出。

12. 效果

总结

通过这个例子，我们学习了 TypeScript 中常见的语法结构，包括模块导入、类型定义、数组操作、条件判断、函数声明和对象操作等。TypeScript 结合了 JavaScript 的灵活性和静态类型检查的安全性，非常适合构建大型和复杂的应用程序。掌握这些基本语法，你就可以开始用 TypeScript 编写自己的代码了。