TypeScript 基本介绍 及在vscode中使用

主要内容：基本介绍 ，在vscode中的使用

是什么

是javascript的超集。你可以先按写一个Typescript类型的文件，它的后缀名是.ts，然后再通过typescript的编译器，把.ts文件编译成.js文件。这个过程类似于你先写一个.less文件，然后再把这个.less文件编译成.css文件，然后在网页中使用。

这里有一个明显的问题：为什么要先写一个.ts文件，而不是直接去写javascript？我们额外付出的成本会有什么收益？ 如果你用过less，那你肯定知道less和css之间的关系，那么你就会知道为什么要先写一个.ts，再转成.js。

比js的好处

1. 类型检查。
2. 在IDE中获得更强大的代码提示功能。
   ...

5分钟入手

前提：

• 【必须】已安装 node npm

第一步：全局安装typescript

因为你需要把.ts文件编译成.js，所以你先要把typescript到本地。

npm install -g typescript

安装成功后，你可以输入如下命令查看当前typescript的版本。

tsc --V

第二步：用编辑器编写一个名为index.ts文件。你可以输入如下内容：

class HelloWorld {
  greeting() {
    return 'hello world '
  }
}
let h = new Helloworld()
console.info( h.greeting() )

第三步：把index.ts转成index.js

tsc index.ts

你会得到一个index.js的文件。

在 vs code 中使用

第一步，全局安装Typescript

第二步，在项目根目录下新建tsconfig.json

内容如下：

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./src" // 生成.js文件的目录
  },
  "include": ["source/**/*"] // 你写.ts文件的目录
}

启动时时监控

在保持tsconfig.json文件处于编辑状态的情况下，按ctrl+shift+b，选择监听命令：

image.png

然后，你就可以编写.ts文件了，当你按下ctrl+s保存时，从.ts到.js的转换就自动完成了。