初始化

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. IT路上的应该注意自我规划 学习规划与自我修炼

    http://www.nowamagic.net/librarys/veda/detail/607 IT路漫漫,你需要明确自己所处的位置,并作出相应的规划,这条路才能够走得更加顺畅.下面是参考: 初学 ...

  2. C++：SQLServer字段赋值

    大前提: 1. 初始化环境 2. 创建连接实例 3. 创建记录集实例 注意点: 1.AddNews失败问题: (1)是否将CursorTypeEnum cursorType, LockTypeEnum ...

  3. Android：EditText限制文字输入

    Android的编辑框控件EditText在平常编程时会经常用到,有时候会对编辑框增加某些限制,如限制只能输入数字,最大输入的文字个数,不能输入 一些非法字符等,这些需求有些可以使用android控件 ...

  4. Android Studio 使用感受 错误解决

    刚到公司不久,公司叫我用Android studio软件,曾经一直在用的是eclipse ADT.突然接触到的新名词让我有点适应只是来. 好吧,既然是公司要求,肯定有它的道理.就从网上下载了它的安装包 ...

  5. Atititjs javascript异常处理机制与java异常的转换.js exception process

    Atititjs javascript异常处理机制与java异常的转换.js exception process 1. javascript异常处理机制 Throw str Not throw err ...

  6. 如何使用SignalTap II觀察reg與wire值? (SOC) (Verilog) (Quartus II) (SignalTap II)

    Abstract撰寫Verilog時,雖然每個module都會先用ModelSim或Quartus II自帶的simulator仿真過,但真的將每個module合併時,一些不可預期的『run-time ...

  7. 02、获取 WebView 控件中，加载的 HTML 网页内容

    在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...

  8. python爬虫解析库之re模块

    re模块 一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中, ...

  9. sass 的使用心得

    //定义颜色 $c55:#; $c22:#; $c33:#; $c99:#; $c77:#; $c00:#; $cff:#fff; $caa:#aaa; $ccc:#ccc; $cf0:#f0f0f0 ...

  10. Jmeter测试带加密参数的接口

    在做接口测试时,很多时候我们都会碰到带有加密参数的接口,这种接口一般来讲都会有统一的加密方法,找开发要就好,Jmeter怎么去测呢 1.整体结构如下所示: 2.操作步骤 (1)将加密方法打成jar包放 ...