【黑马TS】学习资料Day4

五、在 React 中使用 TypeScript

现在,我们已经掌握了 TS 中基础类型、高级类型的使用了。但是,如果要在前端项目开发中使用 TS,还需要掌握
React、Vue、Angular 等这些库或框架中提供的 API 的类型,以及在 TS 中是如何使用的。
接下来,我们以 React 为例,来学习如何在 React 项目中使用 TS。包括以下内容:

  1. 使用 CRA 创建支持 TS 的项目
  2. TS 配置文件 tsconfig.json
  3. React 中的常用类型

5.1 使用 CRA 创建支持 TS 的项目

React 脚手架工具 create-react-app(简称:CRA)默认支持 TypeScript。
创建支持 TS 的项目命令:npx create-react-app 项目名称 --template typescript

更多:在已有项目中使用TS

在这里插入图片描述

在这里插入图片描述

5.2 TS配置文件tsconfig.json

在这里插入图片描述
在这里插入图片描述

5.3 React 中的常用类型(函数组件

在这里插入图片描述
在这里插入图片描述

1. 函数组件的类型和组件属性

写法1:

type Props = { name: string; age?: number };const Hello: React.FC<Props> = ({ name, age }) => (// FC是function Component// 指定组件能够接受的属性<div>Hello姓名是:{name} 年龄是:{age}</div>
);export default Hello;
import Hello from "./Hello";const Test = () => {return <Hello name="slx" />;
};export default Test;

写法2:不用类型别名,用接口也可以

// 不用类型别名,用接口也可以
interface Props {name: string;age?: number;
}
const Hello: React.FC<Props> = ({ name, age }) => (// FC是function Component// 指定组件能够接受的属性<div>Hello姓名是:{name} 年龄是:{age}</div>
);export default Hello;

写法3:实际上,还可以直接简化为(完全按照函数在 TS 中的写法)

interface Props {name: string;age?: number;
}// 或者改成 为函数参数声明类型
const Hello = ({ name, age }: Props) => (<div>Hello姓名是:{name} 年龄是:{age}</div>
);export default Hello;

2. 函数组件属性的默认值

interface Props {name: string;age?: number;
}const Hello = ({ name, age }: Props) => (<div>Hello姓名是:{name} 年龄是:{age}</div>
);
Hello.defaultProps = { age: 0 };
export default Hello;

实际上,还可以直接简化为(完全按照函数在 TS 中的写法)

const Hello = ({ name, age=0 }: Props) => (<div>Hello姓名是:{name} 年龄是:{age}</div>
);

3. 事件绑定 和 事件对象

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/354510.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Redis提高查询性能(保持数据一致性)

Redis实战篇 | Kyles Blog (cyborg2077.github.io) 目录 背景 商户查询缓存(根据ID查询&#xff09; 根据店铺类型查询&#xff08;List型&#xff09; 缓存更新策略&#xff08;保证数据一致性&#xff09; 案例&#xff08;利用缓存更新策略&#xff09; 背景 起初客户端…

Hadoop3:MapReduce中的Shuffle机制

一、流程图 Shuffle是Map方法之后&#xff0c;Reduce方法之前的数据处理过程称。 二、图解说明 1、数据流向 map方法中context.write(outK, outV);开始&#xff0c;写入环形缓冲区&#xff0c;再进行分区排序&#xff0c;写到磁盘 reduce方法拉取磁盘上的数据&#xff0c;…

JavaSE 面向对象程序设计高级 方法引用 2024详解

在编程中&#xff0c;方法引用&#xff08;Method Reference&#xff09;是一种技术&#xff0c;它让你能够直接引用一个现有的函数或方法&#xff0c;而无需通过对象实例来调用。这种方法在函数式编程和高阶函数中非常有用&#xff0c;因为它提供了简洁的方式来传递函数行为&a…

【归档】maven的使用

学习自波波酱老师SSM企业级框架最全教学视频 maven篇 maven的设置 <?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&qu…

【ARMv8/ARMv9 硬件加速系列 3 -- SVE 硬件加速向量运算 1】

文章目录 SVE 使用介绍SVE 特点SVE2 特点 SVE 寄存器扩展的向量寄存器可扩展的谓词寄存器.d 与 .b 后缀的区别举例介绍使用 .d 后缀进行64位元素操作使用 .b 后缀进行8位元素操作 ptrue 指令小结 FFR 寄存器 SVE 使用介绍 前面文章:【ARMv8/ARMv9 硬件加速系列 1 – SVE | NEO…

AttributeError: module ‘numpy‘ has no attribute ‘int‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

C++ Windows Hook使用

GitHub - microsoft/Detours: Detours is a software package for monitoring and instrumenting API calls on Windows. It is distributed in source code form. /*挂载钩子 setdll /d:C:\Users\g\source\repos\LotTest\Release\lotDll.dll C:\Users\g\source\repos\LotTest…

React 通信:深层传递(Props、Context、Children Jsx)

在之前的文章 探讨&#xff1a;围绕 props 阐述 React 通信 中总结了关于“父子”组件传值&#xff0c;但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时&#xff0c;传递 props 就会变得很麻烦。 实际案例&#xff1a; 下述展示有两种状态&#xff1a;① 详…

【无线传感网】LEACH路由算法

1、LEACH路由算法简介 LEACH协议,全称是“低功耗自适应集簇分层型协议” (Low Energy Adaptive Clustering Hierarchy),是一种无线传感器网络路由协议。基于LEACH协议的算法,称为LEACH算法。 2、LEACH路由算法的基本思想 LEACH路由协议与以往的路由协议的不同之处在于其改变…

<Rust><iced>基于rust使用iced构建GUI实例:如何将svg格式转为ico格式图片?

前言 本专栏是Rust实例应用。 环境配置 平台:windows 软件:vscode 语言:rust 库:iced、iced_aw 概述 本文是专栏第4篇实例,依旧是一个图像格式转换程序,基于rust的svg库resvg、图像处理库image以及文件处理库rfd。 流程是先用resvg获取svg图片的数据并将其转为png数据…

嵌入式实验---实验一 通用GPIO实验

一、实验目的 1、掌握STM32F103 GPIO程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、通过按键实现&#xff1a;按键按下&#xff0c;LED点亮&#xff1b;按键释放&#xff0c;LED熄灭。 三、实验设备和器材 电脑、Keil uVision5软件、Proteus…

清凉夏日运动新选择——气膜体育馆—轻空间

随着气温的不断攀升&#xff0c;夏天成为许多运动爱好者的挑战季节。炎热的天气不仅容易让人感到疲倦&#xff0c;更可能带来中暑等健康风险。然而&#xff0c;气膜体育馆的出现&#xff0c;为爱好运动的你提供了一个理想的避暑之地。气膜体育馆以其独特的结构和诸多优势&#…

【ARM】如何通过Keil MDK查看芯片的硬件信息

【更多软件使用问题请点击亿道电子官方网站】 1、文档目标&#xff1a; 解决在开发过程中对于开发项目所使用的的芯片的参数查看的问题 2、问题场景&#xff1a; 在项目开发过程中&#xff0c;经常需要对于芯片的时钟、寄存器或者一些硬件参数需要进行确认。大多数情况下是需…

【科研基础】通感一体化讲座

通信和感知在硬件结构上相似&#xff0c;高效地利用资源&#xff0c;实现相互的增益&#xff1b; 感知是基于不同的任务&#xff0c;比如

从零开始的<vue2项目脚手架>搭建:vite+vue2+eslint

前言 为了写 demo 或者研究某些问题&#xff0c;我经常需要新建空项目。每次搭建项目都要从头配置&#xff0c;很麻烦。所以我决定自己搭建一个项目初始化的脚手架&#xff08;取名为 lily-cli&#xff09;。 脚手架&#xff08;scaffolding&#xff09;&#xff1a;创建项目时…

MaxWell实时监控Mysql并把数据写入到Kafka主题中

配置mysql 启用MySQL Binlog MySQL服务器的Binlog默认是未开启的&#xff0c;如需进行同步&#xff0c;需要先进行开启 修改MySQL配置文件/etc/my.cnf sudo vim/etc/my.cof 增加如下配置 注&#xff1a;MySQL Binlog模式 Statement-based&#xff1a;基于语句&#xff0c;…

通过sql语句直接导出excel文件

SELECT column1 as 名字 FROM your_table INTO OUTFILE /path/to/your_file.csv FIELDS TERMINATED BY , ENCLOSED BY " LINES TERMINATED BY \n 这里的注意事项是&#xff0c;INTO OUTFILE 这后面的路径需要通过下面的SQL查出来 show variables like %secure%; 操作步骤…

Windows桌面运维----第四天

1、U盘故障打不开&#xff1a; 操作方式&#xff1a;WinR打开运行&#xff0c;输入cmd确定&#xff0c;在&#xff08;C:\Users\Administrator>&#xff09;后输入chkdsk,空格&#xff0c;输入U盘盘符&#xff0c;例如F:/F&#xff0c;回车&#xff0c;等待修复完成。 2、…

密码学及其应用——为什么选择接近的质数因子对RSA加密算法不安全?

RSA加密算法是一种广泛使用的非对称加密算法&#xff0c;它的安全性依赖于大整数分解的难度。具体来说&#xff0c;RSA算法生成的公钥包含一个大整数N&#xff0c;这是两个大质数p和q的乘积。然而&#xff0c;如果这两个质数p和q太接近&#xff0c;则可以相对容易地对N进行因式…

汽车IVI中控开发入门及进阶(三十一):视频知识扫盲

有效的视频资源管理需要集成许多不同的底层技术,共同为用户提供给定应用程序的最佳体验。其中许多技术是从早期电视广播中使用的技术演变而来的。其他方法,如用于通过网络流式传输视频的压缩方法,相对较新且不断发展。 以下详细概述了与图形和视频处理和传输相关的一些基本…