如何使VS2015/2017的TypeScript支持React
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使VS2015/2017的TypeScript支持React相关的知识，希望对你有一定的参考价值。
参考技术A 1.安装node，因为ts的编译器是js/ts写的；安装node后同时获得npm命令，这是nodejs世界里的包管理器（也可以看作node的app商店）；
2.安装vs 2015或者vs code，当然这不是必须的，但是这里强烈推荐写ts的工具，vs第一，vsc第二；
3.vs自带了TypeScript（vs2012+，vs2015update1自带了ts1.7）,最新版本的typescript for vs去官网下载即可, 或者如果不依赖vs（比如mac环境）, 可以用命令行装ts编译器
npm i -g typescript@next
4. 安装了ts后, 就会有2个命令可用：tsc和tsd, tsc用来编译TypeScript代码, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，熟练使用tsd，工作效率提升，因为减少了80%查文档的时间，所以写ts可以说是jser打通了任督二脉，上手任何新的开发环境都很快；
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,这行不重要
6.下载reactjs文件，如果没有安装bower命令，可以手动去官网下载react类库
bower install --save react
7.以上环境配置好了, 开始写代码:
创建一个demo.tsx文件(注意这里是tsx, 不是ts也不是jsx)
创建一个demo.html, 添加文件的引用
<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
</body>
</html>
8. demo.tsx 写代码
class MyClass extends React.Component<any, any>
render()
return <h1>hello this.props.name</h1>;
document.addEventListener('DOMContentLoaded', function ()
ReactDOM.render(<MyClass name="Tom" />, document.body);
);
9. 如果保存了demo.tsx后, 没有在目录下发现自动编译了demo.js, 那么可能是vs没配置好,如果你没有装vs或者vsc,没关系,在当前文件夹下命令行运行
tsc
tsc命令会自动根据tsconfig.json里面配置的情况, 自动帮你把代码编译成js, 这是编译后的js文件
10. 打开demo.html可以看到效果了;
11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;11. 至于题主说怎么学习, 其实跟JS完全没两样, 上面demo.tsx的代码, 跟react官网的es6写法一模一样多了<any,any> 这两个prop和states类型约束, 仅此而已;
12. 下班, 有空再写;
－－－－－－时间分割－－－－－－
13、继续写，对1-12进行润色，转入传教模式；
以上的代码，工厂方法在创建子类的同时，做了一些初始化的动作，这与单纯的原型继承不同，所以在使用class方式进行子类继承，这样的写法是无效的；
class MyView extends React.Component
render()
return <h1>hello this.state.name</h1>; //会抛异常,因为state是null
//不起作用的
getInitialState:()
return name:'',age:20;
需要改成如下方式，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）
class MyView extends React.Component
constructor(props, context)
super(props, context);
this.state =
name: '',
;
render()
return <h1>hello this.state.name</h1>;
16、当组件化遇到强类型：
从前写JS组件，一般复用性比较差，基本写完就仍，原因如下：
1）暴露了太多的Dom结构以及别的实现细节；
2）命名挫，缺乏可记忆性，本身编程中变量和方法的命名对于码农来说就是天坑；
3）JS天生缺乏私有和公共成员的约束，不加注释根本不知道怎么使用该类库/组件；
React解决了把dom标签暴露出去的问题，TS则解决了语言层面的问题，并提供了强大的重构能力，你根本不需要记住组件的API，因为工具会列出来；本回答被提问者采纳
如何使 prettier 成为 vs 代码中的默认格式化程序？
【中文标题】如何使 prettier 成为 vs 代码中的默认格式化程序？【英文标题】：How to make prettier the default formatter in vs code? 【发布时间】：2021-01-05 07:46:26 【问题描述】：我在 vs code 中安装了 prettier 扩展，当我点击格式化文件时，vs code 询问我：“你想使用默认格式化程序格式化还是使用 prettier 格式化程序？”。但我不小心选择了默认格式化程序。如何将其更改为默认设置更漂亮的格式？
【问题讨论】：
Quick Answer希望这个回答对你有帮助。 【参考方案1】：不知道为什么，但将默认格式化程序设置为 ebsenp.prettier 对我不起作用。但是我发现了一个类似的命令。
-
ctrl + shift + p
格式化文档
配置默认格式化程序
选择更漂亮
【讨论】：
【参考方案2】：通过单击 vs 代码侧栏左下角的齿轮并从菜单中选择设置，或按 Ctrl+，打开设置，
在设置窗格的右上角，点击打开文件图标（如果您将鼠标悬停，工具提示将显示“打开设置（JSON）”
将以下行添加到设置 json：
"editor.defaultFormatter": "esbenp.prettier-vscode"
【讨论】：
【参考方案3】：在命令面板（ctrl + shift + p）中，搜索格式，然后选择格式化文档。然后选择 Prettier - Code Formatter。
注意：如果您没有看到选择默认格式的提示，您可以在“设置”中手动更改此设置。将编辑器：默认格式化程序设置为 ebsenp。
这里是完整的解决方案： https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code#:~:text=In%20the%20command%20palette%2C%20search,and%20then%20choose%20Format%20Document.&text=Then%20choose%20Prettier%20%2D%20Code%20Formatter,Editor%3A%20Default%20Formatter%20to%20ebsenp.
【讨论】：
以上是关于如何使VS2015/2017的TypeScript支持React的主要内容，如果未能解决你的问题，请参考以下文章
VS2017 MFC 类向导 - 如何像在 VS2015 中一样使用它