本篇内容介绍了“怎么用TypeScript编写React”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!React 和 TypeScript 如何一起使用在开始之前,让我们回顾一下 React 和 TypeScript 是如何一起工作的。React 是一个 “用于构建用户界面的 JavaScript 库” ,而 TypeScript 是一个 “可编译为普通 JavaScript 的 JavaScript类型化超集” 。通过同时使用它们,我们实际上是使用 JavaScript 的类型化版本来构建 UI。将它们一起使用的原因是为了获得静态类型化语言( TypeScript )对 UI 的好处:减少 JS 带来的 bug,让前端开发更安全。TypeScript 会编译我的 React 代码吗?一个经常被提到的常见问题是 TypeScript 是否编译你的 React 代码。TypeScript 的工作原理类似于下面的方式:TS:“嘿,这是你所有的UI代码吗?”React:“是的!”TS:“酷!我将对其进行编译,并确保你没有错过任何内容。”React:“听起来对我很好!”因此,答案是肯定的!但是稍后,当我们介绍 tsconfig.json 配置时,大多数时候你都想使用 “noEmit”: true 。这是因为通常情况下,我们只是利用 TypeScript 进行类型检查。概括地说, TypeScript 编译你的 React 代码以对你的代码进行类型检查。在大多数情况下,它不会发出任何 JavaScript 输出。输出仍然类似于非 TypeScript React 项目。TypeScript 可以与 React 和 Webpack 一起使用吗?是的, TypeScript 可以与 React 和 webpack 一起使用。幸运的是,官方 TypeScript 手册对此提供了配置指南。希望这能使你轻而易举地了解两者的工作方式。现在,进入最佳实践!最佳实践我们研究了最常见的问题,并整理了 React with TypeScript 最常用的一些写法和配置。这样,通过使用本文作为参考,你可以在项目中遵循最佳实践。配置配置是开发中最无趣但是最重要的部分之一。我们怎样才能在最短的时间内完成这些配置,从而提供最大的效率和生产力?我们一起来讨论下面的配置tsconfig.jsonESLint / PrettierVS Code 扩展和配置项目初始化初始化一个 React/TypeScript 应用程序的最快方法是 create-react-app 与 TypeScript 模板一起使用。你可以运行以下面的命令:这可以让你开始使用 TypeScript 编写 React 。一些明显的区别是:.tsx:TypeScript JSX 文件扩展tsconfig.json:具有一些默认配置的 TypeScript 配置文件react-app-env.d.ts:TypeScript 声明文件,可以进行允许引用 SVG 这样的配置tsconfig.json幸运的是,最新的 React/TypeScript 会自动生成 tsconfig.json ,并且默认带有一些最基本的配置。我们建议你修改成下面的内容:其他建议来自 react-typescript-cheatsheet 社区ESLint / Prettier为了确保你的代码遵循项目或团队的规则,并且样式保持一致,建议你设置 ESLint 和 Prettier 。为了让它们配合的很好,请按照以下步骤进行设置。1.安免费云主机、域名装依赖2.在根目录下创建一个eslintrc.js 文件并添加以下内容:3.添加 Prettier 依赖4.在根目录下创建一个 .prettierrc.js 文件并添加以下内容:5.更新 .eslintrc.js 文件:VSCode 扩展和设置我们添加了 ESLint 和 Prettier ,下一步就是在保存时自动修复/美化我们的代码。首先,安装 VSCode 的 ESLint extension 和 Prettier extension 。这将使 ESLint 与您的编辑器无缝集成。接下来,通过将以下内容添加到您的中来更新工作区设置 .vscode/settings.json :保存时, VS Code 会发挥它的魔力并修复您的代码。很棒!组件React 的核心概念之一是组件。在这里,我们将引用 React v16.8 以后的标准组件,这意味着使用 Hook 而不是类的组件。通常,一个基本的组件有很多需要关注的地方。让我们看一个例子:注意这里的关键区别。在第一个例子中,我们使用函数声明式写法,我们注明了这个函数返回值是 React.ReactNode 类型。相反,第二个例子使用了一个函数表达式。因为第二个实例返回一个函数,而不是一个值或表达式,所以我们我们注明了这个函数返回值是 React.FC 类型。记住这两种方式可能会让人混淆。这主要取决于设计选择。无论您选择在项目中使用哪个,都要始终如一地使用它。Props我们将介绍的下一个核心概念是 Props。你可以使用 interface 或 type 来定义 Props 。让我们看另一个例子:关于 interface 或 type ,我们建议遵循 react-typescript-cheatsheet 社区提出的准则:在编写库或第三方环境类型定义时,始终将 interface 用于公共 API 的定义。考虑为你的 React 组件的 State 和 Props 使用 type ,因为它更受约束。”让我们再看一个示例:在此 组件中,我们为 Props 使用 type。每个 Props 上方都有简短的说明,以为其他开发人员提供更多背景信息。? 表示 Props 是可选的。children props 是一个 React.ReactNode 表示它还是一个 React 组件。通常,在 React 和 TypeScript 项目中编写 Props 时,请记住以下几点:始终使用 TSDoc 标记为你的 Props 添加描述性注释 /** comment */。无论你为组件 Props 使用 type 还是 interfaces ,都应始终使用它们。如果 props 是可选的,请适当处理或使用默认值。Hooks幸运的是,当使用 Hook 时, TypeScript 类型推断工作得很好。这意味着你没有什么好担心的。举个例子:TypeScript 推断出 useState 钩子给出的值。这是一个 React 和 TypeScript 协同工作的成果。在极少数情况下,你需要使用一个空值初始化 Hook ,可以使用泛型并传递联合以正确键入 Hook 。查看此实例:下面是一个使用 userReducer 的例子:可见,Hooks 并没有为 React 和 TypeScript 项目增加太多复杂性。常见用例本节将介绍人们在将 TypeScript 与 React 结合使用时一些常见的坑。我们希望通过分享这些知识,您可以避免踩坑,甚至可以与他人分享这些知识。处理表单事件最常见的情况之一是 onChange 在表单的输入字段上正确键入使用的。这是一个例子:扩展组件的 Props有时,您希望获取为一个组件声明的 Props,并对它们进行扩展,以便在另一个组件上使用它们。但是你可能想要修改一两个属性。还记得我们如何看待两种类型组件 Props、type 或 interfaces 的方法吗?取决于你使用的组件决定了你如何扩展组件 Props 。让我们先看看如何使用 type:如果你使用 interface 来声明 props,那么我们可以使用关键字 extends 从本质上“扩展”该接口,但要进行一些修改:两种方法都可以解决问题。由您决定使用哪个。就个人而言,扩展 interface 更具可读性,但最终取决于你和你的团队。第三方库无论是用于诸如 Apollo 之类的 GraphQL 客户端还是用于诸如 React Testing Library 之类的测试,我们经常会在 React 和 TypeScript 项目中使用第三方库。发生这种情况时,你要做的第一件事就是查看这个库是否有一个带有 TypeScript 类型定义 @types 包。你可以通过运行:例如,如果您使用的是 Jest ,则可以通过运行以下命令来实现:这样,每当在项目中使用 Jest 时,就可以增加类型安全性。该 @types 命名空间被保留用于包类型定义。它们位于一个名为 DefinitelyTyped 的存储库中,该存储库由 TypeScript 团队和社区共同维护。“怎么用TypeScript编写React”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
本文小编为大家详细介绍“浏览器的面试题有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“浏览器的面试题有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。浏览器的内核可以分成两部分:渲染引擎和JS引擎(注意:我们常说的浏览器内核…