VScode搭建TypeScript开发环境

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上，TypeScript 是开源的。为什么选择 TypeScript以及TypeScript优缺点阅读TypeScript入门教程。利用VScode搭建TypeScript开发环境前提是已经安装node.js和VScode。

1、安装TypeScript

使用npm工具安装全局TypeScript：

npm install -g typescript

2、创建helloTypeScript

创建helloTypeScript目录，在命令行cmd下进入helloTypeScript目录

cd helloTypeScript

输入：npm init，创建package.json，package.json文件如下：

{
  "name": "hellotypescript",
  "version": "1.0.0",
  "description": "hello typescript",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"   
  },
  "keywords": [
    "typescript"
  ],
  "author": "sanshui",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "lite-server": "^2.2.0",
    "concurrently": "^2.0.0"
  }
}

concurrently—同时执行命令用

lite-server—轻量级的Node开发服务器

3、安装依赖包、编写示例代码

使用npm i 或者 cnpm i 或者yarn 安装依赖包

npm i

编写HelloTypeScript.ts代码：

class HelloTypeScript {
  helloString: string;
  constructor(message: string) {
      this.helloString = message;
  }
  hello() {
      return this.helloString;
  }
}
let myName: string = 'SanShui'
let myAge: number = 23
let sentence: string = `Hello, my name is ${myName}. I'll be ${myAge + 1} years old next month`
let helloTypeScript = new HelloTypeScript(sentence);
document.body.innerHTML = helloTypeScript.hello();

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloTypeScript</title>
</head>
<body>
    <script src="dist/tsc.js"></script>
</body>
</html>

4、创建 tsconfig.json

当前TypeScript代码并不能直接执行，需编译为JavaScript代码。而借助VS Code，我们就不用在命令行输入编译命令了。为此，在根目录添加一个tsconfig.json文件。该文件是TypeScript编译器配置文件。

{
  "compilerOptions": {
    "module": "amd",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "dist/tsc.js",
    "sourceMap": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules"
  ]
}