在webstrom和vscode中配置ts

2018-09-21

typescript 作为前端开发的未来趋势,也是前端开发也应该掌握的。这里就不一一赘述其特性。我们来看一下如何在我们的代码编辑器中配置 ts。个人比较常用 webstrom 和 vscode,所以这里只描述这两种编辑器的配置。

本篇前提是你的电脑中已装有 node 和 typescript,如何安装请自行百度。

vscode 中配置 ts

配置步骤

  1. 新建项目文件夹 testtypescript
  2. cd testtypescript
  3. 运行 tsc --init 创建 tscconfig.json 文件
  4. 修改 outDir:"./js"
  5. 点击终端-运行任务-监视 tsconfig
  6. 完成

代码演示

# 1. 新建项目文件夹并cd到项目目录
  md testtypescript && cd testtypescript
# 2. 创建tsconfig文件
  tsc --init
# 3. 修改tsconfig文件其中的输出目录为根目录下的js文件夹
  "outDir": "./js"
# 4. 点击vscode终端中的运行任务,监视tsconfig
# 5. 新建index.ts文件在其中输入
  const title:string="Hello,TypeScript"
# 6. 此时项目中会有一个js文件夹,至此配置完成

webstrom 中配置 ts

配置步骤

  1. 新建项目文件夹 tscode
  2. cd tscode
  3. 运行 tsc --init 创建 tscconfig.json 文件
  4. 修改 outDir:"./js"
  5. 点击 file-settings-Language-Typescript 勾选 Recompile on changes
  6. 完成

代码演示

# 1. 新建项目文件夹并cd到项目目录
  md tscode && cd tscode
# 2. 创建tsconfig文件
  tsc --init
# 3. 修改tsconfig文件其中的输出目录为根目录下的js文件夹
  "outDir": "./js"
# 4. 点击file-settings-Language-Typescript 勾选Recompile on changes
# 5. 新建index.ts文件在其中输入
  const title:string="Hello,TypeScript"
# 6. 此时项目中会有一个js文件夹,至此配置完成

最后

如果您觉着本篇文档不错,请您给一颗稻谷。