typescript 封装方法-【第1779期】使用TypeScript两年了,值得吗?

前言

并不是所有人都有机会开发小型应用程序,但这并不妨碍学习。 今天晨读文章由360@陈方旭翻译授权分享。

@陈方旭,前端开发工程师,来自360集团最大的后端团队——七舞团。

正文从这里开始~~

大约两年前,我在一个初创团队中启动了一个全新的项目。 使用的都是流行的东西,比如微服务、docker、react、redux。

我在后端技术方面也获得了一些类似的经验,因为一年前我带着20+后端开发人员编译了一个特别大的react应用程序。 这对我来说尤其具有挑战性。 当时我们遇到了很多问题:模型凝聚力的问题、库的衰落、API复杂且难以维护、接口不一致、运行时异常难以跟踪等。

在开始一个新项目之前,我决定找到一种方法来解决此类问题。 我想也许我们遇到的问题是语言本身有点过于灵活和困难造成的。 对您可以输入的内容几乎没有任何限制,再加上没有编译阶段、没有约束以及没有预运行代码验证,这可能会导致您的包存在严重的错误。

然后我开始接触 Flowtype 和 TypeScript。 经过简短的评估后,我决定使用 TypeScript,并且至今仍在使用它。 两年后,我明天可以告诉你 - 决定使用 TypeScript 对于该项目和我的职业生涯来说是一个不错的选择。 但是,如果您觉得 TypeScript 开发人员的生活永远属于您,那么您最好继续阅读。

在本文中,我不想详尽地解释 TypeScript 的功能或深入研究项目设置。 网上有很多好的资源(例如官方TS文档:)。 当然,本文并不是针对初学者的入门指南。

这是您在日常使用 TypeScript 工作中感受到的优缺点的总结。 我想描述一下我使用 TypeScript 时最糟糕的经历,另一方面,我想描述一下我认为最有用的功能。 所以这篇文章是关于优点和缺点的,所以让我们开始吧。

首先要做的事情——配置

正如我所提到的,我对 React 和 Redux 有一些经验,所以我想利用这一点并在新项目中使用类似的(自定义)配置。 例如 - webpack、babel、npm script、jest、linter 等常见的东西,只需要做一件额外的事情 - 支持 TypeScript。

如果你今天遇到同样的情况 - 我确切地告诉你:这不仅仅是在你的 webpack 配置中添加一个加载器。 必须为 TS 提供一个,用 TSLint 替换 ESLint,集成 TypeScript 的 loader 和 babel 的配置,将 TS 插入 Jest(测试平台)。

一些不道德的事情即将发生。 TS 配置并不容易做到,“简单复制和测试”的策略并不是最好的入门方式。

在将 tsconfig.json 加载到项目中之前,最好仔细阅读文档。

此外,Jest(转换、模块映射器)和 css 模块也存在一些问题。 也许你迟早会面对他们。 不要认为现在你可以扔掉 babel - TypeScript 不提供任何腻子来让你使用这些很棒的新语法和功能,也不会将你的新 API 转换为旧浏览器可以理解的代码。

所以我的建议是 - 如果可以的话,您应该使用一些开箱即用的支持 TS 的入门工具或 CLI(例如 Angular cli),以防止无休止的项目配置。

类库支持

另一个特别不愉快的经历与 TypeScript 支持的泛型数量有关。

通常,如果您是某人 npm 包的作者,您始终可以使用工作包。 有时,你们都会公开包的 ES6 源代码。 如果您打算将该库与 TypeScript 一起使用,则必须提供类型定义。 简单来说 - 是一个包含每个模块、命名空间、类、方法、函数等声明的文件。TypeScript 用户需要使用这个。 TypeScript 模块只能使用其定义中描述的内容,并且只能以其声明中指定的形式使用。 不幸的是,源代码和声明之间通常没有严格的联系。 它们可能仍然不正确或过时,或者根本不正确。

就我个人而言,我很容易找到这样的肯定。 大多数流行的库都有其作者或社区的类型定义。 如果你使用的包没有这样的文件 - 只需更改它,有很多 npm 包具有相同的功能。 但是,您可以制作一个“假”宣言,或者创建一个真实的宣言并将其作为对开源社区的贡献发布。

不管怎样,还有一个更严重的问题——正如我之前谈到的,一些声明是不正确的或过时的。 如果您遇到此类问题,则没有简单的解决方案。 您可以使用声称可以工作的先前版本,自行修补并贡献它,或者等待作者修复它。 有时他们会及时修复,有时则不会那么快。

顺便说一句,我是一些简单包的作者typescript 封装方法,相信我,即使我想做得很好,我也经常忘记将新函数与其类型定义同步。

日常工作

现在是有趣的部分了。 一旦你配置了你的项目并选择了一个具有良好 TS 支持的库,你就可以感受到类型的力量。 如果您没有这些语言的背景,一开始可能会有点奇怪。 TypeScript 中有许多功能是当前 JavaScript 语法中所没有的。 让我们谈谈对我最有用的那些。

类型

如果你仔细想想,TS 最常用的功能就是静态类型。 如果没有严格的类型校准,使用 TypeScript 是没有意义的。 当然你可以使用困难的“any”类型,这意味着“我不关心那个东西的类型,它可以是一个数字,它可以是一个字符串链接列表,只要让它工作”,严肃的脸,如果您想要这种形式的编码比使用旧的更好。

类型将帮助您更快、更安全地编码。 你可以告诉编译器“这个常量正确来说是一个数字”,如果你尝试将它用作链表或字符串,TS编译器总是会提示你输入错误。 基本上,您始终可以对代码执行任何操作,就像常规 JavaScript 一样,但现在您的操作比以前更安全、更容易理解。

