React 中使用 TS

目录

  • 1,搭建项目
  • 2,tsconfig.json 相关配置项
    • 1, lib
    • 2,module
    • 3,jsx
  • 3,在 React 中使用 TS
    • 3.1,TS 可以解决的问题
    • 3,2,函数式组件
    • 3.3,类组件
    • 3.4,Props 的默认值
      • 方法1
      • 方法2

1,搭建项目

选用 create-react-app@5.0.1 版本。

集成 typescript 的方法,create-react-app 文档中有介绍。运行如下命令即可:

npx create-react-app my-app --template typescript

2,tsconfig.json 相关配置项

compilerOptions 是编译选项,include 是编译目录。

{"compilerOptions": {"target": "es5", // 编译后的 js 版本。"lib": [ // 开发(写TS)时允许使用的库。"dom","dom.iterable","esnext"],"allowJs": true, // 允许在 ts 中引入 js 文件。"skipLibCheck": true, // 跳过对声明文件的类型检查。"esModuleInterop": true, // 启用 es 模块化交互,可以引入那些使用非 es 导出的模块。"allowSyntheticDefaultImports": true, // 和上面是匹配出现的。"strict": true, // 开启严格模式(统一将 strictNullChecks 等严格检查配置项都开启。)"forceConsistentCasingInFileNames": true, // 强制检查导入文件时,文件名的大小写需一致。"noFallthroughCasesInSwitch": true,"module": "esnext", // 设置编译结果中,使用的模块化标准。esnext 就是最新版"moduleResolution": "node", // 模块解析策略(查找文件的步骤)"resolveJsonModule": true, // 允许导入 json 文件,将其作为对象使用。"isolatedModules": true, // 将每一个文件都当做一个模块(每个文件中必须得有导出或导入语句,语法受 module 影响),"noEmit": true, // 不生成 js 文件,在内存中完成 ts-->js 的过程(因为后面还有 babel 处理)。"jsx": "react-jsx" // 如何处理 jsx 语法。},"include": ["src"]
}

esModuleInteropmoduleResolution 的含义都可以看这篇文章。

1, lib

1,dom,允许使用 DOM 环境下的对象,比如 document 对象

2,dom.iterable,允许使用 dom 对象的迭代器。

es6 之后,新增了一个内置对象 Symbol,它是基本数据类型。同时还有一些静态属性,其中之一就是 Symbol.iterator 。

for…of 就是用于循环可迭代的对象。换句话说,只要对象有迭代器才能使用 for…of 循环。比如常见的:字符串,ArrayMapSet ,DOM 对象等。

但 ts 限制的更加严格,默认情况下,for...of 只能循环字符串和Array,如果想循环其他的对象,需要增加配置选项:"downlevelIteration": true

3,esnext,允许使用最新版的 js。

2,module

注意,脚手架搭建的项目中,是使用 webpack + ts + babel 来联合处理的:

1,webpack 加载 ts --> 2,typescript 编译 ts 为 js --> 3,babel 将高版本 js 编译为低版本的。

module 选项影响的是第2步。所以项目最终打包的结果中 js 并不是 module 指定的最新版 js。

3,jsx

表示 ts 如何处理 jsx 语法。注意处理完成后的 js 文件还是会交给 babel 处理。

ts官方文档

ModeInputOutputOutput File Extension
preserve<div /><div />.jsx
react<div />React.createElement("div").js
react-native<div /><div />.js
react-jsx<div />_jsx("div", {}, void 0);.js
react-jsxdev<div />_jsxDEV("div", {}, void 0, false, {...}, this);.js

3,在 React 中使用 TS

3.1,TS 可以解决的问题

  1. 组件有哪些属性可以传递,属性的类型是什么;
  2. 事件传递时的参数;
  3. 运行时的错误。
    虽然可以通过 propTypes 约束属性的类型,但这是在运行时才能发现。而 TS 是一套静态的类型系统,所以在开发时就能发现错误。

3,2,函数式组件

interface IProps {num: number;onChange?: (num: number) => void;
}export const CompCount: React.FC<IProps> = function (props) {return (<div><buttononClick={() => {if (props.onChange) {props.onChange(props.num - 1);}}}>减一</button><span>{props.num}</span></div>);
};

其中 React.FC 是一个类型别名,用于约束函数式组件的,泛型 P 是 Props 的类型。

type FC<P = {}> = FunctionComponent<P>;

所以也可以直接写:

import { FunctionComponent } from "react";
export const CompCount: FunctionComponent<IProps> = function (props) {}

或者,用TS基础的类型约束方式:

export function CompCount(props:IProps) {}

3.3,类组件

import React from "react";interface IProps {num: number;onChange?: (num: number) => void;
}interface IState {msg: string;desc: string;
}export class CompCount extends React.Component<IProps, IState> {state = {msg: "init",desc: "",};render() {return (<div><buttononClick={() => {if (this.props.onChange) {this.props.onChange(this.props.num - 1);}}}>减一</button><span>{this.props.num}</span></div>);}
}

其中 React.Component 是类组件的接口,用于约束类组件。泛型 P 是 Props 的类型,S 是 State 的类型。

interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}

