typescript 由微软开发的一款开源的编程语言，是 javascript 的超集，遵循最新 es5,es6 规范，扩展了 javascript 的语法。 typescript 更像后端 java,c# 这样的面向对象语言，便于开发大型企业项目。

ts安装前提：在使用 npm 命令之前电脑必须安装 node.js

一、安装：

  1. npm install typescript -g
  2. 或者
  3. cnpm install typescript -g
  4. 或者
  5. yarn install typescript -g

二、运行：

  1. tsc index.ts

注意：如果电脑上没有安装过 cnpm，需先安装 cnpm

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

注意：如果电脑上没有安装过 yarn，需先安装 yarn

  1. npm install -g yarn
  2. 或者
  3. cnpm install -g yarn

三、步骤：

  1. 快捷键 win + r，输入 cmd 打开 windows 自带 命令指示符
  2. 通过 cnpm 安装 ts
  3. 通过 tsc 检查 ts 是否安装成功

image.png

四、vscode自动编译.ts文件：

众所周知，浏览器是不能直接编译 es6 以及 ts 代码的，那么typescript 开发工具 vscode 如何自动编译 .ts 文件？
方法：通过 tsc —init 生成配置文件 tsconfig.json

  1. cmd 进入目标菜单typescript下
    • 法一：直接在目标文件内，输入 cmd 后回车，打开 命令指示符

image.png

  • 法二：任意位置打开 命令指示符，通过 命令行 进入目标文件

image.png

  1. 输入命令行 tsc —init 生成 配置文件 tsconfig.json
  2. 修改 tsconfig.json 文件中原配置项 "outDir": "./", ts自动编译后生成的js文件存放位置

image.png

  1. 创建 ts 文件 index.ts，且运行 index.ts（通过命令行 tsc index.ts 只能手动编译 index.ts 文件，无法达到自动编译的效果）
  2. ctrl+shift+b 配置 ts 文件可以自动编译（tsc watch下次保存文件就自动编译，tsc build编译一次）

image.png

五、遇到问题：

  1. 全局安装 ts 后，运行 ts 文件报错，报错信息&解决方案如下图所示

image.png通过命令行 set-ExecutionPolicy RemoteSigned 解决 tsc : 无法加载文件 C:\DevTools\npm-global\tsc.ps1,因为在此系统上禁止运行脚本 的问题