VsCode下部署TypeScript环境（通用版）_vscode typescript

前言：

一般情况下，VsCode下部署TypeScript环境只需要3个步骤

①安装node.js（自带npm）

官网直接下载：Node.js

安装完用cmd命令或者VsCode中的终端 查看是否安装成功显示版本号

node -v
 
npm -v

②使用npm命令安装TypeScript

npm install -g typescript

③创建tsconfig.json配置文件

tsc --init

到此已经部署完了。

但是在实际开发中 可能遇到很多问题

比如:利用npm命令安装TypeScript

npm install -g typescript

这个命令时，报错，无法ping通地址。

PS：npm安装依赖过程：从http://registry.npmjs.org下载对应的依赖包（该网站服务器位于国外，所以经常下载缓慢或出现异常）

这时我们需要更换npm服务器下载地址。

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队干了这事。

提供了npm对应的国内镜像地址：https://registry.npm.taobao.org

来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

而淘宝对于提供的这个npm镜像地址，自己定制了cnpm命令行工具

用cnpm安装的依赖都是从该镜像下载的

安装cnpm的方法：

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者

npm config set registry http://registry.npm.taobao.org/
npm install -g cnpm

第一个命令由淘宝提供，意思是使用npm去安装cnpm。同时设置npm的地址为淘宝的镜像地址（或者只是在安装时使用淘宝镜像地址，并没有改动npm的原始地址。这个我没有实验不太清楚。感兴趣可以去试试：用这串命令安装完cnpm后，查看一下npm的地址看看有没有改动。）

原则上，只要更改了npm的服务器地址，不安装cnpm命令行工具也是可行的。

以下为通用版本正文：

1.先查看系统是否安装typeScript，命令行运行 tsc -v，出现版本号，说明已安装

这里已经安装，没有安装为报错

2.如果没有，执行以下步骤：

（1）检查是否安装了cnpm, 查看一下你是否安装了cnpm

npm list --depth=0 -global

这里显示只安装了react

（2）npm镜像替换成淘宝

①得到原本的镜像地址

npm get registry 

②替换成淘宝的（两种方式自选一种，选第二种前提需要安装yarn）

npm config set registry http://registry.npm.taobao.org/
 
yarn config set registry http://registry.npm.taobao.org/

假设需要换回原来的地址

npm config set registry https://registry.npmjs.org/

（3）替换完淘宝镜像（原则上只要将npm的镜像地址更换成淘宝的镜像地址，就已经可以使用npm命令来安装TypeScript，这里只是选装cnpm），安装cnpm

npm install -g cnpm

（4）检查是否已安装cnmp

npm list --depth=0 -global

已经多了一个cnpm证明安装成功

（5）使用cnpm安装TypeScript

cnpm install -g typescript

（6）在项目根目录中创建tsconfig.json配置文件

tsc --init

已有这个文件但里面没有配置信息，可以删掉重新生成。

额外：

想要编写使用jsx/tsx，需在tsconfig.json中修改配置文件

将这个"jsx"参数解除注释。