3.4,Props 的默认值

方法1

因为 Props 通过接口约束了,可接口无法指定字段的默认值。可通过组件的 defaultProps 属性来指定。

FunctionComponent 接口定义的字段:

interface FunctionComponent<P = {}> {(props: P,deprecatedLegacyContext?: any,): ReactNode;propTypes?: WeakValidationMap<P> | undefined;contextTypes?: ValidationMap<any> | undefined;defaultProps?: Partial<P> | undefined;displayName?: string | undefined;
}

步骤:

1,把要赋默认值的字段改成可选的。
2,,设置组件的 defaultProps 属性,指定默认值即可。

interface IProps {num?: number;
}export const CompCount: React.FC<IProps> = function (props) {return (<div>{props.num! - 1}</div>);
};CompCount.defaultProps = {num: 2,
};

此时会有一个问题,这个 num 可能为 undefined,所以需要使用非空断言 !

num! // 表示 num 一定不是 null 或 undefined// 或重新定义一个变量来使用。
const _num = props.num as number

方法2

其他通过指定 defaultProps 的方式,React 已经不推荐了(当前测试版本 v18.3.1),更推荐使用解构赋值的方式,直接指定默认值。

interface IProps {num?: number; // 注意同样得设置为可选属性。onChange?: (num: number) => void;
}export const CompCount: React.FC<IProps> = function ({num = 2, onChange}) {return (<div>{num - 1}</div>);
};

以上。

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

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

相关文章

#ESP32S3R8N8建立工程(VSCODE)点亮LED

1.参考文档 【立创ESP32S3R8N8】IDF入门手册 - 飞书云文档 (feishu.cn)https://lceda001.feishu.cn/wiki/GOIlwwfbIi1SC3k8594cDeFVn8g 2.建立工程 3.运行效果 4.更改配置 5.插播 之前配置的环境是有问题的&#xff0c;就算有自动检测也要仔细检查&#xff0c;必须严格按照以…

VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

问题&#xff1a;最近准备使用VMware虚拟机搭建k8s集群服务&#xff0c;因为需要在同一个网段下&#xff0c;我使用桥接的方式&#xff0c;我发现主机在使用有线连接时虚拟机网络连接正常&#xff0c;但是使用无线网就显示连接不上网络。 解决方法 一、查看网络连接&#xff…

aardio封装库) 微软开源的js引擎(ChakraCore)

前言 做爬虫肯定少不了JavaScript引擎的使用&#xff0c;比如在Python中现在一般用pyexecjs2来执行JavaScript代码&#xff0c;另外还有一些其他执行JavaScript的库&#xff1a; https://github.com/eight04/node_vm2: rpc调用nodejs&#xff0c;需要安装nodehttps://github.…

Spring Data JPA数据批量插入、批量更新真的用对了吗

Spring Data JPA系列 1、SpringBoot集成JPA及基本使用 2、Spring Data JPA Criteria查询、部分字段查询 3、Spring Data JPA数据批量插入、批量更新真的用对了吗 前言 在前两篇文章已经介绍过&#xff0c;在使用Spring Data JPA时&#xff0c;DAO层的Respository通过继承J…

BigKey的危害

1.2.1、BigKey的危害 网络阻塞 对BigKey执行读请求时&#xff0c;少量的QPS就可能导致带宽使用率被占满&#xff0c;导致Redis实例&#xff0c;乃至所在物理机变慢 数据倾斜 BigKey所在的Redis实例内存使用率远超其他实例&#xff0c;无法使数据分片的内存资源达到均衡 Redis阻…

Python中动画显示与gif生成

1. 动画生成 主要使用的是 matplotlib.animation &#xff0c;具体示例如下&#xff1a; import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np fig, ax plt.subplots() t np.linspace(0, 3, 40) g -9.81 v0 12 z g * t**2 / …

等保测评多选模拟题

21、以下哪些是黑客攻击手段&#xff1f;_____&#xff08;ABCDEFG&#xff09; A、暴力猜测 B、利用已知漏洞攻击 C、特洛伊木马 D、拒绝服务攻击 E、缓冲区溢出攻击 F、嗅探sniffer G、社会工程 22、计算机病毒的特点有_____。&#xff08; CD …

NFT是什么?有什么用途?

NFT&#xff0c;即非同质化代币&#xff08;Non-Fungible Token&#xff09;&#xff0c;是Web3技术的另一个重要应用。与比特币这样的同质化加密货币不同&#xff0c;NFT是独一无二的&#xff0c;每个代币都代表了一个独特的资产或物品。NFT通常基于区块链技术&#xff0c;如以…

新建stm32工程模板步骤

