vscode中如何丝滑使用typescript

达十个
1,018 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

官方文档速览

TypeScript中文官网上有这么一段话：

TypeScript是Javascript类型的超集，它可以编译成纯Javascript。

TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

类型允许Javascript开发者在开发Javascript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。并且类型时可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软组件之间的接口和洞察县有的Javascript库的行为。

个人观点：

翻译过来：Typescript是给开发者在写弱类型态语言js时加上了类型使其成为了类Java的静态类型语言，好处是：在开发过程中就可以发现程序中的bug并解决bug，不用得等到项目上线运行，甲方爸爸发火了之后才发现程序bug。这点在大项目、团队作战、长期维护的老项目上体现的尤为明显，所以一经推广，就引起了开发者们极大的兴趣。

官方步骤： 获取TypeScript

1、安装：

npm install -g typescript

2、编译

tsc helloworld.ts

个人实践：

按照官网的说明和操作步骤，本人想在vscode中使用ts，实现步骤不如下：

  • 1、打开VScode命令行，全局安装ts:
npm i typescript -g
  • 2、全局安装ts编译器
npm i ts-node -g
  • 3、在项目目录下安装生成 tsconfig.json文件
tsc --init

突然，报错了，信息如下：

vscode命令面板报错信息：

tsc : 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ tsc -v
+ ~~~
    + CategoryInfo          : ObjectNotFound: (tsc:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

windows命令行报错信息：

1.png

tsc不是内部或外部命令，也不是可运行的程序或批处理文件

解决办法：

  • 1、依次打开：我的电脑—>右键—>属性—>高级系统设计—>高级—>环境变量
  • 2、在命令行里面使用npm config get prefix查找npm目录

2.png

  • 3、在环境变量弹窗里的系统新建变量：NODE_PATH, 变量值为：D:\node\node_global(通过命令找到的npm安装路径)
  • 4、在用户变量 和 系统变量 的path末尾添加上 %NODE_PATH%
  • 5、配置完成后重新打开dos命令窗口，输入命令 tsc -v,

3.png

此时就可以在windows dos命令板敲 tsc —init命令了

但是我需要在vscode中使用，故需要将策略修改为： RemoteSigned模式，操作如下：

  • 1、get-ExecutionPolicy 查看策略模式，默认为 Restricted
  • 2、set-ExecutionPolicy RemoteSigned,设置模式为RemoteSigned

然后继续报错：

4.png 按照报错提示执行： Set-ExecutionPolicy -Scope CurrentUser

5.png

输入： RemoteSigned

  • 3、输入 get-ExecutionPolicy:

RemoteSigned

此时输入tsc -v

依然报错，我尼玛...

想了想，重启vscode尝试一下， 结果成功！！！

对着typescript官网代码示例愉快的敲了起来0.0

文中所提到的观点为本人自己所想，非官方观点，欢迎道友们批评指正。

avatar
文章
阅读
粉丝