在这个教程中，我们将使用一段面向 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 编写自己的代码了。