1.先使用keil新建一个project的基本代码 2.stm32启动文件添加 将stm32的启动文件&#xff0c;在原工程当中新建一个Start文件夹把相关的启动文件放到文件夹当中 然后还需要找到下面三个文件 stm32f10x.h是stm32的外设寄存器的声明和定义&#xff0c;后面那两个文件用于配置系…

深度学习 简记

深度学习个人学习简明笔记 待更新 文章目录 1 深度学习概论1.1 基本概念1.2 分类1.3 主要应用 2 神经网络基础2.1 神经网络组成2.2 前向传播与反向传播2.3 超参数2.4 激活函数2.5 优化方法2.5.1 基本梯度下降方法2.5.2 动量梯度下降2.5.3 Adam优化器 3 卷积神经网络(CNN)3.1 基…

【打工日常】Docker部署一款开源和自托管的平铺图像板系统

一、项目介绍1.项目简述Teedy是一个面向个人和企业的开源轻量级文档管理系统。2.项目功能保持组织:一个现代的界面,以保持您的重要文件在一个地方,您的业务操作清晰。上传&搜索:不要花费时间使用该工具,只需上传文档,然后在需要时轻松找到。安全:加密和数据中心将确…

【Docker】搭建一个媒体服务器插件后端API服务 - MetaTube

【Docker】搭建一个媒体服务器插件后端API服务 - MetaTube 前言 本教程基于群晖的NAS设备DS423的docker功能进行搭建&#xff0c;DSM版为 7.2.1-69057 Update 5。 简介 MetaTube 是一个媒体服务器插件&#xff0c;主要用于 Emby 和 Jellyfin 媒体服务器。它的主要功能是从互…

Java 笔记 11:Java 方法相关内容

一、前言 记录时间 [2024-05-01] 系列文章简摘&#xff1a; Java 笔记 01&#xff1a;Java 概述&#xff0c;MarkDown 常用语法整理 Java 笔记 02&#xff1a;Java 开发环境的搭建&#xff0c;IDEA / Notepad / JDK 安装及环境配置&#xff0c;编写第一个 Java 程序 Java 笔记 …

C++之const用法小结

在C中&#xff0c;const关键字具有多种用法&#xff0c;主要用于声明常量&#xff0c;确保某些变量的值在程序运行期间不会被修改。以下是const在C中的一些常见用法&#xff1a; 1.声明常量&#xff1a; 使用const声明的变量是常量&#xff0c;其值在初始化后不能再被修改。 …

OneFlow 概念清单

OneFlow 概念清单 引言 在深度学习框架的丰富生态中&#xff0c;OneFlow 以其独特的架构设计和优化方法吸引了众多研究者和开发者的关注。本文旨在梳理 OneFlow 的核心概念&#xff0c;帮助初学者快速理解其设计理念和使用方法。我们将从基本概念入手&#xff0c;逐步深入到高…

在 PHP中使用 Redis 缓存的方法有哪些

在 PHP 中使用 Redis 作为缓存的方法非常多样化&#xff0c;因为 Redis 提供了丰富的数据结构和命令集。以下是一些常见的 PHP 中使用 Redis 缓存的方法&#xff1a; 字符串缓存 Redis 最基本的数据结构是字符串&#xff08;string&#xff09;&#xff0c;你可以用它来缓存简…

【数据结构】链表专题2

前言 本篇博客继续探讨有关链表的专题&#xff0c;这片博客的题&#xff0c;提前打个预防针&#xff0c;有点意思哦&#xff0c;哈哈哈&#xff0c;话不多说&#xff0c;进入正文 &#x1f493; 个人主页&#xff1a;小张同学zkf ⏩ 文章专栏&#xff1a;数据结构 若有问题 评论…

ASP.NET淘宝店主交易管理系统的设计与实现

摘 要 淘宝店主交易管理系统主要采用了ASPACCESS的B/S设计模式&#xff0c;通过网络之间的数据交换来实现客户、商品、交易的管理和对客户、商品、交易统计工作&#xff0c;从而提高淘宝店主在管理网店过程中的工作效率和质量。 系统分为基本资料模块&#xff0c;统计资料模…

“大唐杯”基础知识(部分)

DL&#xff1a;下载 UL&#xff1a;上行链路 在5G系统中&#xff1a;2.1GHZ DL最大4流&#xff0c;UL最大2流&#xff1b;700MHZ DL最大2流&#xff0c;UL最大1流 在5G系统中&#xff1a;在手机开机流程中&#xff0c;负责业务承载建立的过程是PDU会话建立过程 NR中支持基础的4…

北京大学肖臻老师《区块链技术与应用》P14(ETH概述)和P15(ETH账户)

1️⃣ 参考 北京大学肖臻老师《区块链技术与应用》 P14 - ETH概述篇P15 - ETH账户篇 1️⃣4️⃣ETH概述 ① 比特币与以太坊的对比 比特币&#xff08;区块链 1.0&#xff09;以太坊&#xff08;区块链 2.0&#xff09;出块时间大约10 min十几秒mining puzzle计算密集型Memo…