初始化

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. Linux命令-文件搜索命令:locate

    实际上是在分区表上搜索文件,比find命令速度更快 locate inittab 查找名称包含inittab的所有信息(快速搜索,实际上它是搜索linux资料库,区别于find在某一个磁盘分区或者某一 ...

  2. FFmpeg命令添加视频字幕

    FFmpeg添加字幕 首先需要科普下.vob,mkv等格式文件以流的形式存储字幕,而mp4不支持这种方式.如果希望生成带字幕的mp4文件,只能将字幕“烧录”到视频中. 也就是说我们需要将字幕流与视频流 ...

  3. 学习C#——性能计数器

    写在前面: 作为Web应用开发前线的一枚小兵,每看到“性能”一词总有种要亮瞎眼的感觉,说到“性能”那就不能不提“数据”,在程序猿.攻城师中不是流行这样一句话吗?“无图无真相”,谁要说谁开发的应用性能有 ...

  4. 数据库连接 UnicodeEncodeError: 'latin-1' codec can't encode character u'\u4eac' in position 0: ordinal not in range(256)，UnicodeEncodeError: 'latin-1' codec can't encode character

    处理方法就是,设置连接和游标的charset为你所希望的编码,如utf8, 连接数据库的时候加上   charset="utf8 db = MySQLdb.connect(host= '14 ...

  5. MySQL主从双向同步复制

    本文介绍了mysql主从,实现mysql的双向同步复制. MySQL支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护日 ...

  6. 编译器DIY——读文件

    编译器的前端词法分析:将源文件解析成一个个的单词流.为语法分析做准备. 在词法分析阶段,我们要做的就是将词分出来,而且确定单词的类型,一般的程序设计语言的单词符号能够份为下面5种: 1.keyword ...

  7. 图解Sysprep封装系统

    图解Sysprep封装系统     一.使用安装管理器工具创建 Sysprep.inf 应答文件 要安装“安装管理器”工具并创建应答文件,请按照下列步骤操作: 1)打开“我的电脑”,然后打开 Wind ...

  8. eclipse生成export生成jar详解

    使用eclipse打jar包可能还有很多人不是很了解,今天特意测试整理一番. 打jar包有3种形式 JAR file               JAR Javadoc              ja ...

  9. Android——gridLayout(网格布局)

    <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" ...

  10. Dalvikvm工具

    dalvikvm:创建一个虚拟机并运行參数指定的java类. 1.新建一个java文件:例如以下: public class Test_07_22 { public static void main( ...