TypeScript快速上手—html中使用ts的两种方法
投稿：yin
TypeScript使用命令行编译器tsc或其他工具手动执行编译,在html使用s时编译为JavaScript,那么有没有办法简化过程,不编译直接使用,本文介绍html中使用TypeScript的两种方法
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！