ts在vscode编辑器开发的环境搭建

tsconfig.json 也可以tsc --init

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noEmitHelpers": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
    "include": [
    "./src/**/*.ts"
  ]
}

注意launch和tasks的配合，已经要启动的文件，比如index.html
launch.json

{
    // Use IntelliSense to learn about possible 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": "chrome",
        //     "request": "launch",
        //     "name": "Launch Chrome against localhost",
        //     "url": "http://localhost:8080",
        //     "webRoot": "${workspaceFolder}"
        // },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": true,
            //选择要启动的文件
            "file": "${workspaceFolder}/bin/index.html",
            //下面这个可以预先启动任务
            //参数是tasks.json里某个task的label值
            //表示启动之前先完成tasks里的任务
            "preLaunchTask": "compile"  
        }
    ]
}

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		// {
		// 	"type": "typescript",
		// 	"tsconfig": "tsconfig.json",
		// 	"problemMatcher": [
		// 		"$tsc"
		// 	],
		// 	"group": {
		// 		"kind": "build",
		// 		"isDefault": true
		// 	},
		// 	"label": "tsc: build - tsconfig.json"
		// },
		{
			"label": "compile",
			"type": "shell",
			"group": "build",
			"command": "gulp",
			"options": {
				"cwd": "${workspaceFolder}/.vscode"
			  }
		},
	]
}

package.json

{
  "name": "self",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "self": "Kernel.js"
  },
  "scripts": {
    "test": "dev"
  },
  "keywords": [
    "123456"
  ],
  "author": "hzj",
  "license": "ISC",
  "dependencies": {
    "@types/jquery": "^3.5.1",
    "browserify": "^16.5.2",
    "gulp": "^4.0.2",
    "gulp-header": "^2.0.9",
    "tsify": "^5.0.1",
    "typescript": "^3.9.7",
    "vinyl-source-stream": "^2.0.0"
  }
}

执行安装库命令,会安装package文件里的所有库

npm install

gulpfile.js
这个文件解决了ts变js,
执行报错：reports is not defined 和extends is not defined

//引用插件模块
let gulp = require("gulp");
let browserify = require("browserify");
let source = require("vinyl-source-stream");
let header = require('gulp-header');
let tsify = require("tsify");

var workSpaceDir = "../";


//使用browserify，转换ts到js，并输出到bin/js目录
gulp.task("compile", function () {
	
	return browserify({
		basedir: workSpaceDir,
		//是否开启调试，开启后会生成jsmap，方便调试ts源码，但会影响编译速度
		debug: true,
		entries: ['src/Main.ts'],
		cache: {},
		packageCache: {}
	})
		//使用tsify插件编译ts
		.plugin(tsify)
		.bundle()
		//使用source把输出文件命名为bundle.js
		.pipe(source('bundle.js'))
		//给头文件加上这些代码可以实现继承
		.pipe(header(`var __extends = (this && this.__extends) || (function () {
			var extendStatics = function (d, b) {
				extendStatics = Object.setPrototypeOf ||
					({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
					function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
				return extendStatics(d, b);
			};
			return function (d, b) {
				extendStatics(d, b);
				function __() { this.constructor = d; }
				d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
			};
		})();\n`))
		//把bundle.js复制到bin/js目录
		.pipe(gulp.dest(workSpaceDir + "/bin/js"));
});

gulp.task("default",gulp.series('compile'))

有了上面这些操作以后，自己定义一下工程结果，上面配置和js需要微动

工程打开

code .

启动

F5