React和TypeScript是当今许多开发人员正在使用的两种很棒的技术。但是一起使用它们会变得很棘手，有时很难找到正确的答案。别担心，在本文中我们将总结结合两者的最佳实践。React和TypeScript如何协同工作在开始之前，让我们回顾一下React和TypeScript如何协同工作。React是“用于构建用户界面的JavaScript库”，而TypeScript是“编译为普通JavaScript的JavaScript的类型化超集”。通过一起使用它们，我们实际上是在使用JavaScript的类型化版本来构建UI。之所以一起使用它们，是为了获得静态类型语言（TypeScript）在UI上的好处：减少JS带来的bug，让前端开发更安全。TypeScript会编译我的React代码吗？一个经常被问到的常见问题是TypeScript是否编译你的React代码。TypeScript是这样工作的：TS：“嘿，这是你所有的UI代码吗？”反应：“是的！”TS：“酷！我会编译它并确保你不会错过任何内容。”反应：“对我来说听起来不错！”所以，答案是肯定的！但是后来，当我们介绍tsconfig.json配置时，大多数时候你要使用"noEmit":true。这是因为通常情况下，我们只是利用TypeScript进行类型检查。简而言之，TypeScript编译您的React代码以对您的代码进行类型检查。在大多数情况下，它不会发出任何JavaScript输出。输出仍然类似于非TypeScriptReact项目。TypeScript可以与React和Webpack一起使用吗？是的，TypeScript可以与React和webpack一起使用。幸运的是，官方的TypeScript手册为此提供了配置指南。希望这能让您轻而易举地了解两者的工作原理。现在，进入最佳实践！最佳实践我们已经研究了最常见的问题，并整理了一些使用TypeScript编写和配置React的最常见方法。这样，您可以将本文作为参考，在您的项目中遵循最佳实践。配置配置是开发中最不有趣但最重要的部分之一。我们如何才能在最短的时间内完成这些配置，从而提供更高的效率和生产力？让我们讨论以下配置tsconfig.jsonnpxcreate-react-appmy-app--templatetypescriptESLint/PrettierVSCode扩展和配置项目初始化初始化React/TypeScript应用程序的最快方法是使用带有TypeScript模板的create-react-app.您可以运行以下命令：npxcreate-react-appmy-app--templatetypescript这将使您开始使用TypeScript编写React。一些显着的差异是：.tsx：TypeScriptJSX文件扩展名tsconfig.json：带有一些默认配置的TypeScript配置文件react-app-env.d.ts：TypeScript声明文件，可以配置为允许像这样引用SVG幸运的是，最新的React/TypeScript默认会自动生成带有一些最小配置的tsconfig.json。我们建议您修改为：{"compilerOptions":{"target":"es5",//指定ECMAScript版本"lib":["dom","dom.iterable","esnext"],//编译包含的依赖库文件列表"allowJs":true,//允许编译JavaScript文件"skipLibCheck":true,//跳过所有声明文件的类型检查"esModuleInterop":true,//禁用命名空间引用(import*asfsfrom"fs")启用CJS/AMD/UMD样式引用(importfsfrom"fs")"allowSyntheticDefaultImports":true,//允许从没有默认导出的模块中默认导入"strict":true,//启用所有严格类型检查选项"forceConsistentCasingInFileNames":true,//不允许对同一文件的不一致格式引用"module":"esnext",//指定模块代码生成"moduleResolution":"node",//使用Node.js风格解析模块"resolveJsonModule":true,//允许导入.json扩展名的模块"noEmit":true,//无输出（意思是不编译代码，只进行类型检查）"jsx":"react",//SupportJSX"sourceMap":trueinthe.tsxfile,//生成对应的.map文件"declaration":true,//生成对应的.d.ts文件"noUnusedLocals":true,//报告未使用的局部变量用过的"noUnusedParameters":true,//报告未使用参数的错误"experimentalDecorators":true,//启用对ES装饰器的实验性支持"incremental":true,//通过读取以前的编译/将信息写入磁盘上的文件以启用增量编译"noFallthroughCasesInSwitch":true},"include":["src/**/*"//***TypeScript文件应该进行类型检查***],"exclude":["node_modules","build"]//***Fileswithouttypechecking***}其他建议来自react-typescript-cheatsheet社区ESLint/Prettier，确保你的代码遵循项目或团队的规则，风格一致，推荐您设置ESLint和Prettier是为了让它们正常工作，请按照以下步骤进行设置。1、安装依赖yarnaddeslint@typescript-eslint/parser@typescript-eslint/eslint-pluginslint-plugin-react--dev2。在根目录下创建eslintrc.js文件，添加如下内容：module.exports={parser:'@typescript-eslint/parser',//指定ESLint解析器extends:['plugin:react/recommended',//使用来自@eslint-plugin-react的推荐规则'plugin:@typescript-eslint/recommended',//使用来自@typescript-eslint/eslint-plugin的推荐规则],parserOptions:{ecmaVersion:2018,//Allow解析最新的ECMAScript特性sourceType:'module',//AllowimportecmaFeatures:{jsx:true,//JSXparsingisallowed},},rules:{//customrules//e.g."@typescript-eslint/explicit-function-return-type":"off",},settings:{react:{version:'detect',//告诉eslint-plugin-react自动检测React的版本},},};3、添加Prettier依赖yarnaddprettiereslint-config-prettiereslint-plugin-prettier--dev4。在根目录文件中新建一个.prettierrc.js，添加如下内容：module.exports={semi:true,trailingComma:'all',singleQuote:true,printWidth:120,tabWidth:4,};更新.eslintrc.js文件：module.exports={parser:'@typescript-eslint/parser',//指定ESLint解析器extends:['plugin:react/recommended',//使用来自@eslint-plugin-react的推荐规则'plugin:@typescript-eslint/recommended',//使用来自@typescript-eslint/eslint-plugin的推荐规则'prettier/@typescript-eslint',//使用ESLint-config-prettier禁用来自@typescript-eslint/ESLint的与prettier'plugin:prettier/recommended',]冲突的ESLint规则，]parserOptions:{ecmaVersion:2018,//允许解析最新的ECMAScript特性sourceType:'module',//允许导入ecmaFeatures:{jsx:true,//允许解析JSX},},rules:{//自定义规则//例如."@typescript-eslint/explicit-function-return-type":"off",},settings:{react:{version:'detect',//告诉eslint-plugin-react自动检测React的版本},},};VSCode扩展和设置我们添加了ESLint和Prettier，下一步是在保存时自动修复/美化我们的代码。首先，安装VSCode的ESLint扩展和Prettier扩展。这会将ESLint与您的编辑器无缝集成。接下来，通过将以下内容添加到您的.vscode/settings.json来更新您的工作区设置：{"editor.formatOnSave":true}保存时，VSCode将发挥其魔力并修复您的代码。惊人的！组件React的核心概念之一是组件。在这里，我们指的是Reactv16.8及以后的标准组件，即使用Hooks而不是类的组件。通常，一个基本组件会引起很多关注。我们来看一个例子：importReactfrom'react'//函数声明functionHeading():React.ReactNode{return

MyWebsiteHeading

}//函数扩展constOtherHeading:React.FC=()=>

MyWebsiteHeading

注意这里的关键区别。在第一个例子中，我们使用了函数声明式的写法，我们指明这个函数的返回值是React.ReactNode类型。相反，第二个示例使用函数表达式。因为第二个实例返回的是函数，而不是值或表达式，所以我们标记函数返回值是React.FC类型。记住这两种方式可能会造成混淆。这主要是设计选择的问题。无论您选择在项目中使用哪个，请始终如一地使用它。道具我们将介绍的下一个核心概念是道具。您可以使用接口或类型定义道具。让我们看另一个例子：importReactfrom'react'interfaceProps{name:string;color:string;}typeOtherProps={name:string;color:string;}//注意这里我们正在使用函数声明和interfacePropsfunctionHeading({name,color}:Props):React。ReactNode{return

MyWebsiteHeading

}//注意这里我们使用的函数表达式的类型为OtherPropsconstOtherHeading:React.FC=({name,color})=>

