React应用配置TypeScript

前言最近用react学习了一些TypeScript的知识。记录反应以创建应用程序项目并支持TypeScript。React是一个用于构建用户界面UI的JavaScript库。它的创建默认不支持TypeScript。本文使用React16.13.1。在使用react库时，我们需要安装以下组件：node(npm,npx)create-react-appreact-script-tstypescript阅读本文后，您将学习：快速创建React应用tsconfig的基本配置使用tsxReact中的component在tsx中编译图片失败创建项目这里我们默认有一个node环境，使用npx快速安装React应用npxcreate-react-appreact-demo--script-version=react-script-ts中网络条件好的情况下，速度还是相当可观的npx:97安装成功，耗时22.955秒我们建议thatyoubeginbytyping:cdreact-demoyarnstartHappyhacking!create程序完成后，我们记录一下此时的目录：tsconfig的基本配置首先需要安装TypeScript：npmitypescript-Dtsc--init生成我们需要的tsconfig.json文件后，我们可以根据自己的需要修改：{"compilerOptions":{"target":"ES2016","module":"ESNext","我ib":["ES6","DOM"],"allowJs":true,"jsx":"react","sourceMap":true,"outDir":"build/dist","rootDir":"src""importHelpers":true,"strict":true,"noImplicitAny":true,"strictNullChecks":true,"noImplicitThis":true,"noUnusedLocals":true,"noImplicitReturns":true,"moduleResolution":"node","baseUrl":".","esModuleInterop":true“skipLibCheck”：true，“forceConsistentCasingInFileNames”：true，“suppressImplicitAnyIndexErrors”：true，“allowSyntheticDefaultImports”：true，“resolveJsonModule”：true，“isolatedModules”：true，“noEmit”：true}，“exclude”：[”node_modules","build","scripts","acceptance-tests","webpack","jest","src/setupTests.ts"],"include":["src"]}在Reacttsx中使用tsx组件是相当于jsx的TypeScript版本，在目录中，我们将.js后缀末尾改为.tsximportReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App';import*asserviceWorkerfrom'./serviceWorker';ReactDOM.render(//严格模式,document.getElementById('root')asHTMLElement);serviceWorker.unregister();tsx中的图片编译失败修改文件名后发现图片编译失败使用Webpack时，处理图片、字体等静态资源的工作方式与CSS直接在TypeScript模块中导入文件的方式类似。这告诉Webpack将这个文件包含在包中。与CSS导入不同，导入文件将为您提供一个字符串值。该值是您可以在代码中引用的最终路径，例如，作为图像的src属性或PDF链接的href。为了减少对服务器的请求数，导入小于10,000字节的图像将返回数据URI而不是路径。这适用于以下文件扩展名：bmp、gif、jpg、jpeg和png。SVG文件被排除在外。在开始之前，必须将每种类型定义为有效的模块格式。否则，TypeScript会编译错误。要在TypeScript中导入这些文件，请在您的项目中创建一个新的类型定义文件并将其命名为assets.d.ts。然后，为每一种需要导入的资源添加一行：declaremodule'*.svg'declaremodule'*.png'declaremodule'*.jpg'declaremodule'*.jpeg'declaremodule'*.gif'declaremodule'*。bmp'declaremodule'*.tiff'配置后，npmstart需要重启项目才能生效。