在React中使用Typescript

2023-10-29

使用命令创建项目

生成一个全新的 ts + react 的模版 可直接使用指令:npm create react-app my-app --template typescript,该模板包含了全套正常运行React所需要的的包和配置,无需再额外手动安装typescript(本章就使用这个命令)
创建项目

npm create react-app my-app --template typescript

如要使用其他第三方库,如路由需要安装路由 (两个都要装)

npm i react-router-dom
npm i @types/react-router-dom

状态管理器react-redux

npm i react-redux
npm i @types/react-redux

点我前往在typescript中使用antd教程
新建组件(后缀名一般都为tsx)

	import * as React from 'react';
	import ReactDOM from 'react-dom'
	//定义接口
	export interface Home{ 
		home?:any
	}
	export interface Home2{
		num:number,
		str:string,
		flag:boolean,
		show?:any,
	}
	class Homes extends React.Component<Home,Home2>{
		constructor(props:Home){
			super(props)
			this.state = {   //这里与Home2里的同步
				num:1,
				str:"字符串",
				flag:false,
				show:"任意类型,可有可无"
			} 
		}
		//这里可以写方法了
		componentDidMount(){  
			this.getList(10);
		}
		getList(num:any):void{ 
			console.log(num)
		}
		render(){ 
			return(<div>
				<h1>这里开始可以写内容了</h1>
				<div className="header"></div>
				<div className="footer"></div>
			</div>)
		}
	}
export default Homes
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在React中使用Typescript 的相关文章

