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 项目。

相关推荐
江城开朗的豌豆1 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆15 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山24 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45333 分钟前
css模块化以及rem布局
前端·javascript·css
奇文怪式33 分钟前
VSCode+arm-none-eabi-gcc交叉编译+CMake构建+OpenOCD(基于Raspberry Pico RP2040)
arm开发·ide·vscode·rp2040
hero_heart9 小时前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器