Hello World:第一个TypeScript程序

server/2024/12/23 6:38:38/

今天我们要一起动手写一个简单的 TypeScript 程序——就是那个大家都知道的经典“Hello World”程序。虽然很简单,但它将帮助我们确认一切设置正常,并且我们能开始使用 TypeScript 来编写代码了!

2.1 我们来写一个“Hello World”程序吧

首先,我们来创建一个简单的程序,打印一行文本:“Hello, TypeScript!”看似很简单,但在这背后,我们可以了解很多 TypeScript 的基础知识。

2.1.1 第一步:创建一个 TypeScript 文件

假设你已经安装好了 Node.js 和 TypeScript,接下来我们来创建一个文件。打开你的编辑器(推荐使用VSCode),创建一个新文件,命名为 hello.ts。这就是我们要编写 TypeScript 代码的地方。

hello.ts 文件中,输入以下代码:

typescript">let message: string = "Hello, TypeScript!";
console.log(message);

这里的代码其实不难理解。我们定义了一个变量 message,并指定它的类型是 string(字符串)。接着,我们用 console.log()message 输出到控制台。

2.1.2 第二步:编译 TypeScript 代码

接下来,我们需要将 TypeScript 编译成 JavaScript,才能在浏览器或 Node.js 中运行。你可以在终端(命令行)中执行以下命令:

tsc hello.ts

如果一切顺利,你会看到一个新的文件 hello.js 被生成出来。它是 TypeScript 编译后的 JavaScript 代码,内容类似这样:

javascript">var message = "Hello, TypeScript!";
console.log(message);

可以看到,编译后的代码和我们写的 TypeScript 很像,但是没有了类型注解,变成了标准的 JavaScript。

2.1.3 第三步:运行 JavaScript 文件

现在,运行 JavaScript 文件,看看效果!在终端中执行以下命令:

node hello.js

你应该会看到以下输出:

Hello, TypeScript!

哇,成功了!我们刚刚运行了第一个 TypeScript 程序。

2.2 深入一点:TypeScript的类型系统

虽然这个程序非常简单,但它给我们展示了 TypeScript 的一些关键特性,特别是 类型注解。我们给 message 变量加上了 string 类型的注解,告诉 TypeScript 这将是一个字符串类型的变量。

这个类型注解有两个好处:

  1. 编译时检查:如果我们在代码中错误地将 message 赋值为一个数字或其他非字符串的类型,TypeScript 会在编译时就报错,帮我们避免了可能的运行时错误。
  2. 提高可读性:类型注解使代码更加清晰,让别人一眼就知道 message 应该是一个字符串。

2.3 问题:为什么不直接写 JavaScript?

你可能会问:既然 TypeScript 最终会被编译成 JavaScript,为什么还要使用 TypeScript 呢?为什么不直接写 JavaScript?

下面是 TypeScript 相比于纯 JavaScript 的几个好处:

  1. 静态类型检查:在 TypeScript 中,你可以为变量、函数等指定类型,编译器会提前帮你检查类型是否正确。而 JavaScript 没有这个特性,运行时才会出错。
  2. 更好的开发体验:TypeScript 提供了代码补全、类型推断等功能,开发工具(如 VS Code)能更加智能地帮你编写代码。这让你在编程时更高效、更少出错。
  3. 更适合大型项目:TypeScript 的类型系统能帮助我们在复杂的应用中更好地管理代码,减少 bug 的产生。它适合团队合作和大型项目的开发,尤其是当你需要维护很多代码时。

2.4 小贴士:自动编译(Watch Mode)

每次修改 TypeScript 文件后,我们都需要手动运行 tsc 命令来编译。虽然这对学习来说没问题,但在实际开发中,频繁手动编译比较麻烦。

幸好,TypeScript 提供了 watch 模式,让我们在代码变动时自动进行编译。你可以运行下面的命令:

tsc -w

一旦启用 watch 模式,TypeScript 会监控所有 .ts 文件的变化,当文件发生更改时,它会自动重新编译并生成对应的 .js 文件。这就像是让 TypeScript 永远保持在线状态,帮我们省去不少麻烦。

2.5 总结:成功运行第一个程序

恭喜你!你已经成功写出了第一个 TypeScript 程序,并学会了如何将 TypeScript 代码编译成 JavaScript 运行。虽然这个程序非常简单,但它帮助我们了解了 TypeScript 的核心概念:类型注解、编译、以及如何运行我们的程序。

后面我们会逐步深入了解 TypeScript 的更多特性,包括函数、类、接口等。所以,保持热情,我们的 TypeScript 之旅才刚刚开始!


http://www.ppmy.cn/server/152156.html

相关文章

electron-vite【实战】登录/注册页

效果预览 项目搭建 https://blog.csdn.net/weixin_41192489/article/details/144611858 技术要点 路由默认跳转到登录页 src/renderer/src/router/index.ts routes: [// 默认跳转到登录页{path: /,redirect: /login},...routes]登录窗口的必要配置 src/main/index.ts 中 cons…

wtforms+flask_sqlalchemy在flask-admin视图下实现日期的修改与更新

背景: 在flask-admin 的modelview视图下实现自定义视图的表单修改/编辑是件不太那么容易的事情,特别是想不自定义前端view的情况下。 材料: wtformsflask_sqlalchemy 制作: 上代码 1、模型代码 from .exts import db from …

Flutter项目兼容鸿蒙Next系统

一、环境搭建: 1.1 下载鸿蒙DevEco Studio开发工具。 下载地址:下载中心 | 华为开发者联盟-HarmonyOS开发者官网,共建鸿蒙生态 下载之前需要先登录,后面的模拟器创建还要开发者验证、审核啥的,好在审核进度还可以&am…

PaddlePaddle推理模型利用Paddle2ONNX转换成onnx模型

训练paddleocr模型,可以按照如下教程或者直接百度其他的 PaddleOCR训练自己的数据集(中英文)(全套)和C#部署(半套)_c# paddleocr-CSDN博客 将训练后的模型转换成推理模型 -c后面是你配置的de…

Linux中部署项目

1.下载JDK17 进入 /usr/local 目录,创建 java 文件夹。并将 JDK17 上传到 java 目录下。 上传成功后,通过cd命令进入Java文件夹目录,解压 JDK17 压缩包,命令 unzip zulu17.44.53-ca-jdk17.0.8.1-linux_x64.zip。 如果报错说 u…

day4:tomcat—maven-jdk

一,java项目部署过程 编译:使用javac命令将.java源文件编译成.class宇节码文件打包:使用工具如maven或Gradle将项目的依赖、资源和编译后的字节码打包成一个分发格式,如.jar文件,或者.war文件(用于web应用&#xff09…

四相机设计实现全向视觉感知的开源空中机器人无人机

开源空中机器人 基于深度学习的OmniNxt全向视觉算法OAK-4p-New 全景硬件同步相机 机器人的纯视觉避障定位建图一直是个难题: 系统实现复杂 纯视觉稳定性不高 很难选到实用的视觉传感器 为此多数厂家还是采用激光雷达的定位方案。 OAK-4p-New 为了弥合这一差距…

基于LR/GNB/SVM/KNN/DT算法的鸢尾花分类和K-Means算法的聚类分析

花瓣轮廓: 分类与聚类 使用各种模型进行鸢尾花分类和聚类 1. | 介绍 👋 🤔 数据集问题 鸢尾花分类项目是使用简单数据集实现机器学习模型的实际演示。数据集本身包含有关花瓣和萼片大小的信息,包括鸢尾属物种。通过分析鸢尾花的…