目录：
- 简介
- 素描
- 类型检查
- 功能
- 团队合作
- 经验教训
- 后续步骤
- 资源
介绍
web 开发有时感觉就像编码世界的狂野西部。有如此多的框架和库可供使用，通常会让人感到不知所措。如果你有这种感觉，我来这里是想告诉你，你并不孤单；你也有这种感觉。当我开始学徒期时，我不知道我想在我的技术堆栈中添加什么技术。我知道我喜欢前端开发，但不知道该采取什么途径来提高我在该领域的技能。因此，当你不确定某件事时，我决定做最好的事情：询问有更多经验的人。我咨询了我的导师，他告诉我 typescript 已经迅速成为许多公司开发团队的宝贵资产。我做了更多研究，发现 typescript 非常有吸引力；我是一个注重细节的人，typescript 的粒度提供了一种有趣的、新的编码方式。
我最初的不确定性激发了我写一个小草图。我的困境让我想起了那些你可能在深夜无意中观看过的约会节目，我决定用它作为我的素描的背景。话不多说，我给大家带来：
全栈调情
[播放时髦的介绍音乐]
luke l. host：欢迎回到“全栈调情”！ luke l. host 和另一位开发商一起回来寻找他们的真爱。我们的明星会全力投入制作吗？或者他们会回滚到单身吗？让我们来认识一下我们的程序员。
[程序员输入]
妮可：嗨卢克，很高兴来到这里。
立即学习“Java免费学习笔记（深入）”；
主持人：很高兴有你！现在，你叫什么名字？你希望从这里的小制作中得到什么？
nicole：我是 nicole，我正在尝试决定应该将哪种语言添加到我的永久技术堆栈轮换中。今天我带来了两个追求者； javascript，我的旧情人，typescript，我突然的追求者。
主持人：听起来很辣！为什么我们现在不认识我们的两种语言呢？
[语言输入]
javascript： 大家好。我是 javascript。
typescript：我是 typescript。
主持人：很高兴认识你们两个！好吧，nicole，让我们开始吧。javascript，你已经接触了一段时间了。是什么让您成为 nicole 技术堆栈的最佳选择？
javascript：好吧，卢克，几十年来我一直是网络的支柱。我可靠且灵活，而且我的语法非常容易掌握。另外，我有一个庞大的社区——堆栈溢出对我来说将是你最好的朋友。
主持人：令人印象深刻，但我听说你有一些……包袱？也许是传统品种？
javascript：嘿现在，我已经现代化了！ es6 来了，它让我变得比以往任何时候都更好。
主持人：注意到。现在，typescript，是什么让你脱颖而出？
typescript： 好吧，luke，我继承了 javascript 的所有优点并添加了一些结构。我喜欢 javascript……但更好。我帮助防止错误并使调试变得轻而易举。像 nicole 这样的开发人员应该得到更安全、更可靠的东西。像我这样的人。
主机：安全可靠——程序员耳中的音乐。但有人说你有点……难伺候？
打字稿：一点也不，卢克。一旦你了解了我，我就会发现我非常平易近人。如果 nicole 懂得 javascript，那么向我过渡将是小菜一碟。
主持人：妮可，你已经做出了决定。 javascript 带来了怀旧和简单，但 typescript 提供了我们在爱情和代码中都渴望的安全网。您准备好提交了吗，还是需要更多功能演示？
nicole：我想我需要进行更多测试......
主持人： 好吧，让我们深入探讨真正的细节：代码兼容性！ javascript、typescript，你已经引起了 nicole 的注意，但现在是时候展示你最好的功能了。 javascript，你为什么不启动？
javascript：很高兴！就我而言，我喜欢保持简单。这是我声明变量的方法：
let favoritefood = "sushi"; console.log(favoritefood); // sushi
没有类型，没有多余的装饰——只有纯粹的、未经过滤的代码。休闲又轻松。
主持人：毫不费力，但有些人可能会说有点……太随意了。 typescript，你呢？
打字稿：卢克，我喜欢我的人际关系有一点清晰。看这个：
let favoritefood: string = "sushi"; console.log(favoritefood); // sushi
看到了吗？我确保人们不会对 nicole 使用的数据类型产生混淆。良好的沟通是关键。
nicole： 嗯，我确实喜欢清晰……javascript，如果我尝试这样做会发生什么？
favoritefood = 42; console.log(favoritefood); // 42... wait, what?
javascript：看，我很灵活！谁说 favoritefood 不能是数字？我就是随波逐流。
打字稿：这就是我进来的地方，妮可。在你运行代码之前我就会发现这个错误：
// error: type 'number' is not assignable to type 'string'.
看到了吗？我永远支持你。
主持人：好了，我们来说说功能吧。 javascript，你如何处理它们？
javascript：我喜欢让事情保持开放式。假设 nicole 想编写一个函数来添加两个数字：
const add = (a, b) => {
return a + b;
}
console.log(add(2, 3)); // 5
console.log(add("hello", 3)); // 'hello3'... kind of quirky, huh?
如果妮可在里面塞一根绳子也没什么大不了的——我会让它起作用的！
打字稿：让它发挥作用吗？这不完全是一个可持续的基础。妮可，我相信提前设定期望：
const add = (a: number, b: number): number => {
return a + b;
}
console.log(add(2, 3)); // 5
// error: argument of type 'string' is not assignable to parameter of type 'number'.
对我来说，无需猜测——您的输入和输出一目了然。
nicole：哇，你们两个的做法真的很不同。 javascript，你的适应能力太强了……但是 typescript，你就像一个我不知道自己需要的安全网！
主持人： 听起来我们亲爱的开发者有很多事情需要考虑！让我们继续讨论最后一个问题：您的团队合作方法是什么？您如何在大型、复杂的关系中工作——比如全栈应用程序？
javascript：团队合作？我在混乱的合作中茁壮成长。我可以在任何地方、与任何人融为一体。这是我使用 promise 来处理异步工作：
fetch("https://api.example.com")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
我性格直爽，适应能力强。
typescript：当然，但说实话，javascript——在大团队中你可能会变得有点马虎。我为这种关系带来了结构和责任：
interface ApiResponse {
id: number;
name: string;
}
async function fetchData(): Promise {
const response = await fetch("https://api.example.com");
const data: ApiResponse = await response.json();
return data;
}
看到了吗？我确保每个人都清楚地知道会发生什么；没有惊喜，没有不必要的戏剧。
主持人：妮可，你已经忙完了这两个人。您想要 javascript 的冒险精神还是 typescript 的可靠结构？我想我们会把这个决定留给你——直到下次全栈调情！
[播放时髦的片尾音乐]
通过我的探索，我学到了一些关于 typescript 的重要课程，我认为这些课程可以帮助其他人加快学习速度：
- 从 javascript 基础开始：首先了解 javascript 可以让过渡到 typescript 变得更加容易。
- typescript 是对 javascript 的补充，而不是取代：将 typescript 视为 web 开发工具箱中的另一个工具。
- 牢记可扩展性：在处理大型项目或团队中时，typescript 的结构通过防止小问题而脱颖而出 避免成为大问题。
正如本草图结尾所证明的那样，我自己仍然不确定是否会使用 typescript 还是 javascript 作为我的主要编码语言；两者都有各自的优点和缺点。我想说的是，我对 typescript 的兴趣很有趣。我将通过构建一个小型项目来继续学习 typescript，以便习惯应用其独特功能。在创建这个项目时，我将尝试实现我已经熟悉的技术，例如 vite 或 react。我还计划更深入地研究 next.js 文档并学习如何最好地利用它。
如果您想自己学习 typescript，这里有一些可能对您有用的资源：
- 在 freecodecamp 上学习 typescript 指南
- 通过 mosh 编程为初学者提供 typescript
- next.js 文档
- 掌握 next.js 作者：lee robinson
