- 安装 typescript
npm install typescript --save-dev
- 安装 ts-node
npm install ts-node --save-dev
- 配置 package.json
在根目录下执行以下命令生成package.json文件
npm init -y
# npm init [--force|-f|--yes|-y|--scope]
{
"name": "tsdemo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-node": "^9.0.0",
"typescript": "^2.9.2"
}
}
package.json 中有dependencies和devDependencies,列出了项目所使用的第三方依赖包,下载的依赖包存放在node_modules目录中。
devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。
添加依赖有2种方法:
- npm install name –save 就是将要安装的依赖写到 package.json 的 dependencies 对象中
- npm install name –save-dev 是将要安装的依赖写到 package.json 的 devDependencies 对象中
- 添加 tsconfig.json
在根目录下执行以下命令生成tsconfig.json
tsc --init
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true, // 强制类型检验
"outDir": "./dist", // 输出目录
"sourceMap": true // 生成相应的map文件(断点调试需要开启此项)
},
"include": [
"src/**/*"
]
}
- 配置 tasks.json
添加.vscode/tasks.json文件方法:https://blog.csdn.net/watson2017/article/details/109779609
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", ".", "-w"], //-p指定目录 -w 检测文件改变自动编译
"showOutput": "always",
"problemMatcher": "$tsc"
}
- 配置自动实时编译
设置自动编译ts为js。
- 配置 launch.json
单击最上方面板调试视图中的齿轮图标,选择你的调试环境,然后VS Code将在你的工作空间的.vscode
目录下生成一个launch.json
文件。
{
"version": "0.2.0",
"configurations": [
{
"name": "启动程序",
"type": "node",
"request": "launch",
"args": [
"${workspaceFolder}/src/main.ts" //入口文件
],
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register"
],
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"protocol": "inspector",
"console":"integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
预定义变量
支持下面的预定义变量:
${workspaceFolder} - 当前工作目录(根目录)
${workspaceFolderBasename} - 当前文件的父目录
${file} - 当前打开的文件名(完整路径)
${relativeFile} - 当前根目录到当前打开文件的相对路径(包括文件名)
${relativeFileDirname} - 当前根目录到当前打开文件的相对路径(不包括文件名)
${fileBasename} - 当前打开的文件名(包括扩展名)
${fileBasenameNoExtension} - 当前打开的文件名(不包括扩展名)
${fileDirname} - 当前打开文件的目录
${fileExtname} - 当前打开文件的扩展名
${cwd} - 启动时task工作的目录
${lineNumber} - 当前激活文件所选行
${selectedText} - 当前激活文件中所选择的文本
${execPath} - vscode执行文件所在的目录
${defaultBuildTask} - 默认编译任务(build task)的名字
- 调试main.ts