TypeScript快速上手—html中使用ts的两种方法

更新时间：2024年07月27日 10:35:04 投稿：yin

TypeScript使用命令行编译器tsc或其他工具手动执行编译,在html使用s时编译为JavaScript,那么有没有办法简化过程,不编译直接使用,本文介绍html中使用TypeScript的两种方法

一、常规方法：TypeScript代码编译为JavaScript

安装TypeScript编译器：首先，确保你已经安装了Node.js。然后，在终端或命令行界面运行以下命令来全局安装TypeScript编译器：

npm install -g typescript

创建HTML文件：创建一个新的HTML文件，并将其命名为index.html（或其他任何你喜欢的名称）。在文件中添加基本的HTML结构，例如：

<!DOCTYPE html>
<html>
<head>
    <title>使用TypeScript</title>
</head>
<body>
</body>
</html>

创建TypeScript文件：创建一个新的TypeScript文件，并将其保存为.ts扩展名，例如app.ts。在该文件中编写你的TypeScript代码。
编写和编译TypeScript代码：在app.ts文件中，编写你希望执行的TypeScript代码。例如：

function greet(name: string) {
    console.log(`Hello, ${name}!`);
}
greet("World");

编译TypeScript代码：在终端或命令行界面中，导航到包含你的项目文件的目录，并运行以下命令来将TypeScript代码编译为JavaScript：

tsc app.ts

这将生成一个名为app.js的JavaScript文件。

在HTML页面中引入JavaScript文件：回到 index.html 文件，在 <body> 标签内添加一个 <script> 标签，并指定引入生成的 JavaScript 文件，例如：

<!DOCTYPE html>
<html>
<head>
    <title>使用TypeScript</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>

现在你可以打开 index.html 文件，并在浏览器中运行它。JavaScript代码将执行，并在控制台中输出”Hello, World!“。

二、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.js和typescript.compile.min.js可以从GitHub的README.md中的链接下载。

三、总结

到此这篇关于TypeScript快速上手—html中使用ts的两种方法的文章就介绍到这了,更多相关html中使用typescript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

TypeScript中的递归类型示例解析
这篇文章主要为大家介绍了TypeScript中的递归类型示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
TypeScript 基础数据结构哈希表 HashTable教程
这篇文章主要为大家介绍了TypeScript 基础数据结构哈希表 HashTable教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
CesiumJS源码杂谈之从光到 Uniform
这篇文章主要为大家介绍了CesiumJS源码杂谈之从光到Uniform的使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
使用typeScript 进行扁平化数据转树实现demo
这篇文章主要介绍了使用typeScript 进行扁平化数据转树实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
自动生成typescript类型声明工具实现详解
这篇文章主要为大家介绍了自动生成typescript类型声明工具实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
TypeScript 高级数据类型实例详解
这篇文章主要为大家介绍了TypeScript 高级数据类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
FastAdmin表单验证data-rule插件—Nice-validator的使用方法
FastAdmin的表单验证data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常强大的表单验证插件,通过简单在元素上配置规则,即可达到验证的效果,怎么使用Nice-validator插件呢
2023-09-09
联合类型Union Types与交叉类型Intersection Types区别解析
这篇文章主要为大家介绍了联合类型Union Types与交叉类型Intersection Types区别详解
2023-06-06
浅谈Sizzle的“编译原理”
正在学习Sizzle源码或有一定前端基础的同学们，可以一边看源码一边看这些文章进行验证，所以虽然我会分析源码中的正则表达式,有大量的注释，但不会讲正则表达式的基本用法！
2015-04-04
数据结构TypeScript之链表实现详解
这篇文章主要为大家介绍了数据结构TypeScript之链表实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01