随机推荐

  • 在钉钉上怎么手写_钉钉直播上课可以写字吗_钉钉直播写字板功能介绍_玩游戏网...

    钉钉直播上课已经有很多学校在使用了 这个时候就有人问了 能不能在钉钉上用手写字 在学习资料上做笔记 目前发下来钉钉的很多功能 不过关于写字这个功能暂且还没有 那么想要用写字的方式教学要怎么做呢 这就让我们一起来看一看吧 当然了小编也给大家准
  • 第六章 课后习题(P171-P172)

    习题 一 填空题 1 运算符的重载实际上是 函数 的重载 2 运算符函数必须被重载为 非静态成员函数 或被重载为 友元函数 3 成员函数重载运算符需要的参数的个数总比它的操作数 少 一个 4 重载赋值运算符时 通常返回调用该运算符的 对象的
  • VScode SSH远程登陆到服务器阅读代码

    1 背景介绍 在工作中经常使用ssh远程访问服务阅读代码 但是通过ssh远程访问后没有图形界面 阅读代码非常不方便 本文向大家介绍使用VScode通过ssh远程登陆到服务器 本地可视化阅读查看服务器的代码文件 2 安装VS Code Vis
  • springboot打包成maven仓库中的sdk

    springboot打包成maven仓库中的sdk 首先将pom文件中的关于该项目继承springboot父项目的依赖去除 再去除一些不相干的依赖 插件也去除 在新项目中导入这个jar sdk 需要新建一个配置类 使用注解扫描这个jar中的
  • 记 ==> 首次使用rabbitMQ优化项目

    昨天刚学习完了rabbitMQ 刚好我的项目有个模块挺符合使用rabbitMQ进行异步处理的 这个模块大概功能是 用户发送的所有帖子都会添加到他的发件箱 当有个新用户关注了他 他发件箱内所有的博客都会被添加到关注他的用户的收件箱里 比如 A
  • CUDA基础介绍

    一 GPU简介 1985年8月20日ATi公司成立 同年10月ATi使用ASIC技术开发出了第一款图形芯片和图形卡 1992年4月ATi发布了Mach32图形卡集成了图形加速功能 1998年4月ATi被IDC评选为图形芯片工业的市场领导者
  • vs2010使用VLD,

    在VS2010项目总使用VLD visual leak detector 进行内存泄露检测 调试时程序无法启动报错 应用程序正常启动失败 0xc0150002 产生原因 VC2003 VC2005 VC2008及其后续版本 对底层最基本的C
  • C语言学习笔记(四)

    1 在编译使用了strcpy scanf等不安全的函数 而报警告和错误 而导致无法编译通过 此时我们有两种解决方案 a 在指定的源文件的开头定义 define CRT SECURE NO WARNINGS 只会在该文件里起作用 b 在项目属
  • 成功解决 git设置http代理 https代理 取消代理

    welcome to my blog 问题 使用hexo搭建博客 执行hexo init时包含git clone的操作 但是使用的是https协议 不是ssh 所以为git设置https代理 但是只设置https代理并不能加速 与此同时 只
  • python socket接收与发送数据编码

    1 服务器端接收数据 1 向服务器端发送16进制数据 3A 0B 12 2 服务器端接收数据为 未转化打印出来为 b x0b x12 格式为字节流 打打印时3A对应ASCII表中的冒号 总结为当没有进行转换时 编译器会根据接收到的十六进制的
  • CA 厂商排名

    1 NDS 2 Irdeto 3 Nagravision 4 Verimatrix 5 Widevine 6 Latens 7 Viaccess 8 Secure Media
  • 关于跑demo遇到的flask mysql navicat 导入包的解决方式

    Q1 导入demo时的第一步 打开pycharm 左上角 之后 点击settings 进入settings后 点击Project下的python interpreter 此时 右侧的python interpreter显示的是no inte
  • ctfshow web14

    题目描述 无 解题思路 这道题比较简单 分值也只有5分 就是一个简单的sql注入 但是这个sql注入的回显你得看它的源代码里才有 但是它把你右击查看源码那个玩意儿给禁了 你需要在你的url前面加view source 才能看到源码 解题过程
  • 数据库结构对比工具 支持 SqlServer ,Oracle,MySql 相互对比同步转换 源代码生成,Word表格生成Model ,文本格式化,差异对比

    数据库结构对比工具 支持 SqlServer Oracle MySql 相互对比同步 QQ群 434053880 有最新版本下载 1 CSDN 下载链接 不过要积分下载 SqlServer Oracle MySql数据库结构相互对比同步 m
  • 注意力机制学习(二)——空间注意力与pytorch案例

    文章目录 一 空间注意力机制简介 二 空间注意力与pytorch代码 三 使用案例 一 空间注意力机制简介 空间注意力的示意图如下 长条的是通道注意力机制 而平面则是空间注意力机制 可以发现 通道注意力在意的是每个特怔面的权重 空间注意力在
  • Spring框架Security(认证)快速上手

    在处理Spring安全框架时 通常可以选择Shiro或者Security 做认证授权加密等 推荐非SpringBoot 使用Shiro SpringBoot项目使用Security 学习网址 Security Shiro 目录 1 Spri
  • BUUCTF WEB [极客大挑战 2019]Secret File

    BUUCTF WEB 极客大挑战 2019 Secret File 启动后效果如下 F12查看源代码
  • unity中的碰撞和触发事件

    首先 unity中两个游戏对象发生碰撞的条件 1 两个游戏对象必须都有Collider碰撞器这个组件 2 至少有一个游戏对象包含刚体组件 3 两个游戏对象有相对运动 还应该知道跟碰撞事件相关的3个函数 void OnColliderEnte
  • 【Python】近似熵,样本熵,模糊熵计算高效版

    文章目录 前言 整体思路 1 近似熵 Approximate Entropy ApEn 1 1 理论基础 1 2 python第三方库实现 1 3 基于多线程numpy矩阵运算实现 2 样本熵 Sample Entropy SampEn 2
  • 在React中使用Typescript

    使用命令创建项目 生成一个全新的 ts react 的模版 可直接使用指令 npm create react app my app template typescript 该模板包含了全套正常运行React所需要的的包和配置 无需再额外手动