MyWebsiteHeading

关于接口或类型，我们建议遵循react-typescript-cheatsheet社区建议的指南：在编写库或第三方环境类型定义时，始终使用接口来定义公共API。考虑为React组件的State和Props使用类型，因为它更受限制。"再看一个例子：importReactfrom'react'typeProps={/**colortouseforthebackground*/color?:string;/**standardchildrenprop:acceptsanyvalidReactNode*/children:React.ReactNode;/**传递给theonClickhandler的回调函数*/onClick:()=>void;}constButton:React.FC=({children,color='tomato',onClick})=>{return{children}}在这个组件中，我们为Props使用type。每个Props上面都有一个简短的描述，以便为其他开发人员提供更多上下文。?表示Props是可选的。childrenprops是一个React.ReactNode表示它也是一个React组件一般情况下，在React和TypeScript项目中编写props时，请记住以下几点：始终使用TSDoc标记为您的props添加描述性注释/**comment*/。无论您是否使用组件props的类型或接口，你应该总是使用它们。如果props是可选的，适当地处理它们或使用def故障值。Hooks幸运的是，TypeScript类型推断在使用Hooks时效果很好。这意味着这意味着您无需担心。例如//`value`isinferredasastring//`setValue`isinferredas(newValue:string)=>voidconst[value,setValue]=useState('')TypeScript推断useState钩子给定的值。它是React和TypeScript的协作。在极少数情况下，您需要使用空值初始化Hook，您可以使用泛型并传递联合以正确键入Hook。看看这个例子：typeUser={email:string;id:string;}//thegenericisthe<>//theunionistheUser|null//together,TypeScriptknows,"Ah,usercanbeUserornull".const[user,setUser]=useState(空);下面是一个使用userReducer的例子：typeAppState={};typeAction=|{type:"SET_ONE";payload:string}|{type:"SET_TWO";payload:number};exportfunctionreducer(state:AppState,action:Action):AppState{switch(action.type){case"SET_ONE":return{...state,one:action.payload//`payload`isstring};case"SET_TWO":return{...state,two:action.payload//`payload`isnumber};default:returnstate;}}可见Hooks并没有给React和TypeScript项目增加多少复杂度。常见用例本节介绍人们在将TypeScript与React结合使用时遇到的一些常见陷阱。我们希望通过分享这些知识，您可以避免陷阱，甚至与他人分享这些知识。处理表单事件的最常见情况之一是在表单的输入字段上使用onChange以正确键入。下面是一个例子：importReactfrom'react'constMyInput=()=>{const[value,setValue]=React.useState('')//事件类型是“ChangeEvent”//我们将“HTMLInputElement”传递给inputfunctiononChange(e:React.ChangeEvent){setValue(e.target.value)}return}扩展组件的道具有时候，你想得到props作为组件声明的Props并扩展它们以在另一个组件上使用。但是您可能想要修改一两个属性。还记得我们如何看待组件属性、类型或接口的两种方法吗？根据您使用的组件决定了您如何扩展组件道具。我们先看看如何使用type:importReactfrom'react'constMyInput=()=>{const[value,setValue]=React.useState('')//事件类型为"ChangeEvent"//我们通过"HTMLInputElement"给inputfunctiononChange(e:React.ChangeEvent){setValue(e.target.value)}return}如果你使用接口声明道具，然后我们可以使用关键字extends从本质上“扩展”该界面，但进行一些修改：{/**theheightofthecontainer(valueusedwith'px')*/height:number;}constContainer:React.FC=({color,height,width,text})=>{return{text}