大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“React应用程序怎么配置TypeScript”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React应用程序怎么配置TypeScript”吧!
成都创新互联成立10年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供成都网站建设、做网站、网站策划、网页设计、申请域名、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,成都创新互联通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。
React 是一个用于构建用户界面 UI 的 JavaScript 库,它的创建默认是不支持 TypeScript 的,本文使用的是 React16.13.1
在使用 react 的库的时候我们需要安装下面的几个组件:
node(npm,npx) create-react-app react-script-ts typescript
阅读本文将学到:
快速创建 React 应用
tsconfig 的基本配置
使用 React 中的 tsx 组件
tsx 中图片编译失败
创建项目
这里默认我们拥有 node 环境,使用 npx 快速安装 React 的应用程序
npx create-react-app react-demo --script-version=react-script-ts
在网络条件不错的情况下,速度还是可观的吧
npx: 97 安装成功,用时 22.955 秒 We suggest that you begin by typing: cd react-demo yarn start Happy hacking!
创建好程序之后,我们记录一下此时的目录:
tsconfig 的基本配置
首先需要安装TypeScript:
npm i typescript -D tsc --init
生成我们需要的tsconfig.json文件之后,我们根据自己的需求去修改即可:
{ "compilerOptions": { "target": "ES2016", "module": "ESNext", "lib": [ "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" ] }
使用 React 中的 tsx 组件
tsx 是相当于 jsx 的 TypeScript 版本,在目录中我们将.js 后缀结尾的改成.tsx 结尾
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(//严格模式 , document.getElementById('root') as HTMLElement ); serviceWorker.unregister();
tsx 中图片编译失败
在修改完文件名字后发现图片编译失败
在使用 Webpack,使用静态资源,如图片和字体,工作方式类似于 CSS。可以直接在 TypeScript 模块中导入文件。这告诉 Webpack 将该文件包含在 bundle 中。与 CSS 导入不同,导入一个文件会给你一个字符串值。这个值是您可以在代码中引用的最终路径,例如,作为图像的 src 属性或指向 PDF 的链接的 href。
为了减少对服务器的请求数量,导入少于 10,000 字节的映像将返回一个数据 URI 而不是路径。这适用于以下文件扩展名: bmp、 gif、 jpg、 jpeg 和 png。SVG 文件被排除。
在开始之前,必须将每种类型定义为有效的模块格式。否则,TypeScript 编译报错
要在 TypeScript 中导入这些文件,请在项目中创建一个新的类型定义文件,并将其命名为 assets.d.ts。然后,为需要导入的每种类型的资产添加一行:
declare module '*.svg' declare module '*.png' declare module '*.jpg' declare module '*.jpeg' declare module '*.gif' declare module '*.bmp' declare module '*.tiff'
配置之后需要npm start重新启动项目才能生效。
到此,相信大家对“React应用程序怎么配置TypeScript”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!