在 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 ...
随机推荐
- Ubuntu14.04安装tomcat-9.0.1的教程
系统环境:Ubuntu14.04 Tomcat安装版本:Apache tomcat 9.0.1 下载地址:http://tomcat.apache.org/download-90.cgi 安装包:ap ...
- 手把手教你搭建 ELK 实时日志分析平台
本篇文章主要是手把手教你搭建 ELK 实时日志分析平台,那么,ELK 到底是什么呢? ELK 是三个开源项目的首字母缩写,这三个项目分别是:Elasticsearch.Logstash 和 Kiban ...
- java开发JSP+Servlet+bootstrap开发电影院购票系统 源码
基于JSP+Servlet+bootstrap开发电影院购票系统:开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+Mysql数据库 程序要求:电影院订票系统 用 ...
- 【iOS】Spring Animations (弹性动画)
This interface shows how a spring animation can be created by specifying a “damping” (bounciness) an ...
- 面试官:你用过mysql哪些存储引擎,请分别展开介绍一下
这是高级开发者面试时经常被问的问题.实际我们在平时的开发中,经常会遇到的,在用SQLyog等工具创建表时,就有一个引擎项要你去选.如下图: Mysql的存储引擎有这么多种,实际我们在平时用的最多的莫过 ...
- Linux报错:rm: cannot remove 'xxx': Is a directory
rm: cannot remove 'xxx': Is a directory表示这个文件是无法remove移除的,因此我们不能仅使用rm来将这个文件夹进行删除,需要使用: rm -rf 命令则可以将 ...
- 【HDU - 1029】Ignatius and the Princess IV (水题)
Ignatius and the Princess IV 先搬中文 Descriptions: 给你n个数字,你需要找出出现至少(n+1)/2次的数字 现在需要你找出这个数字是多少? Input ...
- 邓士鹏【MySql大全】
禁止使用系统关键字: typename 1.计算两个日期的时间差函数 SELECT TIMESTAMPDIFF(MONTH,'2009-10-01','2009-09-01'); interval可是 ...
- Git操作:一次性强制push所有分支
现在手上有两个分支,master和rotation,想一次性推送所有分支,可以用--all参数来实现: git push --all origin 如果远程仓库有更改,但你需要直接推送,那就可以使用强 ...
- Angularjs集成于ASP.NET MVC数据绑定重构
这几天,对程序重构,主要针对angularjs的绑定: 第一个例子: 下面是一段html程序: 不管是name或者是ng-model的属性值,它都有一定规律"StartX"和&qu ...