前言:
一般情况下,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"参数解除注释。