首页 前端知识 【TypeScript】HTML直接引入TypeScript脚本

【TypeScript】HTML直接引入TypeScript脚本

2024-04-29 12:04:11 前端知识 前端哥 871 966 我要收藏

大家都知道,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中的链接下载。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6453.html
标签
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!