TypeScript - 浏览器中运行TS

注意:浏览器中只能运行 JS,无法直接运行 TS,因此,需要将 TS 转化为 JS 然后再运行

浏览器中运行 TS 的步骤:

  1. 使用命令 tsc index.ts 将 ts 文件转化为 js 文件。
  2. 在页面中,使用 script 标签引入生成的 js 文件(注意是 js 文件)。
    <script src="./index.js"></script>
    

问题:每次修改 ts 文件后,都要重新运行 tsc 命令将 ts 转化为 js 。
解决方式:使用 tsc 命令的监视模式------tsc --w index.ts

解释: --watch 表示启用监视模式,只要重新保存了 ts 文件,就会自动调用 tsc 将 ts 转化为 js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在使用TypeScript开发浏览器拓展时,需要配置一个开发环境,以下是配置步骤: 1. 安装Node.js和npm,npm是Node.js的包管理器,用于安装和管理开发所需的软件包。 2. 安装TypeScriptts-node两个npm包,TypeScript是一个开源的编程语言ts-node是TypeScript的命令行接口工具,用于在Node.js环境执行TypeScript代码。 ``` npm install -g typescript ts-node ``` 3. 创建一个新的TypeScript项目,在命令行输入以下命令: ``` mkdir my-extension cd my-extension npm init -y ``` 4. 在项目创建一个src文件夹,用于存放TypeScript源代码。 5. 创建一个tsconfig.json文件,用于配置TypeScript编译器的选项。在项目根目录创建一个tsconfig.json文件,添加以下内容: ``` { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "dist" }, "include": [ "src/**/*" ] } ``` 6. 创建一个webpack.config.js文件,用于配置Webpack打包工具的选项。在项目根目录创建一个webpack.config.js文件,添加以下内容: ``` const path = require('path'); module.exports = { entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] } }; ``` 7. 安装Webpack和ts-loader两个npm包,Webpack是一个开源的JavaScript模块打包工具,用于打包JavaScript代码,ts-loader是Webpack的TypeScript加载器,用于将TypeScript代码转换为JavaScript代码。 ``` npm install --save-dev webpack webpack-cli ts-loader ``` 8. 在package.json文件添加以下脚本命令,用于编译和打包TypeScript代码: ``` "scripts": { "build": "webpack --config webpack.config.js" } ``` 9. 编写TypeScript代码,在src文件夹创建一个index.ts文件,编写浏览器拓展的TypeScript代码。 10. 运行npm run build命令,编译和打包TypeScript代码。 11. 在浏览器加载拓展,打开Chrome浏览器的扩展程序页,点击“加载已解压的扩展程序”按钮,选择dist文件夹作为扩展程序的根目录。 以上步骤是配置TypeScript开发浏览器拓展的基本流程,根据实际情况可能需要进行一些调整和修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凡小多

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值