- TypeScript+Vue.js前端开发从入门到精通
- 张益珲编著
- 799字
- 2024-12-30 15:12:13
2.1.2 TypeScript语言版本的HelloWorld程序

准备好了开发环境,相信你已经迫不及待地想要尝试一下TypeScript的使用了。我们先通过最原始的方式来使用TypeScript,这有助于你对TypeScript的工作流程进行理解。
可以使用任何文本编译器来创建一个名为1.HelloWorld.ts的源码文件,在其中输入如下代码:
【代码片段2-1 源码见附件代码/第2章/1.HelloWorld/1.HelloWorld.ts】

代码本身没有太多逻辑,我们不做过多介绍。之后从终端进入源码文件所在的目录下,执行如下指令来进行TypeScript源码文件的编译:
tsc 1.HelloWorld.ts
编译成功后,你会发现目录中多了一个1.HelloWorld.js文件,这就是编译后的JavaScript目标代码,可以看到其中的代码如下:

此JavaScript文件可以直接运行。例如执行如下指令,即可在终端看到输出的“Hello, TypeScript”:
node 1.HelloWorld.js
你或许有些奇怪,TypeScript源码和JavaScript目标代码看起来完全一样。的确如此,因为在TypeScript源码中,我们尚未使用TypeScript提供的特性。下面我们为getString函数增加返回值类型和参数类型,修改TypeScript源码如下:

上面的代码中,我们指定了getString函数中的参数为字符串类型,且此函数的返回值类型也是字符串类型。如果将此TypeScript代码直接当作JavaScript代码来执行,会遇到语法错误的问题,对其进行编译后,可以发现编译产物与之前1.HelloWorld.js文件中的代码一模一样,编译结果将这类TypeScript的类型信息去掉了。
或许你还是不理解,添加这些TypeScript的类型信息有什么用呢,编译的产物不还是普通的JavaScript代码,我们直接写JavaScript代码不是更加方便吗?对于简单的项目的确如此,但是想象一下,当项目变得庞大后,我们使用的JavaScript对象或函数都可能是其他模块提供的,如果没有明确的参数类型信息,使用者很可能不知道如何传参,也极有可能传递了错误的参数,为项目埋下隐患,并最终在生产环境中以故障的形式出现。你可以尝试一下,再次修改TypeScript的源码如下:
【代码片段2-2 源码见附件代码/第2章/1.HelloWorld/1.HelloWorld.ts】

上面的代码在使用getString函数时,我们故意将参数设置成数值类型,编译此文件,可以看到控制台会输出如下异常信息:

这种编译错误的提示非常清晰,很方便开发者查找错误原因,并且避免了错误在运行时才暴露的问题。对于大型项目开发来说,这真的是太重要了。