TypeScript 中有几种基本类型和一些中间类型以及与它们相关的技术。

下面您可以看到一些基本但非常强大的东西,有关更多中间类型的信息,请访问文档:。

除了数字或字符串等众所周知的类型之外typescript 封装方法,TypeScript 还提供枚举类型。

您可以使用外部类型,例如日期或错误。 尝试使用代码提示来实现更快、更安全的编程。

界面

如果您认为类型是“破坏者”,那么您对套接字有何看法? 接口可以帮助您编写更好的代码,因为它们最终允许您在对象之间定义商定的实现方法。 我创建了很多套接字。 他们无处不在。 有时我只为套接字编写一个文件,因为这是值得的。

我主要用它来描述对象、类、函数和参数的形状。 您可以在模块之间共享它们,并将它们视为源代码中的实例,但请记住 - 运行时套接字不会显示在代码中,这很容易被忽视。 这就是为什么在某些情况下最好使用类而不是套接字(例如使用 Angular 依赖注入)。 让我们看一些套接字的真实示例:

左边 - 返回类型的错误实现。 左侧 - VS Code 会立即通知您代码中的错误。

右侧 - 一个类错误地实现了用户扩展的套接字(请参阅上一屏幕)。 左边 - 描述错误消息..

种类

ES6 中有类,所以你以前可能用过它。 但是 TypeScript 类中有一些额外的功能,也许 EcmaScript 的未来会实现这些功能。 在TS中,您可以定义抽象类,您可以将类的属性描述为静态、私有或只读,您可以扩展该类并使该类实现套接字(没问题)。 我不会比较 TS 类和 ES6 类之间的区别,因为最终它们会形成类似的 JavaScript 代码(在编译和转译之后)。 在 TS 类中,只需以优雅且有效的方式封装要使用的类,它们与其他语言实现(例如 Java)非常相似,这具有一些含义(更多内容将在“代码审查”部分中介绍)。 查看计数器示例,了解使用 TypeScript 和优秀的代码编辑器如何使您的工作变得更轻松。

当然,TypeScript 中有很多新东西,比如基类(你将使用它们)、枚举(你可能将它们用于内部事物)、命名空间、JSX 支持等等。 但你不需要一开始就知道一切,只需使用前面提到的基本功能,你就会听到你的代码质量得到了增强。

通过 TypeScript,您可以使用抽象类等功能。 有关抽象类的更多信息:

TypeScript 支持私有、公共和受保护的方法以及只读属性。 类可以实现套接字或扩展其他类。

代码质量

我刚刚提到了代码质量吗? 当然会提到,因为我们都关心代码质量(除了客户要求、截止日期和时间表,等等)。

那么为什么要使用 TypeScript 呢? (在代码质量层面)

此外,由于卓越的 IDE 支持,编写可维护的代码变得更加容易。 老实说 - 即使您单独编写一个小型应用程序,几周后您也会忘记必须传递给服务的参数类型或新创建的用户包含哪些数据。 实际上,您可以查看源代码并在浏览完代码后找到有用的信息(假设您的代码总是简单),但是将键盘悬停在您最喜欢的编辑器上的函数名称上以查看您想要的信息不是更好吗?想 ? 例如,它接受“age”(即“数字”),并返回具有“age”和“name”属性的 User 实例。

代码审查是我想提的另一件事。 当你在一个小团队中工作时,有时你是唯一的后端开发人员,而做 .net 或 Java 的朋友真的不喜欢看原生 JavaScript。 由于语言的动态性和简洁性,他们会认为它的可读性很差,没有类型意味着没有提示。 例如,名称为“user”的对象具有“ID”属性,但 ID 是数字还是字符串? 如果是字符串,为什么只需要调用“toString()”? 如果是数字,为什么要添加字符串“id_”? TypeScript 代码看起来很像其他流行的类型化语言,并且您可能会获得更好、更准确的代码审查。 更好的代码审查意味着更好的代码,这一点不需要我多说。

左 - TypeScript 中的代码。 右 - Java 代码。 正如您所看到的,语法非常相似,这意味着 Java 开发人员应该比原生 JavaScript 更容易理解您的 TypeScript 代码。

学习曲线

最后,我想多说一点关于 TypeScript 的事情。 与往常一样,当你尝试新事物时,会有一些学习曲线。 放在TS下面,不是很陡,但是要防止TypeScript和新框架一起使用。 这两者的相加将使学习曲线看起来足够陡峭。 尤其是在小型或缺乏经验的团队中。 这就是为什么我两年前选择这个项目作为我的第一个 TypeScript 应用程序 - 我对 React 堆栈非常熟悉,所以这是学习一门有前途的新语言的绝佳机会。 我可以保证,如果我同时选择一个新的框架(比如 Angular)和一种新的语言(在本例中是 TypeScript),我就会被彻底打倒。

总结

我会向你推荐 TypeScript 吗? 当然。 它将帮助您在更短的时间内编写更好的代码。 如今 IDE 支持很棒,社区充满活力,具有 TS 定义的库数量巨大且在下降,使用过它的程序员都说它很好(来自编译器的快速反馈)。 这是我所知道的用于创建现代且可扩展的 Web 应用程序(当然还有 Node.js 服务)的最佳工具。 记住前面提到的一些缺点,解决它们可以让我们深入了解静态类型语言的多彩世界。

关于本文 译者:@陈方旭 翻译:作者:@Kamil Zagrabski 原文:

推荐给你