TypeScript-初识-基础

jiezi

5 年前

通过 npm 命令进行安装：

$ npm i -g typescript

Typescript 文件名以 ts 扩展名结尾：

function hello(value: string) {console.log(`hello ${value}`);
}

hello('world');

通过命令行进行编译：

$ tsc test.ts

通过 VSCode 运行任务的方式进行编译：
- Windows 下使用 Ctrl + B 显示运行任务，选择 tsc: 构建 - tsconfig.json 进行编译。

编译后会根据 tsconfig.json 文件的配置生成 JavaScript 文件。

VSCode 调试 TypeScript 文件的前提：

// tsconfig.json 必须要写入的配置
{
    "compilerOptions": {"sourceMap": true}
}

VSCode 自带编译运行 TypeScript 文件，launch.json 配置：

{
    "type": "node",
    "request": "launch",
    "name": "run file",
    // 源文件的路径，一般与 tsconfig.json 中 rootDir 配置相关
    "program": "${workspaceFolder}/src/hello-world.ts",
    // 调试前需要运行任务，将 TypeScript 文件编译成 JavaScript 文件
    "preLaunchTask": "tsc: 构建 - tsconfig.json",
    // 输出 JavaScript 文件的路径，一般与 tsconfig.json 中 outDir 配置相关
    "outFiles": ["${workspaceFolder}/dist/**/*.js"
    ]
}

安装

创建 ts 文件

编译

VSCode 调试