【沉浸式学习】一起学习Typescript的第一天--10分钟上手TypeScript

601 阅读4分钟

这是我参与新手入门的第1篇文章!!!

双双碎碎念: 咳咳咳,看到沉浸式标题应该会有猜想叭,什么是沉浸式学习呢?就是此刻你们正在本人特意营造的学习氛围中。所以呢,在阅读本文十分钟内不许回复微信哦,不许东张西望看身边漂亮的小姐姐哦,每天和双双一起沉浸式学习十分钟叭~

正如你们所见,避免不了的俗套流程,是需要先介绍Typescript的。

Typescript -- Javascript的超集

作为一门强大的静态类型检查工具,如今在许多中大型应用程序以及流行的JS库中均能看到TypeScript的身影。JS作为一门弱类型语言,在我们写代码的过程中稍不留神便会修改掉变量的类型,从而导致一些出乎意料的运行时错误。然而TypeScript在编译过程中便能帮我们解决这个难题,不仅在JS中引入了强类型检查,并且编译后的JS代码能够运行在任何浏览器环境。

10分钟上手 TypeScript

跟着官方文档一起使用TypeScript来创建一个简单的Web应用叭~

安装TypeScript

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

  • 通过npm(Node.js包管理器)
  • 安装Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript,可以点这里下载哦。

针对使用npm的用户:

> npm install -g typescript

WX20210706-192445@2x.png

然后就可构建TypeScript文件啦

创建一个greeter.ts文件,新建项目或者原有项目都可以,在编辑器,将下面的代码输入到greeter.ts文件里:

function greeter(person) {
    return `Hello, ${person}`;
}

const user = 'shuangshuang';

document.body.innerHTML = greeter(user);

我们虽然使用了.ts扩展名,但是这段代码仅仅是JavaScript而已。在命令行上,找到刚创建的greeter文件目录,运行TypeScript编译器:

tsc greeter.ts

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

WX20210706-194038@2x.png

接下来让我们看看TypeScript工具带来的高级功能。 给person函数的参数添加: string类型注解,如下:

WechatIMG39.png

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

WechatIMG40.png

输入后就会看到编译器提示一个错误,类型“number[]”的参数不能赋给类型“string”的参数。 TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。要注意的是尽管有错误,greeter.js文件还是可以创建的。 所以说就算代码里有错误,仍然是可以使用TypeScript。但在这种情况下,会警告代码可能不会按预期执行。

开发时,我们可以使用接口来描述一个拥有“firstName”和“lastName”字段的对象。在TypeScript里,只在两个类型内部的结构兼容,那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用implements语句。

WX20210706-201834@2x.png

最后呢,使用类来改写!!!

  • TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。
  • 让我们来创建一个Student类,它带有一个构造函数和一些公共字段。
  • 注意哦,类和接口可以一起共作的,可以自行决定抽象的级别。
  • 还要注意的是呢,在构造函数的参数上使用public等同于创建了同名的成员变量哦。

WX20210706-203543@2x.png

重新运行tsc greeter.ts,会看到生成的JavaScript代码和之前的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

最后的最后: 在Visual Studio里打开greeter.ts,将鼠标悬停上面可以查看类型。 在某些情况下类型是可以被自动推断出来的。 重新输入一下最后一行代码,看一下自动补全列表和参数列表,会根据DOM元素类型而变化。 将光标放在 greeter函数上,点击F12可以跟踪到它的定义。 还有哦,可以右键点击标识,使用重构功能来重命名。

这些类型信息以及工具可以很好的和JavaScript一起工作哦。