在 React 中使用 Typescript
前言
用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松的实现重构。
顺便一提:全局安装的 create-react-app 现已无法再下载完整的 React 项目模版,必须先 npm uninstall -g create-react-app 移除命令 再 npx create-react-app demo 下载模版,参考 create-react-app 官方github
主要步骤
1. 生成一个全新的 ts + react 的模版 可直接使用指令:npx create-react-app demo --typescript,注意在未来的版本中该指令会被替换为 npx create-react-app demo --template typescript,该模版包含了全套正常运行 React 所需的包和配置,无需再额外手动安装 typescript 等,其中还包含了自动化测试文件以及PWA所需文件等,可自行根据需求增删。
如在已有项目中使用typescript,需要手动安装 typescript @types/react @types/react-dom(使用@types/前缀表示我们额外要获取React和React-DOM的声明文件),然后在根目录下创建一个 tsconfig.json 文件,改后缀为 .tsx
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
2. 使用各种第三方库,如路由库 react-router-dom(需要额外安装声明文件@types/react-router-dom)、状态管理库 react-redux(需要额外安装声明文件@types/react-redux)、axios、在typescript中使用antd等。
基本使用方法
1. 类组件写法
import React from 'react' interface Props {
endDate: string,
timeout: any
}
interface State {
now: any
}
let timer: any = null
class CountDown extends React.Component<Props, State>{
readonly state: Readonly<State> = {
now: moment()
} componentDidMount(){
timer = setInterval((): void => {
this.setState({
now: moment()
})
}, 1000)
}
componentWillUnmount(){
clearInterval(timer)
} get countDown(){ //类似 vue 中的计算属性
return (endDate: string): string => {
//...
}
}
} render(): any{
return (
......
)
}
} export default CountDown
2. 函数组件写法
const App: React.FC<Prop> = (prop) => {
return ()
}
在 React 中使用 Typescript的更多相关文章
- 在React中使用Typescript的实践问题总结
1.布尔值的大小写问题: 声明变量类型的时候,使用小写boolean 2. 对于从父组件传递过来的函数,子组件在模版中调用时,如果采用原来的写法,会报错: 改变写法后是如下这样,如果有参数和函数返回值 ...
- react中使用typescript时,error: Property 'setState' does not exist on type 'Home'
问题描述: 我在react中用typescript时,定义一个Home组件,然后在组件里用setState时会有这样一个报错:(如图)Property 'setState' does not exis ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- React项目中应用TypeScript
一.前言 单独的使用typescript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的 例如和vue.react 这些框架结合使用的时候,会有一定的门槛 使用 TypeScri ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- 在ReactNative中使用Typescript
在ReactNative中使用Typescript 少侠放心,跟着我的这个步骤走,保你完美在RN项目中使用Typescript,废话不多说,走你 1.全局安装create-react-native-a ...
- React 中的 onInput/onChange
参考链接:https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and ...
- 解读vue-server-renderer源码并在react中的实现
前言 在博客开发的过程中,有这样一个需求想解决,就是在SSR开发环境中,服务端的代码是是直接通过webpack打包成文件(因为里面包含同构的代码,就是服务端与客户端共享前端的组件代码),写到磁盘里 ...
- Vue项目中应用TypeScript
一.前言 与如何在React项目中应用TypeScript类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-c ...
随机推荐
- [Linux]命令返回值以及错误对照表
Linux执行完命令之后默认会有一个返回值 # ls app backupconfig.json Doc manage.py __pycache__ settings.py # echo $? 0 错 ...
- node准备
=== 原生的api === express express 中间件相关的. https://juejin.im/post/5aa345116fb9a028e52d7217 推荐几篇入门的优质博客: ...
- Learning links
技术文档.API 和代码示例 _ Microsoft Docs _NET 文档 _ Microsoft Docs TutorialsTeacher_C# 菜鸟教程_C# 圣殿骑士<博客园精华集& ...
- Java连载73-String方法简介
一.字符串常用的方法 package com.bjpowernode.java_learning; public class D73_StringMethodBriefIntroduction { ...
- MySQL基础(1) | 数据类型
MySQL基础(1) | 数据类型 数值类型 TINYINT #小整数值,1 字节,有符号(-128,127),无符号(0,255) SMALLINT #大整数值,2 字节 MEDIUMINT #大整 ...
- 【python基础语法】第5天作业练习题
import random """ 1.一家商场在降价促销.如果购买金额50-100元(包含50元和100元)之间,会给10%的折扣(打九折), 如果购买金额大于100元 ...
- MAC使用命令行解压rar
使用homebrew安装unrar brew install unrar 安装完成后cd到rar文件目录,使用终端命令解压 unrar x 需要解压的文件
- 搭建wordpress博客
环境说明 操作系统: CentOS 7.2 64位 1. 准备LAMP环境 LNMP 是 Linux.Nginx.MySQL 和 PHP 的缩写,是 WordPress 博客系统依赖的基础运行环境.我 ...
- css的网页布局案例
常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...
- Redis 安装 (未)
Redis 安装步骤 1. 下载地址 2. 版本选择 3. 配置主要参数 4. 关联操作