前言

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

准备

Webpack配置在第二小节项目的基础上做了一些修改,

添加React相关依赖:react、react-dom、@types/react 和@types/react-dom

修改Webpack配置文件

修改webpack.base.config.js,其余文件和第二小节保持一致,修改如下:

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
entry: {
'app': './src/index.tsx'
},
output: {
filename: '[name].[chunkhash:8].js'
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
optimization: { // 拆包
splitChunks: {
chunks: 'all'
}
}
}

  

我们把入口设置为index.tsx这是我们的React入口组件。

更改index组件

我们将第二小节中的index.ts修改如下:

// const hello: string = 'Hello TypeScripy'
// document.querySelectorAll('.app')[0].innerHTML = hello import React from 'react'
import ReactDom from 'react-dom' import Hello from './Hello' ReactDom.render(
<Hello name='Type'/>,
document.querySelectorAll('.app')[0]
)

  

Hello组件

import React from 'react'

interface Greeting {
name: string
} // 使用接口来限定props的类型 const Hello = (props: Greeting) => <div>Hello {props.name}</div> export default Hello

  

修改tsconfig.js文件

支持编译选项修改为 jsx: "react"

运行项目

npm start可以看到自己的项目已经运行起来。

项目的github地址: https://github.com/qixingduanyan/ts-react

大家可以自己配置Redux、Router以及异步请求中间件,比如redux-saga、redux-thunk

我自己也配置了一个简易的异步请求脚手架: https://github.com/qixingduanyan/typescript-react-app

总结

这篇文章主要是探讨React项目中使用TypeScript的方式,首先学以致用,才能去探究其中的原理。

如果你想要用TypeScript来做项目,那么这5小节应该可以使你写出比较标准的tsx代码,也应该明白了TypeScript的用法是什么。

我的博客地址:http://www.gaoyunjiao.fun/?p=140

深入浅出TypeScript(5)- 在React项目中使用TypeScript的更多相关文章

  1. React项目中应用TypeScript

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

  2. Vue项目中应用TypeScript

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

  3. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  4. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  5. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  6. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  7. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  8. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  9. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

随机推荐

  1. Chrome浏览器F12开发者工具简单使用

    1.如何调出开发者工具 按F12调出 右键检查(或快捷键Ctrl+Shift+i)调出 2.开发者工具初步介绍 chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Conso ...

  2. JSON在线格式化 jsoneditor使用

    const placeholder = { string: 'hello world!', boolean: true, color: '#6c928c', number: 123, null: nu ...

  3. RocketMQ中Broker的刷盘源码分析

    上一篇博客的最后简单提了下CommitLog的刷盘  [RocketMQ中Broker的消息存储源码分析] (这篇博客和上一篇有很大的联系) Broker的CommitLog刷盘会启动一个线程,不停地 ...

  4. 【C/C++】随机数的生成

    C/C++:rand()函数 rand()函数的头文件:#include<stdlib.h> 该函数产生的随机数随机性差,速度慢,周期小(0-32767) 用法如下所示: #include ...

  5. manifest.json 解析--手机web app开发笔记(三-2)

    四.SDK配置和模块权限配置 SDK 就是 Software Development Kit 的缩写,中文意思就是“软件开发工具包”,也就是辅助开发某一类软件的相关文档.范例和工具的集合都可以叫做“S ...

  6. Linux常用命令之压缩解压

    压缩是一种通过特定的算法来减小计算机文件大小的机制.这种机制对网络用户是非常有用和高效的,因为它可以减小文件的字节总数,使文件能够通过互联网实现更快传输,此外还可以减少文件的磁盘占用空间.下面简介下z ...

  7. js常见兼容性问题以及解决方法

    1.关于使用 event对象,出现的兼容性问题IE/Chrom: event.clientX;event.clientYFF/IE9以上/Chrom: 传参e   e.clientX;e.client ...

  8. js动态添加<tr><td>

    <form id="addNewsFormData" name="addNewsFormData" isCheck="true" ac ...

  9. Day 01--选题与设计(一)

    1.第一天我们主要确定了软件课设的项目,做一个学校内食堂订送餐的微信小程序.我们大体的设计思路是:可以实现学生身份的认证,幷使学生们能自行选择校园内的食堂,挑选各个食堂各个窗口菜谱上可以选择的菜,选择 ...

  10. [WPF自定义控件库] 给WPF一个HyperlinkButton

    1. 在WPF怎么在UI上添加超级链接 这篇文章的目的是介绍怎么在WPF里创建自定义的HyperlinkButton控件.很神奇的,WPF居然连HyperlinkButton都没有,不过它提供了另一种 ...