下载安装Visual Studio Code
下载链接:https://code.visualstudio.com/
创立项目
- 新建名为demo的文件夹
- 运用指令行进入到该文件夹
- 运用指令tsc --init创立tsconfig.json文件
指令tsc --init创立tsconfig.json文件
- 在demo文件夹下穿件ts和js两个文件夹,别离用以保存TypeScript文件和编译成的JavaScript文件
编写TypeScript文件
在ts文件夹下创立test.ts文件,键入如下代码:
class Hello {
target: string;
constructor(target:TypeScript入门根底——第3课 运用VS Code开发TypeScript string) {
this.target = target;
}
sayHello() {
return "Hello " + this.target;
}
}
let hello = new Hello("World");
console.log(hello.sayHelTypeScript入门根底——第3课 运用VS Code开发TypeScriptlo());
TypeScripTypeScript入门根底——第3课 运用VS Code开发TypeScriptt代码
装备编译选汐项
- 翻开之前生成的tsconfig.json文件,装TypeScript入门根底——第3课 运用VS Code开发TypeScript备outDir和rootDir两项如下:
TypeScript编译选项
outDir: 编译生成的js文件的目录
- rootDir: ts文件地点目录
运转使命
- 菜单:终端 > 运转使命
VS Code菜单
- 选择要运转的使命
其间tsc:构建选项是用TypeScript入门根底——第3课 运用VS Code开发TypeScript于一次编译。tsc:监督选项能够监测ts文件的改动,能够进行实时编译,十分便利
- 通过上面的过程,便能看到在js目录下生成了test.js文件
调试代码
- 按F5调试代码,呈现下面的过错
- 翻开launch.json文件,做出如下修正
"prTypeScript入门根底——第3课 运用VS Code开发TypeScriptogram": "${workspaceFolder}\\ts\\test.ts",
修正为
"program": "${workspaceFolder}\\js\\test.js",
- 再次F5调试,便能看到成果