使用typescript开发react应用
初始化
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应用的更多相关文章
- 使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...
- React Hooks Typescript 开发的一款 H5 移动端 组件库
CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...
- 从零搭建TypeScript与React开发环境
前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架. 我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...
- 使用TypeScript开发ReactNative应用的简单示例
最近小小尝试了下 ReactNative + TypeScript 开发APP,爬了无数坑之后总算弄出来个结果,重要的地方记录下,后面会附上示例代码: 1.开发工具的选择 windows 平台我接触的 ...
- 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上
写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...
- 001——Typescript 介绍 、Typescript 安 装、Typescript 开发工具
一. Typescript 介绍 1. TypeScript 是由微软开发的一款开源的编程语言. 4. TypeScript 是 Javascript 的超级,遵循最新的 ES6.Es5 规范.Typ ...
- 使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm i ...
- 使用 VS Code 搭建 TypeScript 开发环境
使用 VS Code 搭建 TypeScript 开发环境 TypeScript 是 JavaScript 的超集,TypeScript 只是增强了 JavaScript 而非改变了 JavaScri ...
- 开始使用 TypeScript 和 React
原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...
随机推荐
- ubuntu12.04(64位)下安装Adobe Flash Player
2012-06-14 10:10:37 第一步,去adobe官方网站就可以,使用方便,打开网站:http://get.adobe.com/cn/flashplayer/根据自己的版本下载需要的.本 ...
- Solr 4.0部署
http://www.blogjava.net/xiaohuzi2008/archive/2012/12/03/392373.html
- win7 下配置 java 环境变量[转]
首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u7-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入“计算机 ...
- IHttpHandler的那些事
写在前面 从上家公司离职,在家休息,闲着无聊,觉得还是有必要将IHttpHanlder的内容,做一个总结.发现在写demo的过程中,总觉得有点生疏了,项目中很少使用自定义的类来实现该接口.当然,一般处 ...
- python ichat使用学习记录
1.OSError: [WinError -2147221003] 找不到应用程序: 'D:\\python\\ichat\\qrcode.jpg' 原因是该库中没有windows系统如何打开二维码图 ...
- Python title() 方法
描述 Python title() 方法返回"标题化"的字符串,就是说所有单词都是以大写开始,其余字母均为小写. 语法 title() 方法语法: S.title() 参数 无. ...
- js解决跨站点脚本编制问题
1.前台处理(容易绕过): <script type="text/javascript"> $(document).ready(function(){ var url= ...
- C++加载dll失败或显示乱码
右键项目-属性-字符集-使用多字节字符集
- javascript的单线程
1.什么是javascript的单线程javascript是单线程的语言,所以在一个进程上,只能运行一个县城,不能多个线程同时运行.也就是说javascript不允许多个线程共享内存空间.如果多个线程 ...
- CentOS6.4下Docker应用环境的部署配置
http://blog.chinaunix.net/uid-619485-id-4973941.html *********************************************** ...