前言

第二小节中,我们讨论了利用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. SpringMVC学习笔记之---简单入门

    SpringMVC简单入门 (一)什么是MVC设计模式 (1)model:模型数据,业务逻辑 (3)view:呈现模型,与用户进行交互 (3)controller:负责接收并处理请求,响应客户端 (二 ...

  2. git bash 初始化配置

    这里只针对 windows 下,使用git 时的一些初始配置 1. git bash 安装 下载地址: https://git-for-windows.github.io/ 根据提示,一步步安装即可 ...

  3. exported function xxx should have comment or be unexported

    0x00 问题 exported function xxx should have comment or be unexported. 0x01 解决 https://golang.org/s/sty ...

  4. Java虚拟机详解(五)------JVM参数(持续更新)

    JVM参数有很多,其实我们直接使用默认的JVM参数,不去修改都可以满足大多数情况.但是如果你想在有限的硬件资源下,部署的系统达到最大的运行效率,那么进行相关的JVM参数设置是必不可少的.下面我们就来对 ...

  5. 2019牛客暑期多校训练营(第十场)F-Popping Balloons

    >传送门< 题意:现在给你n个点 ,让你横着划三条线间距为r 然后竖着划三条线间距同样为r ,求经过最多的点数 思路:比赛看到这题的时候觉得能做,但是一看时间限制是5s,搞得我有不敢去碰了 ...

  6. gin+vue的前后端分离开源项目

    该项目是gin+vue的前后端分离项目,使用gorm访问MySQL,其中vue前端是使用vue-element-admin框架简单实现的: go后台使用jwt,对API接口进行权限控制.此外,Web页 ...

  7. rocketMQ部署

    rocketMQ部署(单机) 1.          环境: CentOS7 64  &  JDK1.8+ 64  & 用户:www 2.          下载binary文件包: ...

  8. 终于找到可以一文多发的平台了! openwrite.cn

    openwrite.cn 一文多发平台 有时候自己辛苦写了几个小时的技术文章,被爬虫抓走.自己去全平台一个一个发,又过于麻烦.而且每个平台都不一样,发文同步很困难.那么终于有了一款一文多发的利器:Op ...

  9. java IO流 之 FIle类基础

    package IO; import java.io.File;import java.io.IOException; public class FileIO { /** * 构建及获取文件名信息 * ...

  10. js加密后台加密解密以及验证码

    该文档为转载内容: 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 ...