前言

  用 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的更多相关文章

  1. 在React中使用Typescript的实践问题总结

    1.布尔值的大小写问题: 声明变量类型的时候,使用小写boolean 2. 对于从父组件传递过来的函数,子组件在模版中调用时,如果采用原来的写法,会报错: 改变写法后是如下这样,如果有参数和函数返回值 ...

  2. react中使用typescript时,error: Property 'setState' does not exist on type 'Home'

    问题描述: 我在react中用typescript时,定义一个Home组件,然后在组件里用setState时会有这样一个报错:(如图)Property 'setState' does not exis ...

  3. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  4. React项目中应用TypeScript

    一.前言 单独的使用typescript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的 例如和vue.react 这些框架结合使用的时候,会有一定的门槛 使用 TypeScri ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. 在ReactNative中使用Typescript

    在ReactNative中使用Typescript 少侠放心,跟着我的这个步骤走,保你完美在RN项目中使用Typescript,废话不多说,走你 1.全局安装create-react-native-a ...

  7. React 中的 onInput/onChange

    参考链接:https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and ...

  8. 解读vue-server-renderer源码并在react中的实现

    前言 ​ 在博客开发的过程中,有这样一个需求想解决,就是在SSR开发环境中,服务端的代码是是直接通过webpack打包成文件(因为里面包含同构的代码,就是服务端与客户端共享前端的组件代码),写到磁盘里 ...

  9. Vue项目中应用TypeScript

    一.前言 与如何在React项目中应用TypeScript类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-c ...

随机推荐

  1. [Linux]命令返回值以及错误对照表

    Linux执行完命令之后默认会有一个返回值 # ls app backupconfig.json Doc manage.py __pycache__ settings.py # echo $? 0 错 ...

  2. node准备

    === 原生的api === express express  中间件相关的. https://juejin.im/post/5aa345116fb9a028e52d7217 推荐几篇入门的优质博客: ...

  3. Learning links

    技术文档.API 和代码示例 _ Microsoft Docs _NET 文档 _ Microsoft Docs TutorialsTeacher_C# 菜鸟教程_C# 圣殿骑士<博客园精华集& ...

  4. Java连载73-String方法简介

    一.字符串常用的方法 package com.bjpowernode.java_learning; ​ public class D73_StringMethodBriefIntroduction { ...

  5. MySQL基础(1) | 数据类型

    MySQL基础(1) | 数据类型 数值类型 TINYINT #小整数值,1 字节,有符号(-128,127),无符号(0,255) SMALLINT #大整数值,2 字节 MEDIUMINT #大整 ...

  6. 【python基础语法】第5天作业练习题

    import random """ 1.一家商场在降价促销.如果购买金额50-100元(包含50元和100元)之间,会给10%的折扣(打九折), 如果购买金额大于100元 ...

  7. MAC使用命令行解压rar

    使用homebrew安装unrar brew install unrar 安装完成后cd到rar文件目录,使用终端命令解压 unrar x 需要解压的文件

  8. 搭建wordpress博客

    环境说明 操作系统: CentOS 7.2 64位 1. 准备LAMP环境 LNMP 是 Linux.Nginx.MySQL 和 PHP 的缩写,是 WordPress 博客系统依赖的基础运行环境.我 ...

  9. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

  10. Redis 安装 (未)

    Redis 安装步骤 1. 下载地址 2.  版本选择 3.  配置主要参数 4.  关联操作