插件

vscode有许多的插件, 可以给我们开发typescript提供较大的便利, 可以进入其扩展的网站浏览更多的插件

TypeScript Importer

TypeScript Importer, 说白了就是帮你推导并自动引入, 可以让我们的开发更加便捷, 也可以防止忘记导入

MoveTS

move TS, 可以帮助我们更安全地移动ts文件, 因为它可以把所有相关引入代码都做相应修改, 可以极大提高开发效率, 操作步骤如下:

ErrorLens

这个插件比较简单, 就是把错误内容直接放到具体那行, 使得错误体现得更加明显些

设置

在vsocde当中, 还有很多和typescript相关的扩展可以设置, 选择vscode的首选项->设置->搜索框内搜索typescript hints

我们可以让typescript给我们提供更多的代码提示(hints),

比如: Variable Types, 设置之后, 如果我们没有给一个变量设置类型签名, vscode也能推导出来

还有function相关的一些提示, 比如: Function Like Return Types, 设置之后, 如果没有规定函数的返回类型, vscode也能推导出来

Parameter Names: 函数入参无类型, 自动推导, 如果参数有类型了, 显示参数的参数名

设置后效果如下:

Playground

所谓的playground, 其实就是typescript的演练场, 能够让我们快速验证自己的一些想法, 可以快速修改tsconfig的诸多繁琐配置, 也可以很方便地看到编译后的js代码

npm包

typescript

前面都是在说工具类的使用, 实际开发中, 我们更多的, 可能是和npm依赖包打交道, 要配置typescript的环境, 首先离不开的就是安装typescript依赖

npm i typescript -g

安装了typescript依赖包之后, 我们就可以通过tsc命令, 对ts文件进行编译了; 然后, 再通过node 命令运行生成的js代码

tsc index.ts # 该命令生成index.js文件
node index.js # 执行生成的js文件

但是以上的方式过于繁琐, 我们可以使用更简便的方式

ts-node

命令行

ts-node可以让我们编译+执行生成的代码, 可以说是一步到位!

ts-node index.ts

ts-node 还有更多的参数可以传入

# -e: 直接在命令行执行代码
ts-node -e 'let a:string = "hello world"; console.log(a)'
# -P或--project: 指定配置文件, 默认是tsconfig.json
ts-node --project tsconfig11.json -e 'let a:string = "hello world"; console.log(a)'
# -T或transpileOnly忽略类型检查, 意义在于编译得更快了点
ts-node -T index.ts

配置文件

可以直接在tsconfig.json配置文件中进行配置

{
 "ts-node": {
    "transpileOnly": true,
    "files": true
  },
  "compilerOptions": {...}
}

当然, 使用ts-node还是比较麻烦, 因为没有实时热更新, 所以, 可以使用ts-node-dev

# --respawn 实时热更新
ts-node-dev --respawn index.ts

Typescript学习(一) 环境构建

插件