初始化

mkdir project-dir
cd project-dir
yarn init -y

安装依赖

yarn add react react-dom
yarn add -D typescript @types/react @types/react-dom

配置tsconfig.json

npx tsc --init

将 compilerOptions 下的 jsx 项配置成 react

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"strict": true,
"esModuleInterop": true
}
}

配置webpack文件

yarn add -D webpack webpack-cli html-webpack-plugin webpack-merge webpack-dev-server
yarn add -D awesome-typescript-loader source-map-loader

webpack.common.js

// webpack/webpack.common.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); const htmlTemplate = new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
}) const config = {
entry: path.resolve(__dirname, '../src/index.tsx'),
output: {
path: path.resolve(__dirname, '../src', 'dist')
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
htmlTemplate,
]
} module.exports = config;
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>typescript in react</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

webpack.dev.js

// webpack/webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common'); module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, "../dist"),
compress: true,
port: 9000,
open: true,
}
})

开始玩吧

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './hello'; ReactDOM.render(<Hello name={'Typescript'} />, document.getElementById('app')); // src/hello.tsx
import React, { PureComponent } from 'react'; interface HelloProps {
name: string;
} export default class Hello extends PureComponent {
constructor(public props: HelloProps) {
super(props);
} render() {
const { name } = this.props;
return (
<h1>Hello {name}</h1>
);
}
}

项目地址

https://github.com/zheng-chuang/typescript-in-react

使用typescript开发react应用的更多相关文章

  1. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

  2. React Hooks Typescript 开发的一款 H5 移动端 组件库

    CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...

  3. 从零搭建TypeScript与React开发环境

    前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架.   我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...

  4. 使用TypeScript开发ReactNative应用的简单示例

    最近小小尝试了下 ReactNative + TypeScript 开发APP,爬了无数坑之后总算弄出来个结果,重要的地方记录下,后面会附上示例代码: 1.开发工具的选择 windows 平台我接触的 ...

  5. 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上

    写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...

  6. 001——Typescript 介绍 、Typescript 安 装、Typescript 开发工具

    一. Typescript 介绍 1. TypeScript 是由微软开发的一款开源的编程语言. 4. TypeScript 是 Javascript 的超级,遵循最新的 ES6.Es5 规范.Typ ...

  7. 使用TypeScript创建React Native

    ⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm i ...

  8. 使用 VS Code 搭建 TypeScript 开发环境

    使用 VS Code 搭建 TypeScript 开发环境 TypeScript 是 JavaScript 的超集,TypeScript 只是增强了 JavaScript 而非改变了 JavaScri ...

  9. 开始使用 TypeScript 和 React

    原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...

随机推荐

  1. ubuntu sudo 和su的区别

    ubuntu用户管理 sudo意思就是super-user do,让当前用户暂时以管理员的身份root来执行这条命令. su是用来改变当前用户的,su root,就是将当前用户切换为root,用了su ...

  2. 去掉A标签的虚线框

    outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...

  3. android系统特效详解和修改方法

    安卓系统特效相关文件:  存在于:framework-res.apk   反编译后的\framework-res\res\anim文件夹内!anim文件夹下所有的文件都是特效文件原理  反编译fram ...

  4. python如何获取公众号下面粉丝的openid

    如何获取公众号下面粉丝的openid呢,首先要获取一个access_token,这个token可不是令牌(Token),如何获取这个access_token呢?有两种方法,方法如下: # -*- co ...

  5. android中文字中间有超链接的实现方法

      1.XML里写: <resources> <string name="ACCOUNT_REGISTER_PROMPT_AGREEMENT">点击注册,表 ...

  6. stm32 堆和栈(stm32 Heap & Stack)

    关于堆和栈已经是程序员的一个月经话题,大部分有是基于os层来聊的. 那么,在赤裸裸的单片机下的堆和栈是什么样的分布呢?以下是网摘: 刚接手STM32时,你只编写一个 int main() { whil ...

  7. Python 算法(2) 哈夫曼编码 Huffman Encoding

    这个问题原始是用来实现一个可变长度的编码问题,但可以总结成这样一个问题,假设我们有很多的叶子节点,每个节点都有一个权值w(可以是任何有意义的数值,比如它出现的概率),我们要用这些叶子节点构造一棵树,那 ...

  8. Mongodb与mysql语法比较

    Mongodb与mysql语法比较   mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由 ...

  9. unity, RT .DiscardContents ()导致android上RT不显示

    RT .DiscardContents ()可以消除pc上的warning,但是会导致android上RT不显示.

  10. PHP垃圾回收机制引用计数器概念

    参考: http://www.phpddt.com/php/gc-refcounting-basics.html