使用 TypeScript 或 JavaScript 做出反应：哪个更好？

什么是打字稿？

开源 TypeScript 提供了将 TypeScript 代码转换为 JavaScript 代码的编译器。 该语言是开源和跨浏览器的。 假设 js 语言几乎没有逻辑缺陷。 在这种情况下，您可以通过将您的 .js 脚本重命名为 .ts 文件来使用 TypeScript 并开始接收适当的 TypeScript 代码。

JavaScript 语言将是 TypeScript 的特殊版本。 微软的技术研究员 Anders Hejlsberg 于 2012 年介绍并创建了它。由于 JavaScript 越来越流行，JS 代码变得越来越庞大，越来越难以理解，这就是开发 Typescript 的原因。 当程序员开始将 JavaScript 用于服务器端技术时，这一点变得更加清晰。

什么是 JavaScript？

每次用户页面所做的不仅仅是坐在那里并显示静态数据供您查看——展示更好的内容、可视化、卡通 2D/3D 图形、浏览视频记录播放器等——你可以打赌 JavaScript 是可能涉及。 JavaScript 是一种脚本或编码语言，使您能够在网页上合并高级结构。 它是由标准 Web 技术组成的第三层蛋糕，前两个（HTML 和 CSS）。

使用 JavaScript 或 TypeScript 更好地反应？

乍一看，标准 React TypeScript 和 JavaScript 的代码似乎没有区别。 鉴于 TypeScript 是代码集并且是 JavaScript 的祖先，这完全是意料之中的。 JavaScript 和 TypeScript 之间的区别在过去几年中没有太大变化。 如果你认识他们，你就准备好了。

未来的技术进步可能会加速软件的生产，从而推高对程序员的需求。 请使用任何语言； 我们预计小型和大型项目的发展：为具有国际团队的大型项目选择 TypeScript，或为大型团队的简单任务选择 JavaScript。

JavaScript 被广泛使用。 他们对其进行分析，发现该语言不稳定且不可预测。 如有必要，可以将 JS 框架转换为 TypeScript。 将流行的 JS 系统转换为 TS 需要人工。

.d.ts 文件必须记录并包含每个移植库的所有返回方法。 jQuery 的移植需要进一步的努力。 或许这并不难。 IDEA、WebStorm、Expressive、Particle 等都支持 TypeScript。

在 TypeScript 与 JavaScript 中反应代码和文件类型

乍一看，标准 React TypeScript 和 JavaScript 的代码似乎没有区别。

鉴于 TypeScript 是代码集并且是 JavaScript 的祖先，这完全是意料之中的。 这意味着任何基于 JavaScript 的编程也将能够执行 TypeScript 文件。 同样，并非所有的 SASS 语言都可以是合法的 CSS 代码； 这个想法表明所有 CSS 在 SASS 代码上都是可以接受的。

但是，计算机无法执行 TypeScript 语言，这就是大多数 TypeScript 应用程序都有 tsconfig.json 的原因。 此配置文件将改变 TypeScript 编译器的行为方式，并将 TypeScript 代码转换为 JavaScript，然后浏览器可以理解和使用。

TypeScript 和 JavaScript React 应用程序的主要区别在于前者的文件名。 比如TSX，而后者是.js。

如何在 Typescript 中创建 React 项目？

您可以在您的环境中使用 create-react-app 库创建一个新的 TypeScript React 项目，并使用以下命令：

 npx create-react-app my-app --template typescript

或者，

 yarn create react-app my-app --template Typescript

如果您有一个想要转换为 TypeScript 的现有 JavaScript React 项目，则可以运行此命令。

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

或者，

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

运行命令后，您可以将所有 .js 文件重命名为 .tsx，重新启动服务器，然后继续。

1. 捕虫器

当通过其他方式设置更多无法检测到的错误时，TypeScript 可以修复的剩余缺陷的比例增加，但这也降低了 TypeScript 仍然可以改进的问题的总数。 因此，虽然比例可能会增加，但发现的问题数量可能会略有变化。

2. IDE 中的 IntelliSense 助手

List Components、Parameter Info、Rapid Info 和 Entire Word 是 IntelliSense（一种代码完成工具）提供的一些功能。 只需几次击键，您就可以添加对属性和方法的调用，记录您输入的参数，并通过这些功能发现您正在使用的软件的一些信息。

3.类型系统

您可能想知道如何严格键入变量或对象，以便 React TypeScript 项目的代码可以启用 Bug Catcher 和 IntelliSense。 要在 Reactive TypeScript 项目中为您提供 TypeScript 类型流程，请记住三件事。

