HTML引入TypeScript脚本

简介: 本文介绍一种向HTML中直接引入TypeScript脚本的方法。

大家都知道,HTML可以直接引入JavaScript脚本文件。有一天,博主就想到:博主学习TypeScript的时候,都是使用命令行编译器tsc或其他工具手动执行,那HTML能不能直接引入TypeScript脚本文件呢?

带着这个疑惑,博主查阅了一些资料,最终找到了一款开源工具:typescript-compile。该工具会自动将TypeScript代码即时转换为JavaScript代码。虽然实际上仍然编译了TypeScript代码,但看起来是无需手动编译的,很有趣。

下面是博主的案例代码,分享给大家,注意相对路径。

./index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Typescript嵌入HTML</title>
    <script type="text/typescript" src="./ts/hello.ts"></script>
    <script type="text/typescript" src="./ts/student.ts"></script>
</head>
<body>
<script type="text/javascript" src="./js/typescript.min.js"></script>
<script type="text/javascript" src="./js/typescript.compile.min.js"></script>
</body>
</html>

./ts/hello.ts

console.log("你好,TypeScript!")

./ts/student.ts

class Student {
    // 字段
    id: number
    name: string

    // 构造函数
    constructor(id: number, name: string) {
        this.id = id
        this.name = name
    }

    // 方法
    introduce(): void {
        console.log("该学生的学号是:" + this.id + ",姓名是:" + this.name)
    }
}

// 创建一个对象
var student = new Student(123456, "李明松")

// 访问字段
console.log("该学生的姓名是:" + student.name)

// 访问方法
student.introduce()

切记,下面的HTML片段一定要嵌入到<body></body>标签的最后

<script type="text/javascript" src="typescript.min.js"></script>
<script type="text/javascript" src="typescript.compile.min.js"></script>

typescript.min.jstypescript.compile.min.js可以从GitHub的README.md中的链接下载。

相关文章
|
12天前
|
JavaScript 前端开发
HTML 脚本2
&lt;noscript&gt;标签用于在浏览器禁用或不支持脚本时提供替代内容。该元素可包含所有常见的 HTML body 元素。当脚本不可用时,&lt;noscript&gt; 中的内容将被显示。例如:`&lt;noscript&gt;抱歉,你的浏览器不支持 JavaScript!&lt;/noscript&gt;`
|
12天前
|
JavaScript 前端开发
HTML 脚本1
JavaScript 通过 `&lt;script&gt;` 标签嵌入 HTML,增强页面的动态和交互性。它可以包含内联脚本或引用外部脚本文件,常用于图片操作、表单验证和内容动态更新。
|
12天前
|
JavaScript 前端开发
HTML 脚本3
本教程介绍JavaScript的基本用法,包括在HTML中直接输出文本、响应事件和处理HTML样式。示例代码展示了如何使用`document.write()`输出文本,通过点击按钮触发事件,以及利用`document.getElementById().style`修改元素样式。
|
6月前
|
存储 JavaScript 前端开发
HTML 脚本
HTML 脚本
|
资源调度 JavaScript
vue项目:解决v-html可能带来的XSS是跨站脚本攻击
vue项目:解决v-html可能带来的XSS是跨站脚本攻击
1251 0
|
JSON 测试技术 文件存储
Postman之Newman命令行运行脚本生成HTML报告
Postman之Newman命令行运行脚本生成HTML报告,运行:newman run ;-e 引用环境变量;-g 引用全局变量;-d 引用数据文件;-n 指定测试用例迭代的次数;-r 表示生成测试报告的文件类型,可以有多个,中间用 逗号 隔开即可;cli,html,json,junit --reporter-html-export 指定生成HTML的报告。
486 0
Postman之Newman命令行运行脚本生成HTML报告
|
XML JavaScript 前端开发
loadrunner 脚本录制-录制选项设置HTML-based URL-based Script
loadrunner 脚本录制-录制选项设置HTML-based URL-based Script
104 0
|
JavaScript 前端开发
HTML中的JavaScript中script元素 动态加载脚本
本文介绍了HTML中JavaScript的动态加载脚本的概念、优势和实现方式,并结合实例讲解了如何通过动态加载脚本实现更加灵活的控制和优化。
|
前端开发 JavaScript UED
HTML中的JavaScript中script元素动态加载脚本
在HTML中,<script>元素可以通过动态创建和添加来实现动态加载脚本。动态加载脚本可以优化页面性能和提高用户体验,但需要注意脚本的执行顺序和依赖关系。
|
前端开发 JavaScript UED
HTML中的JavaScript中script元素异步执行脚本
HTML中的<script>元素通过添加async属性可以实现异步执行JavaScript脚本。这种方式可以加快页面加载速度,提高用户体验。