上手TypeScript的Helloworld

Posted 2021-03-30 开源java学习

TypeScript最近比较火，百闻不如一见，今天让我们使用TypeScript来创建一个简单的程序

安装TypeScript

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）

• 安装Visual Studio的TypeScript插件

Visual Studio 实在太大了，因此我们还是用npm吧

首先执行全局安装命令：

 npm install -g typescript

接下来构建第一个TypeScript文件，后缀是ts

function sayHello(anyone) {  

      return "Hello, " + anyone;

   }

 let anyone = "Tom cat";

 document.body.innerhtml = sayHello(anyone );

编译代码

我们使用了.ts扩展名，但是这段代码仅仅是javascript而已，其实这不是必须的

在cmd命令行运行TypeScript编译器：

tsc sayHello.ts

输出结果为一个sayHello.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！

接下来让我们看看TypeScript工具带来的高级功能。 给 anyone函数的参数添加: string类型注解以制定类型，如下：

function sayHello(anyone：string) {  

      return "Hello, " + anyone;

   }

 let anyone = "Tom cat";

 document.body.innerHTML = sayHello(anyone );

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里，我们希望 greeter函数接收一个字符串参数。 然后尝试把 anyone 的调用改成传入一个数组：

let anyone = [0, 1, 2];
document.body.innerHTML = sayHello(anyone );

重新编译，你会看到产生了一个错误。TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。尽管有错误，sayHello.js文件还是被创建了。 就算代码里有错误，仍然可以使用TypeScrip,TypeScript只是警告你代码可能不会按预期执行。