在tsx里写html模板,如何学习用Typescript写Reactjs?

原标题：如何学习用Typescript写Reactjs?

首先扫盲一下，先从搭建环境开始：

1.安装node，因为ts的编译器是js/ts写的；

安装node后同时获得npm命令，这是nodejs世界里的包管理器(也可以看作node的app商店)；

2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；

3.vs自带了Type(vs2012+，vs2015update1自带了ts1.7),最新版本的type for vs去官网下载即可, 或者如果不依赖vs(比如mac环境), 可以用命令行装ts编译器

npm i -g type@next

4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译Type代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；

<span style="font-size: 18px;"><img src="https://pic1.zhimg.com/444acaf7af6ed25f9490b22423249cc4_b.jpg" data-rawwidth="500" data-rawheight="333" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic1.zhimg.com/444acaf7af6ed25f9490b22423249cc4_r.jpg"></span>

有网友指正tsd工具不是安装ts的时候自带的，需要另外安装，装太久不记得了。

npm install tsd -g

5. 命令行下载react的ts头文件,

tsd install react-global --save

注意上面之所以写 react-global 而不是react， 因为我们接下来使用比较原始的写法，直接把React当作全局对象使用， 而不作为es6模块(必须用import引入)，不需要Babel编译也不需要webpack打包；

上面执行的tsd命令下载了ReactJS类库的头文件, 下面用tsc命令创建一个ts项目配置文件

tsc --init

命令创建了tsconfig.json配置文件, 打开该文件

增加"jsx": "react", 就是自动把tsx变成最终的js, 而不是jsx

把"outDir": "built", 这行去掉,这样编译的文件就会在当前目录输出

"target": "es5", 这里es3改成es5,

"watch": true 是否监听文件修改 如果你用的是vs,这行不重要

<span style="font-size: 18px;"><img src="https://pic4.zhimg.com/aeee17ca0016c27ed7d4d629ffb50c9b_b.png" data-rawwidth="453" data-rawheight=&