TypeScript 以及为什么你应该为 JS 项目输入类型
🥰开发者喜欢它
🚄但是...为什么会引起这么大的轰动呢?
🤖 语法示例
TypeScript 与 JavaScript 类似,但没有什么特别之处。
我很久以前就听说过 TS,它有很多很棒的故事,讲述它有多么有用,允许 JS 拥有 JavaScript 类型。当时我还没有完全理解“类型万能”的含义。现在,我对代码整洁、最佳实践有了更多的了解,并且开始用 React 开发一些小应用,我觉得代码中如果能加入类型,会更好,于是我决定研究一下……以下是我的发现:
🥰开发者喜欢它
这里有一些关于人们如何开始越来越多地使用 JS 的图表…… 这里有更多关于 JS 的有趣图表:https://2020.stateofjs.com/en-US/technologies/javascript-flavors/ 增加 GitHub 项目中的使用率。https ://octoverse.github.com/
在 StackOverflow 2020 年开发者调查中名列前茅:https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages-loved 像 Airbnb 这样的大公司支持使用 languages,并声称使用它可以显著减少潜在的错误。 来源:https ://twitter.com/swyx/status/1093670844495089664/photo/2
我深入 Reddit 寻找一些关于它的真实言论,结果都是相同的:“一旦开始编写 Typescript,就很难回到 Javascript”。
🚄但是...为什么会引起这么大的轰动呢?
由于有这么多人喜欢它,我决定学习基础知识,这就是我所了解到的它可以提供的内容。
优点:
- JS 的超集,几乎相同的语言,但类型一致。
- 主要优点是严格的类型,您可以对所有内容进行类型化,从变量到函数的参数,甚至是对象的结构,这可以防止提交的代码中大约 15% 的错误。
- 能够尽早发现这些明显但经常发生的错误使得使用类型管理代码变得容易得多。
- 类型使代码管理更容易、更可预测。
- 在 TypeScript 中,我们可以为程序的各个部分定义接口,从而确保它们能够正确交互。这意味着它们之间将拥有清晰的通信契约,从而显著减少 bug 数量。TypeScript 和单元测试将使代码更加稳定、可预测,并降低发布前的 bug 密度。
但是……闪光的不一定都是金子……
一些小缺点:
- 应用类型可能一开始会让你变慢,但从长远来看这样会更好,但你必须习惯它。
- 必須編輯。
- 当然,TypeScript 不会捕获运行时类型错误。这意味着你可以编写通过类型检查的代码,但在执行时会出错。
🤖 语法示例
基本类型 当您声明变量时,您将无法在以后更改类型(即使您没有严格声明其类型),从而使您的代码更可靠: 如果出于任何原因,您需要一个没有特定类型的变量,您可以使用任何: 但是......在文档中,他们建议不要使用它,除非您正在从 JS 迁移到 TS。 将枚举添加到 JS,这是一种为数值集提供更友好名称的方法: 输入函数的参数将允许您快速检测到是否插入了错误的内容 您可以添加将返回的函数类型, 但如果您不这样做,typescript 会为您完成 您可以创建自己的类型,使您不必重复代码。 您还可以输入从 DOM 中选择的内容,从而允许您访问一种输入的所有方法。 还有接口,如果您不想要错误,则应该与对象匹配的合同,以及其他 当然,您可以将 TypeScript 实现到您最喜欢的 JS 框架中,我将向您展示一个 React 项目中的示例,提供上述相同的优点: 类似于 PropTypes,现在您必须在使用它们时将 props 添加为必需的,否则 IDE 会警告您: 当您引入强制性的 prop person 时,它会没事的: 您将能够输入其他东西(几乎所有东西),例如钩子 useState:
就是这样,朋友们,我希望你们喜欢这条关于 TypeScript 的小信息,并考虑在某些项目中应用它。
如果您愿意,可以查看并深入了解一些来源和有趣的视频:
JSConf - Airbnb迁移到 TS 的策略和策略(非常有趣)
https://youtu.be/P-J9Eg7hJwE
输入还是不输入:量化 JavaScript 中可检测的错误
https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/
官方文档 - JS 开发人员 5 分钟掌握 TS:
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
TypeScript 教程系列:
https://www.youtube.com/playlist?list=
PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI 在此视频中,您可以看到如何在 React 中应用 TypeScript:
https://www.youtube.com/watch?v =Z5iWr6Srsj8