一、typeScript在react中使用

最新推荐文章于 2024-11-11 15:11:30 发布
最新推荐文章于 2024-11-11 15:11:30 发布
阅读量133 收藏 1
点赞数 2
分类专栏： React typeScript 文章标签： typescript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39262418/article/details/120697036
版权

初始化一个 React/TypeScript 应用程序。运行以下面的命令：（名称中不能有大写字母）

npx create-react-app tsdemo --typescript

 

进入项目，安装typescript

yarn add typescript

此时yarn start运行程序会报错找不到react等包，需要安装包的ts版本，

npm install --save-dev typescript @types/react @types/react-dom ts-loader

 此时文件里报错，无法使用 JSX，除非提供了 "--jsx" 标志

点击右下角版本号，点击“选择TypeScript版本”，选择“使用工作区版本”

 

 

运行项目 yarn start,编译出错找不到web-vitals包......,关于这个库是Create React App 包含的一个性能中继器，是来衡量和分析应用程序的性能。相关文档：Measuring Performance | Create React App

缺了他就装上呗

yarn add web-vitals

运行项目

yarn start

成功，嘻嘻🎉

钢镚是个小屁精
关注
专栏目录
使用 TypeScript 在 React JS 中进行路由
技术探索驿站
08-13 869
单页应用程序 (SPA) 中的路由支持在视图之间导航，而无需重新加载应用程序。React Router 是 React 应用程序中路由的标准库。本文简要概述了使用 TypeScript 设置路由的方法。
如何在 React 项目中应用 TypeScript？
唯见青山不见君
04-29 1072
如何在 React 项目中应用 TypeScript？
TypeScript在React中的优雅写法
duansamve的博客
09-08 1081
如果运用熟练的话，TS 只是在第一次开发的时候稍微多花一些时间去编写类型，后续维护、重构的时候就会发挥它神奇的作用了，还是非常推荐长期维护的项目使用它的。
如何在React项目中使用TypeScript
郊眠寺
11-15 1156
axios是很流行的http库，他的ts封装已经很完美了，我们只做简单的二次封装，返回通用的数据响应格式。首先在// 拦截器定义export interface RequestInterceptors {// 请求拦截requestInterceptors?: (err: any) => any// 响应拦截responseInterceptors?}// 生成axios实例的参数，实例可以单独传入拦截器}// loading请求数量// 打开loading。
Typescript在react中的应用
s_x111的博客
04-20 791
Typescript一、关于Typescript1.什么是Typescript？2.安装 TypeScript二、在 react 中使用 ts 需要注意几点三、ts在react中的使用推荐阅读 一、关于Typescript TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。 它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 开发的 Angula
使用React掌握TypeScript
liangshanbo1215的博客
10-04 463
TypeScript将静态类型添加到JavaScript中，这有助于在运行之前捕获潜在的错误。在本文中，我们将介绍在React中使用TypeScript的基本概念。React钩子也可以在TypeScript中输入，以确保组件中状态和效果逻辑的类型安全。通过遵循这些最佳实践，您将能够在React应用程序中充分利用TypeScript的潜力，从而产生更强大、更可维护的代码。当你在React中定义一个组件时，你可以为它的props指定类型，以使组件的使用更加清晰和安全。，并将其作为组件props的类型注释传递。
React 项目中使用 TypeScript
m0_62118859的博客
05-03 3786
1.useEffect 的使用 目标：能够掌握 useEffect 在 TS 中的使用 内容： useEffect函数不涉及到任何类型，TS 和 JS 中使用一致 useEffect(() => { const onResize = () => { console.log('哈哈哈'); }; window.addEventListener('resize', onResize); return () => { window.addEventLi
TypeScript与React中如何使用ref
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
01-06 2221
父组件 在父组件中，编写如下： 类中定义child,用于存放子组件的作用域 public child: any;Copy to clipboardErrorCopied 绑定子组件作用域 public onRef(ref:any){ this.child = ref }Copy to clipboardErrorCopied 子组件上绑定ref <ChildPage onRef={(el)=>this.onRef(el)} />Copy to clipboardError
在TypeScript使用React forwardRef
胡聊前端的博客
10-09 5762
React forwardRef 用于获取子结点的DOM元素引用。当结合TS使用时，需要注意类型断言。 import { forwardRef, useEffect } from "react"; const Test = forwardRef<HTMLDivElement>((props, ref) => { useEffect(() => { console.log(ref.current); }, []); return <div ref={r
2022最新React项目实战(React后台管理系统、TypeScript+React18)
05-12
前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥...
TypeScript-React-Starter：基于typescript和react的全家桶建造的一个项目
02-03
TypeScript-React-Starter 结合了react的全家桶建造的一个项目 运行 # 开发环境 npm run start # http://localhost:3000 # 打包 npm run build # 发版 npm run deploy
typescript-react-starter:用于构建Typescript和React项目的基础项目
05-01
用于构建Typescript＆React项目的基础项目。 该项目是从并对其进行编辑以添加和CSS Module支持。 发展 设置 该项目使用因此您可以使用以下设置节点版本： nvm use 或将其手动设置为.nvmrc设置的版本。 使用以下...
chrome-extension-react-typescript-boilerplate：:hammer:一个样板项目，可使用TypeScript和React快速构建Chrome扩展（使用webpack构建）
01-30
Chrome扩展程序（使用TypeScript + React构建） 这个项目是样板项目，可让您使用TypeScript和React快速构建chrome扩展。 建造 克隆回购 npm i npm run dev可以编译一次，或者npm run watch以watch模式运行dev任务 ...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2120
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
React 源码学习01 ---- React.Children.map 的实现与应用
止于至善
11-07 637
目前是第一次看这个函数的实现，知道他大概干了什么，也大概明白每一步要干什么，但是目前还不清除他为什么要这么干。为什么要来看他的实现呢？一个是只有知道他是怎么实现的，才能知道在调用这个方法时，那些情况会报错，为什么报错，能够快速处理。使用这个方法开发功能的时候能够更加得心应手。
react-router-dom 库作用
最新发布
weixin_64684095的博客
11-11 445
使用`react-router-dom`可以在代码中直接定义一个路由规则，如从`/home`路径导航到`Home`组件。
react动态路由
m0_64455070的博客
11-08 615
在React应用中，动态路由（Dynamic Routing）通常指的是根据应用的状态或用户的交互来动态地显示或隐藏路由（页面或组件）。
【Android、IOS、Flutter、鸿蒙、ReactNative 】文本Text显示
我很好
11-11 248
介绍了Android Xml布局、Compose布局、Flutter布局、Ios布局、ReactNative布局分别显示一行文本。
4.1 WINDOWS XP,ReactOS对象与对象目录----1
zhyjhacker的博客
11-06 1053
系列文章目录 文章目录系列文章目录4.1 对象与对象目录OBJECT_HEADERObpLookupEntryDirectory()NtCreateTimer() 4.1 对象与对象目录 “对象(Object)”这个词现在大家都已耳熟能详了，但是对象到底是什么呢?广义地说，对象就是“目标”，行为的目标，或者说行为的受体。所以，广义地说，任何客观存在着的物体都可以成为对象。但是，在计算机技术里,“对象”是个专有名词，其定义是:一个(或一组)数据结构和定义于其上的(若干)操作。这里所谓操作是指实现某种功能的函
在typescript使用react-barrage
05-12
要在 TypeScript 中使用 react-barrage，您需要首先安装以下依赖项： ```bash npm install --save react react-dom react-barrage ``` 然后在您的 TypeScript 代码中，您需要导入 react-barrage 组件和类型： ```typescript import React from 'react'; import ReactDOM from 'react-dom'; import { Barrage, BarrageItemProps } from 'react-barrage'; ``` 接着，您可以使用 Barrage 组件来渲染弹幕。Barrage 组件需要一个 BarrageItemProps 类型的数组作为 props，每个 BarrageItemProps 对象描述一个弹幕的内容和样式。例如： ```typescript const barrageItems: BarrageItemProps[] = [ { content: 'Hello world!', style: { color: 'white', fontWeight: 'bold' }, speed: 80, duration: 5000, }, { content: 'Welcome to react-barrage!', style: { color: 'red' }, speed: 100, duration: 7000, }, ]; ReactDOM.render( <Barrage items={barrageItems} />, document.getElementById('root') ); ``` 这将在页面上渲染一个带有两个弹幕的 Barrage 组件。您可以根据需要定义更多的 BarrageItemProps 对象来添加更多的弹幕。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钢镚是个小屁精

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值