TypeScript在VSCode编辑器中环境搭建

TypeScript在VSCode编辑器中环境搭建

Typescript是微软开发的开源编程语言，也属于Javascript超集；也就是在Javascript语言添加了两大重要的特性：可选的静态类型和基于类的面向对象编程

目前在浏览器环境和nodejs无法直接运行typescript语言，需要有typescript编译器将其转换成js语言才能运行；注意typescript程序文件的后缀是.ts格式

怎样运行Typescript？

在运行typescript语言时，需要安装Typescript编译器；可以通过npm包管理器进行安装

npm install -g typescript

不管通过命令行还是vscode编辑器运行ts代码，都需要安装typescript编译器

安装成功后，可以在命令行中运行tsc -version命令查看是否安装成功；如图所示：

1.通过命令行运行Typescript

安装typescript编译器后，然后再项目目录下新建test.ts格式文件；然后通过命令行定位到该文件目录，并运行tsc test.ts命令，相同目录会生成test.js文件；然后通过node test.js运行编译后的test.js文件；如下图所示：

test.ts代码如下：

class DemoClass{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    setName(name:string):void{
        this.name=name;
    }
    setAge(age:number):void{
        this.age=age;
    }
    showName():string{
        return this.name;
    }
    showAge():number{
        return this.age;
    }
}
const demoObj=new DemoClass("typescript",26);
console.log(demoObj.showName())

以上可知，如果要完整运行typescript文件，就必须先编译，再运行；不过每次都通过命令行操作真心的累；接下来就了解了解怎样将typescript集成到VSCode编辑器中

2.通过vscode编辑器运行Typescript

新建项目目录结构，注意其中的tsconfig.json文件

 

tsconfig.js文件属于typescript配置文件，主要用来配置编译ts时的动作；代码如下：

{
    "compilerOptions": {
        "target": "es5", //编译JS之后需要遵循的标准：es3,es5,es2015(es6)
        "noImplicitAny": false, /*false：无法根据变量的使用判断类型时，将用any类型代替; true：强类型检查，无法推断类型时，提示错误。*/
        "module": "commonjs", //定义遵循的JavaScript模块规范。commonjs、AMD和es2015
        "removeComments": true, //编译生成的JavaScript文件是否移除注释
        "sourceMap": false, //编译时是否生成对应的source map文件
        "outDir": "js" //编辑js的输出目录
    },
    "include":[ //需要包含编译的目录
        "ts"
    ],
    "exclude": [ //需要剔除编译的目录
        "js"
    ]
}

test.ts文件代码如下：

class DemoClass{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    setName(name:string):void{
        this.name=name;
    }
    setAge(age:number):void{
        this.age=age;
    }
    showName():string{
        return this.name;
    }
    showAge():number{
        return this.age;
    }
}
export {DemoClass};

app.ts文件代码如下：

import {DemoClass} from "./test";
const demoObj=new DemoClass("typescript",28);
console.log(demoObj.showName());

在该项目目录下运行tsc -p tsconfig.json命令编译或者通过ctrl+shift+b快捷键运行编译任务；然后js目录就生成了js文件，如图所示：

在vscode编辑器中按下F5快捷键进入调试模式，选择nodejs环境进行调试，然后修改生成launch.json文件内容，指定相应的入口文件；代码如下：

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/testTs/js/app.js", //入口文件是编译后的app.js文件
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

只修改上诉配置文件中的program配置项即可；接着就运行成功了，如下图所示：