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

您可能感兴趣的文章:

rollup cli开发全面系统性rollup源码分析
这篇文章主要为大家介绍了rollup cli开发全网系统性rollup源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
TypeScript数组实现栈与对象实现栈的区别详解
这篇文章主要为大家介绍了TypeScript数组实现栈与对象实现栈的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
less简单入门(CSS 预处理语言)
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充
2017-03-03
数据结构TypeScript之栈和队列详解
这篇文章主要介绍了数据结构TypeScript之栈和队列详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
JavaScript可视化图表库D3.js API中文参考
这篇文章主要介绍了JavaScript可视化图表库D3.js API中文参考,本文对常用的API给出一中文翻译,需要的朋友可以参考下
2015-01-01
前端构建 Less入门(CSS预处理器)
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
2017-03-03
详解Typescript 严格模式有多严格
这篇文章主要为大家介绍了Typescript 严格模式有多严格实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
TypeScript前端上传文件到MinIO示例详解
这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
Xterm.js入门官方文档示例详解
这篇文章主要为大家介绍了Xterm.js入门官方文档示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
requireJS使用指南
如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 
2016-04-04