TypeScript 使用 VSCode 简介

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,并编写代码:

TypeScript 复制代码
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 文件,配置如下

TypeScript 复制代码
{
    "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
TypeScript 复制代码
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
TypeScript 复制代码
import typescript from 'rollup-plugin-typescript2';

export default {
    input: 'src/app.ts',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    },
    plugins: [
        typescript()
    ]
};
package.json 中添加打包脚本:
复制代码
"scripts": {
    "build": "rollup -c"
}
运行打包命令:
复制代码
npm run build

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

总结

  • 编译 :使用 tsc 将 TypeScript 编译为 JavaScript。

  • 打包:使用 Webpack 或 Rollup 将代码打包为单个文件。

VSCode 提供了强大的 TypeScript 支持,结合这些工具,可以高效地开发和打包 TypeScript 项目。

相关推荐
Asort3 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT24 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码25 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅30 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
Mintopia44 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙44 分钟前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom1 小时前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多1 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js