TypeScript - 利用GPT辅助学习-三、文件类型

时间：2025-01-21 20:58:06

TypeScript 是个聪明的小家伙，它通过 .ts 和 .d.ts 两种文件类型让我们编写代码时更加得心应手！让我们一个个捋顺清楚，看看它们之间的“微妙”区别吧！????

1. .ts 文件 — TypeScript 的“主战场”

.ts 文件就是 TypeScript 的本体，里面包含了你写的所有实现代码。你写的函数、类、变量，甚至所有的类型注解都在这里。可以说它是 TypeScript 的灵魂，是我们“战斗”的地方！????

用途：编写程序代码的地方。
  • 你最常用的文件类型——这里写代码！
  • 可以写任何可执行的 TypeScript 代码——函数、类、对象、你想要的一切都在这里！
  • 编译成 JavaScript，跑在浏览器或 Node.js 环境中。????
示例：
// hello.ts — 你开始写的第一行 TypeScript 代码！????

function greet(name: string): string {
  return `Hello, ${name}!`;  // 就这么简单，带着热情！
}

console.log(greet("Alice"));  // 输出: Hello, Alice!

小贴士：

  • 运行 tsc hello.ts 之后，你会发现编译器生成了 hello.js 文件，这个文件就是最终执行的 JavaScript 代码。
  • 你可以通过 node hello.js 来运行它，看看效果如何！????

2. .d.ts 文件 — 类型声明的超级英雄

.d.ts 文件就像是 TypeScript 的“隐形助手”——它不会参与执行，但却能让你的代码在幕后更有条理。它专门用来给你的 JavaScript 提供类型信息，帮助 TypeScript 理解“这个东西应该是什么类型”！????

用途：为 JS 提供类型信息
  • 为外部库（那些没有内置 TypeScript 类型的 JavaScript 库）提供类型定义。????
  • 你可以用它来描述 JavaScript 代码的结构，确保 TypeScript 编译器能够正确识别并提供类型检查。????
  • 不包含实际实现代码，只是类型的“地图”。✨
示例：

假设你在用某个 JavaScript 库，里面有个 greet 函数，但它没有 TypeScript 类型信息。怎么办？没关系，来个 .d.ts 文件吧！

// greet.d.ts — 类型定义开始！

declare function greet(name: string): string;  // 只定义函数签名，没有实现！

这个 .d.ts 文件告诉 TypeScript：“嘿，greet 函数是存在的，而且它接受一个字符串参数并返回一个字符串！”这样 TypeScript 就能通过这个类型信息来为你提供智能提示和类型检查了！✨

3..ts 与 .d.ts 文件的关键区别

特性 .ts 文件 .d.ts 文件
目的 编写 TypeScript 可执行代码，编译成 JavaScript 运行 提供类型声明，告诉 TypeScript 其他代码的结构和类型
内容 包含实现代码（函数、类、逻辑等） 仅包含类型定义，没有实现代码
编译 编译成 .js 文件 不编译成 JavaScript 文件，仅用于类型检查
场景 编写程序的核心逻辑、功能等 为第三方库提供类型定义，或为 JavaScript 代码添加类型定义

4.如何使用 .d.ts 文件

  1. 为第三方库添加类型定义

你在使用一个没有 TypeScript 类型定义的 JavaScript 库时，怎么办？别担心！只需要通过 @types 包来引入它们的类型声明文件！????

举个例子，如果你在用 Lodash（一个 JavaScript 的工具库），并且想用它的类型定义：

npm install @types/lodash

这个命令会安装 Lodash 的类型声明文件，TypeScript 就会知道 Lodash 是怎样工作的，让你享受到类型检查和代码补全的好处！????

手动为 JavaScript 写声明文件

如果你自己有一些 JavaScript 文件，也可以自己写 .d.ts 文件来为它们添加类型信息。比如你写了一个 utils.js 文件，你可以写一个 utils.d.ts 来描述它的类型：

// utils.d.ts

declare function formatDate(date: Date): string;  // 格式化日期的函数
declare function sum(a: number, b: number): number;  // 加法函数


MyButton: typeof MyButton;

这样 TypeScript 就知道了 formatDate 和 sum 函数的类型，不用再怕类型错误了！????

5.总结：TS 里的 .ts 和 .d.ts 文件

  • .ts 文件：你的主战场，里面的代码会被编译为 JavaScript 并运行。它包含了你所有的功能实现，类型注解，甚至你的勇气！????
  • .d.ts 文件：类型声明的超级英雄，它让 TypeScript 知道其他 JavaScript 文件的类型结构，确保你的代码在没有实际实现的情况下也能进行类型检查。????‍♂️

这两种文件的结合，让 TypeScript 能够发挥最大的优势，既保证代码的灵活性，又确保类型安全。记住，.ts 文件用来写逻辑，.d.ts 文件用来给外部代码“写传单”！????

相关文章