最近在尝试学习typescript, 发现对于新手来说在vs code中编译ts比较麻烦,搜集了网上的资料总结如下(亲测有效):

目录

• node 安装
• typescript 安装
• 创建项目
• 创建ts文件
• 创建task.json
• 创建launch.json
• 编译文件

node 安装

首先要安装node.js ,这个网上都有,参考可以移步 node安装配置

typescript 安装

 npm install -g typescript

创建项目

创建一个放置项目的文件夹,并在文件夹目录下输入:

tsc -init

会生成一个 tsconfig.json 配置文件,文件中有很多可配置选项,配置选项填写如下:

{
  "compilerOptions": {
    "target": "es5",                          
    "module": "commonjs",
    "strict": true,
    "rootDirs": [],
    "esModuleInterop": true,                  
    "skipLibCheck": true,                     
    "outDir": "./js/", 
    "sourceMap": true,
    "forceConsistentCasingInFileNames": true  
  }
}

创建ts文件

在项目目录下创建 ts格式的文件,如创建一个 test.ts文件,并输入测试内容:

class Person {
    hobby: string;
    constructor(hobby: string) {
        this.hobby = hobby;
    }
    echo() {
        return '我就喜欢：' + this.hobby;
    }
}
let person = new Person('唱跳rap');
let hobby = person.echo();
console.log(hobby);

创建task.json

按住 ctrl+shift+p,输入 configure task,并选择 :

tsc: watch -tsconfig.json 

会生成一个task文件

创建launch.json

点击这个三角形的调试按钮

选择创建一个launch.json 文件,内容填写如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "运行或调试当前文件",
            "program": "${workspaceFolder}/${relativeFile}",
            "preLaunchTask": "tsc: watch - tsconfig.json", 
            "outFiles": [
                "${workspaceFolder}/build/es5*.js"
            ]
        }
    ]
}

编译文件

按下 ctrl + shift + b ,编译文件, test.ts文件会被编译为 js文件,存放在当前目录/js 文件夹下:

运行js 即可.