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中的链接下载。

相关文章
|
10月前
|
资源调度 JavaScript
vue项目:解决v-html可能带来的XSS是跨站脚本攻击
vue项目:解决v-html可能带来的XSS是跨站脚本攻击
860 0
|
XML JavaScript 前端开发
loadrunner 脚本录制-录制选项设置HTML-based URL-based Script
loadrunner 脚本录制-录制选项设置HTML-based URL-based Script
69 0
|
JavaScript 前端开发
HTML中的JavaScript中script元素 动态加载脚本
本文介绍了HTML中JavaScript的动态加载脚本的概念、优势和实现方式,并结合实例讲解了如何通过动态加载脚本实现更加灵活的控制和优化。
459 0
|
前端开发 JavaScript UED
HTML中的JavaScript中script元素动态加载脚本
在HTML中,<script>元素可以通过动态创建和添加来实现动态加载脚本。动态加载脚本可以优化页面性能和提高用户体验,但需要注意脚本的执行顺序和依赖关系。
302 0
|
前端开发 JavaScript UED
HTML中的JavaScript中script元素异步执行脚本
HTML中的<script>元素通过添加async属性可以实现异步执行JavaScript脚本。这种方式可以加快页面加载速度,提高用户体验。
156 0
|
移动开发 JavaScript 前端开发
HTML中的JavaScript中script元素推迟执行脚本
在HTML中,<script>元素可以通过添加defer或async属性来推迟或异步执行JavaScript脚本。这种方式可以优化页面性能和提高用户体验。
153 0
|
JSON 测试技术 文件存储
Postman之Newman命令行运行脚本生成HTML报告
Postman之Newman命令行运行脚本生成HTML报告,运行:newman run ;-e 引用环境变量;-g 引用全局变量;-d 引用数据文件;-n 指定测试用例迭代的次数;-r 表示生成测试报告的文件类型,可以有多个,中间用 逗号 隔开即可;cli,html,json,junit --reporter-html-export 指定生成HTML的报告。
334 0
Postman之Newman命令行运行脚本生成HTML报告
|
前端开发 JavaScript Python
HTML引入Python脚本
本文介绍一种向HTML中直接引入Python脚本的方法。
233 0
|
Linux Python
python脚本,从mongo取数据发送html格式表格邮件
python脚本,从mongo取数据发送html格式表格邮件
127 0
|
JavaScript
油猴脚本,批量采集页面数据复制,数据过长 JS弹出新页面 自定义html代码
油猴脚本,批量采集页面数据复制,数据过长 JS弹出新页面 自定义html代码
467 0