TypeScript的第一天

只想要周末双休
379 阅读2分钟

这是我参与11月更文挑战的第7天，活动详情查看：11月更文挑战

JavaScript 是世界上最常用的编程语言之一，已成为网络的官方语言。开发人员使用它来编写可以在任何平台和任何浏览器中运行的跨平台应用程序。

尽管 JavaScript 用于创建跨平台应用程序，但它并不是为涉及数千甚至数百万行代码的大型应用程序而设计的。JavaScript 缺乏支持当今复杂应用程序的更成熟语言的一些功能。集成开发编辑器 (IDE) 会发现管理 JavaScript 和维护这些大型代码库具有挑战性。

测试你的安装

win + r

tsc

如果未安装,那么执行下一步,如果安装了,请跳过下一步

安装npm包管理器

如果你是一个JS的开发人员可能你的你的电脑已经安装了NPM,可以检查一下

npm version

未安装的话,请访问这个页面nodejs.org/en/download…

安装typescript

cmd -> npm install -g typescript

验证安装 tsc

创建第一份TS文件

打开VS code 新建一个文件 比如module.ts

生成tsconfig.json 文件

您可以使用initTypeScript 编译器的选项生成带有默认选项的 TSConfig 文件。

  1. 在 Visual Studio Code 中，通过选择Terminal > New Terminal打开一个新的终端窗口。

  2. 在命令提示符下，输入tsc --init

    请注意，新的tsconfig.json文件已添加到资源管理器窗格中

  3. 在代码编辑器中打开tsconfig.json文件。你会看到它有很多选项，其中大部分都被注释掉了。查看每个启用选项的说明。

  4. 在tsconfig.json文件中，查找 target 选项并将其更改为"ES2015".

  5. 更新tsconfig.json文件，以便编译器将所有 JavaScript 文件保存到新文件夹中。

    两种方式 一种在 Explorer 窗格中，在您的项目中创建一个名为build的新文件夹。 另一种是更改配置 在tsconfig.json文件中，查找outDir选项，删除注释，并将参数设置为build。

  6. 保存tsconfig.json文件。

  7. 在命令提示符下，输入tsc. 这会读取tsconfig.json文件并重置项目的选项。

将以下JavaScript代码复制

function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));

image.png

经过语法检查,两个参数的类型有错误,要指定这两个参数的类型,像这样

image.png

在终端命令提示符下 tsc modules.ts

运行新生成的node .\build\module.js

image.png

新建一个modules.html 文件 复制以下的代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <title>Test JavaScript</title>
</head>
<body>
   <h1>Test JavaScript</h1>
   <p id="date"></p>
   <p>This page calls the script module01.js and is used for testing.</p>
   <script src="./build/module01.js"></script>
</body>
</html>
​

保存并在浏览器中打开,惊喜地发现它在控制台出现了

image.png

avatar
文章
阅读
粉丝