1. 声明对象/数组的交互和原始类型变量的子类型。

要使对象中的字段可选，您可以使用运算符。 它将防止 TypeScript 在检查您的代码时打扰您。

2. 必要时声明功能组件类型

3.您可以免费使用它。 使用值初始化属性允许 TypeScript 立即为您选择质量。

将 TypeScript 与 React 结合使用的 5 个理由

在过去的几年中，前端程序员对 TypeScript 的需求一直很高。 促成其成功的几个因素是改进的可重用性、代码统一性和未来的平台支持。 此外，react 保持公正，为程序员提供使用 TypeScript 或 JavaScript 的选项。 相比之下，许多其他平台和库默认采用 TypeScript。

在这篇文章中，我们将通过 5 个令人信服的论点来支持将 TypeScript 用于 React 应用程序。

1. 组件易于阅读和理解

Prop 类型很容易使用 TypeScript 定义，这使得代码更加精确和易于理解。 此外，还将包括对 IntelliSense 和静态类型检查的支持。

这些因素共同改善了开发过程并减少了缺陷的可能性。 此外，向 Prop 类型添加注释使组件定义更易于理解。

2. 更好的 JSX 支持

TypeScript + React 的另一个好处改进了 JSX 的 IntelliSense 和代码合成。 Bit 使跨项目分发、描述和重用独立组件变得简单。 利用它来创建可扩展的应用程序、保持一致的设计、促进代码重用、与他人合作并加快交付。

3.共享库默认支持TypeScript

假设您在几年前使用 TypeScript。 在这种情况下，您可能还记得寻找第三方库出现的概念是多么令人沮丧。 但是现在 TypeScript 正在迅速流行起来； 最广泛使用的库支持类型定义。 此外，React 库架构支持类型定义，因此您不再需要关心它。

4.当前项目的逐步实施

选择 TypeScript 并不是一个简单的决定。 相反，它是基于当时程序状态的渐进式变化。 例如，假设您选择将 TypeScript 用于当前的 React 项目。 在这种情况下，您应该考虑如何同时操作 TypeScript 和 JavaScript，同时逐步扩展 TypeScript 的使用。 此外，您可以将 TypeScript 编译器参数设置为逐步迁移。

5. IntelliSense 和静态类型验证的一般优势

一个。 测试静态类型

由于静态类型检查，错误更容易更快发现。 前面提到的示例恰当地认识到，get details 方法需要一个字符串而不是数字作为输入。

湾。 更好的智能感知

当 TypeScript 静态数据验证和 IntelliSense 结合使用时，您可以相信 IntelliSense 保持 100% 正确。

C。 加强重构

使用 TypeScript 进行重构要简单得多，因为我们知道精确的语言以及在哪里进行更改。 此外，如果快速发现问题，您将不会冒险损坏任何东西。

d。 未定义的错误更少

因为 TypeScript 解释器还在编译时识别出未定义的错误，所以它们在执行时发生的可能性降低了。

e. 提高可读性和维护性

使用类型定义将更易于理解和维护代码库。 您可以坚持面向对象开发的原则，并利用接口等结构以最小化耦合的方式组织代码。

F。 TypeScript 使用问题得到解决。

鉴于我们之前已经谈到了 TypeScript 的优点，让我们更多地了解它的缺点，以便更好地适应它的采用。

G。 学习曲线

由于学习曲线陡峭，开始使用 TypeScript 可能具有挑战性，特别是如果您的员工只有基本的 JavaScript 经验。 在这种情况下，最好的做法是采用上述渐进式适应。

但是，如果该小组已经有使用动态类型语言的经验，例如 Java 或 C#Understanding Typescript 并不太难。

H。 第三方库中缺少类型定义。

鉴于 TypeScript 的日益普及，这是一种不寻常的情况。 但是，如果您遇到缺少定义的库，TypeScript 的官方文档会提供有用的建议。 引用这个。

一世。 计算周期

自然地，构建源代码将花费更多毫秒，因为它必须经过额外的蒸腾层。 但大多数时候，这并不明显。 它在开发专业知识和不易出现问题方面的优势将超过其需要长时间努力的缺点。

包起来

这是短期痛苦和长期回报之间的联系。 当你开始一个 TypeScript 项目时，你可能会发现建立所有的创作工具非常困难和耗时。 尽管如此，随着您的应用程序的增长，您会发现这些样板文件提供了巨大的帮助，可以加快速度并减少出错的可能性。 我们希望这篇文章能令人难以置信地抓住你，并帮助你认识到在你的 React 项目中使用 TypeScript 的价值。