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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

layui中的layer弹出层自定义样式更改背景
layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。
2023-06-06
JavaScript可视化图表库D3.js API中文参考
这篇文章主要介绍了JavaScript可视化图表库D3.js API中文参考,本文对常用的API给出一中文翻译,需要的朋友可以参考下
2015-01-01
移动设备web开发首选框架：zeptojs介绍
这篇文章主要介绍了移动设备web开发首选框架：zeptojs介绍,他兼容jquery的API,所以学起来或用起来并不吃力,需要的朋友可以参考下
2015-01-01
TypeScript 5.0 正式发布及使用指南详解
这篇文章主要为大家介绍了TypeScript 5.0 正式发布及使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
详解Typescript 严格模式有多严格
这篇文章主要为大家介绍了Typescript 严格模式有多严格实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
数据结构TypeScript之栈和队列详解
这篇文章主要介绍了数据结构TypeScript之栈和队列详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
Underscore.js常用方法总结
这篇文章主要介绍了Underscore.js常用方法总结,本文讲解了Underscore.js概述、在node.js下安装、与集合有关的方法、与对象有关的方法、与函数相关的方法等内容,需要的朋友可以参考下
2015-02-02
require.js使用方法的简单代码讲解笔记
页面需要加载多个js文件时，加载时浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；由于js文件之间存在依赖关系，必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。
2022-12-12
typescript类型体操及关键字使用示例详解
这篇文章主要为大家介绍了typescript类型体操及关键字使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
TS 中的类型推断与放宽实例详解
这篇文章主要为大家介绍了TS 中的类型推断与放宽实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10