如何在HTML中使用类型脚本
JavaScript是程序员可以在前端和后端使用的最常见的语言。但是,不清楚数据在纯JavaScript中的类型是什么,因为函数,参数和变量没有类型。这使得读取和维护项目变得困难。
如果您正在使用 JavaScript 开发一个项目,并且遇到此类问题,则类型脚本是解决这些问题的最合适语言。
类型脚本是添加静态类型的 JavaScript 的语法超集。这意味着您可以在使用类型脚本时向数据添加类型,实际上,这只不过是用JavaScript编写代码。
在本文中,我将介绍如何使用类型脚本而不是 JavaScript 开发一个简单的网站。
我将使用 VS 代码作为 IDE。
让我们从创建基本文件开始。
如您所知,基本上是一个简单的项目外观。但我想用主.ts更改文件.js因为类型脚本文件的扩展名“.ts”。我在 main.ts 中创建了一个简单的函数。
我将类型脚本文件添加到文件索引中.html就像一个 JavaScript 文件。我用文件索引中的按钮调用该函数.html。
结果是:
它给出了两个错误。第一个原因是因为函数具有类型(此处为 void)。第二个源于第一个。由于 main.ts 文件中的函数具有类型,因此在 HTML 文件中是未知的。
为了解决这个问题,我们必须安装Node.js(如果不可用),然后安装typescript包。您可以按照此链接安装 Node.js。您可以通过在终端中键入以下命令来安装typescript包。
npm install typescript
安装软件包后,我在终端中键入以下命令:
tsc script/main.ts
通过此命令,您将在文件夹脚本中看到一个新的主.js文件。生成的文件是由类型脚本转译器生成的等效的 JavaScript 文件。
现在在索引.html文件中,我调用生成的主.js文件,而不是main.ts文件。
但是在编译之后,您可能会收到此错误:“无法重新声明块范围的变量'myFunction'。
为了解决这个问题,我将代码“export{}”添加到 main.ts 的最后一行。它应该如下所示:
const myFunction = (): void => {return console.log(“Hello World!”);};export {};
结果是:
宾果游戏
请记住,在 main.ts 文件进行每次更改后,我们必须运行以下代码:
tsc script/main.ts