建立一个typescript工程

建立一个typescript工程，不要太复杂。

1.安装node.js 自己下载安装

2.打开命令行运行

$ node -v
v8.12.0

$ npm install npm -g

$ npm -v
6.4.1

andrew@DESKTOP-1CLR4DJ /cygdrive/e/study/ts/test_four
$ npm -g install typescript

$ which tsc
/cygdrive/c/Users/andrew/AppData/Roaming/npm/tsc

到这里 typescript compiler就安装好了。

3.建立文件夹 test_four/child

4.用vscode打开test_four文件夹，在child文件夹下面建立 four.ts 添加代码

console.log("test four");

5.在vscode终端test_four目录下执行

PS E:\study\ts\test_four> tsc --init
message TS6071: Successfully created a tsconfig.json file.

自动造出 tsconfig.json来。

6. ctrl+shift+p 弹出的输入框中执行

configure task

再选

 tsc: 构建tsconfig.json

项目根目录下自动生成了 ".vscode/tasks.json"

7. 打开 four.ts 按ctrl+shift+b编译成js文件，再按F5执行，弹出加载失败对话框找不到launch.json文件。

8. 点击打开launch.json按钮，在“.vscode”目录下生成launch.json文件

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/child\\four.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

将其中的program参数改成

"program": "${fileDirname}\\${fileBasenameNoExtension}.js",

这样改造后，按F5就会从打开的文件对应的js文件启动，更方便。如果只想要唯一入口就不要这么改。参数介绍如下：

${workspaceFolder} :表示当前workspace文件夹路径，也即C:\Users\admin\Desktop\test
${workspaceRootFolderName}:表示workspace的文件夹名，也即test
${file}:文件自身的绝对路径，也即C:\Users\admin\Desktop\test\.vscode\launch.json
${relativeFile}:文件在workspace中的路径，也即.vscode\launch.json
${fileBasenameNoExtension}:当前文件的文件名，不带后缀，也即launch
${fileBasename}:当前文件的文件名，launch.json
${fileDirname}:文件所在的文件夹路径，也即C:\Users\admin\Desktop\test\.vscode
${fileExtname}:当前文件的后缀，也即.json
${lineNumber}:当前文件光标所在的行号
${env:PATH}:系统中的环境变量

9. 打开four.ts文件，ctrl+shift+b编译，F5执行，就执行了编译后对应的four.js脚本。此后在工程下的任意文件夹建立ts文件，都能编译执行正在编辑的ts文件。

10.如果断点调试不起作用，则将tsconfig.json中的sourceMap项打开

建立一个typescript工程

猜你喜欢