当前位置：首页 > article >正文

TypeScript 使用 VSCode 简介

article 2025/1/19 23:54:35

TypeScript 是 JavaScript 的超集，添加了静态类型检查等功能。VSCode 是微软开发的代码编辑器，对 TypeScript 有很好的支持。

1. 安装 TypeScript

首先，确保已安装 Node.js 和 npm。然后通过以下命令安装 TypeScript：

npm install -g typescript

2. 创建 TypeScript 项目

在项目目录中初始化 tsconfig.json 文件：

tsc --init

这会生成一个默认的 tsconfig.json 文件，用于配置 TypeScript 编译选项。

3. 编写 TypeScript 代码

创建一个 .ts 文件，例如 app.ts，并编写代码：

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("World"));

4. 编译 TypeScript

使用以下命令将 TypeScript 编译为 JavaScript：

tsc

默认情况下，编译后的 .js 文件会输出到同一目录。你也可以通过 tsconfig.json 自定义输出目录。

5. 在 VSCode 中调试

VSCode 支持直接调试 TypeScript。创建 launch.json 文件，配置如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug TypeScript",
            "program": "${workspaceFolder}/app.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/**/*.js"]
        }
    ]
}

按 F5 即可开始调试。

如何编译和打包

1. 使用 `tsc` 编译

tsc 是 TypeScript 的编译器，可通过以下命令编译项目：

tsc

2. 使用 Webpack 打包

Webpack 可以将 TypeScript 代码打包为单个 JavaScript 文件。

安装 Webpack 和相关依赖：

npm install --save-dev webpack webpack-cli ts-loader typescript

配置 `webpack.config.js`：

const path = require('path');

module.exports = {
    entry: './src/app.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

在 `package.json` 中添加打包脚本：

"scripts": {
    "build": "webpack"
}

运行打包命令：

npm run build

打包后的文件会输出到 dist 目录。

3. 使用 Rollup 打包

Rollup 是另一个打包工具，适合库的打包。

安装 Rollup 和相关依赖：

npm install --save-dev rollup rollup-plugin-typescript2 typescript

配置 `rollup.config.js`：

import typescript from 'rollup-plugin-typescript2';

export default {
    input: 'src/app.ts',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    },
    plugins: [
        typescript()
    ]
};