常见类型-1：空，联合，枚举

常见类型-1：空，联合，枚举

1.  创建资源

开始实验之前，您需要先创建实验相关资源。

1. 在实验室页面，单击创建资源。
   
2. （可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。
   

说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。

实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。

资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息

2.  实验环境操作指南

在本系列实验中，有两种方法可以进行操作。一种是控制台方式，另一种是远程桌面的方式。接下来我们分别介绍这两种操作方式。

控制台方式

使用控制台方式操作实验，上手比较简单，对网络带宽的要求也不高。但是在编辑代码时，需要使用Vim工具进行文本编辑。对于初学者来说使用Vim工具需要熟悉其操作模式。

进入控制台环境

资源创建成功后，我们在右侧选择切换到Web Terminal。

切换到dev用户

本次实验的开发环境部署在dev用户的~/web目录中。因此我们执行这两条命令即可进入实验环境

su dev
cd ~/web

Vim工具的用法

vim是一个命令行下的文本编译器。使用vim编辑文件时。我们只需要通过快捷键，而不需要鼠标就可以对文本文件进行编辑。但是这种文本编辑器的用法和常见的图形界面编辑器使用习惯差别较大。接下来我们简单介绍vim的使用。

3.1 进入Vim

在命令行中输入vim即可进入操作界面，这时的Vim没有打开任何文件。

vim

3.2 Vim的三种模式

和普通编译器不同的是，Vim包含了三种操作模式。分别是命令模式，编辑模式，末行模式。接下来我们来简单介绍一下三种模式的用法。

3.3 命令模式

在刚进入界面的时候，vim默认状态为命令模式。这种模式下，无法编辑文件，键盘输入也不会在屏幕上有任何显示，这种情况往往会让使用者感到困惑。这时候我们可以输入大写的ZZ，即可退出Vim。

3.4 编辑模式

我们继续输入vim回到编辑器。在命令模式下我们按下小写的i。此时我们会发现下部的提示已经变成了插入。这表示vim已经进入了编辑模式。

在编辑模式下我们就可以像正常的编辑器一样编辑文件。此处我们输入hello world。

        在编辑完成之后，如果我们想退回命令模式，只需要按ECS键即可。按下该按钮之后我们会发现下部的插入提示消失了，这就表示vim回到了命令模式。

3.5 末行模式

回到命令模式之后，我们按下:键，这时下部的提示会变成:，这就表示vim进入了末行模式。在末行模式下，我们同样使用快捷命令操作vim，但是和命令模式不同的是，末行模式中输入的命令会显示的屏幕的最后一行。

接下来我们继续输入w demo.txt并按回车。会提示显示为如下内容。表示上面的内容已经保存到了demo.txt中。

最后我们按:q，该命令也可以退出vim。

4. 编辑index.js文件

4.1 创建新文件

当我们希望编辑特定文件时，我们可以输入vim 文件名。这时候在下部会看到"index.ts" [新]。表示vim自动创建了新文件。

vim index.ts

4.2 复制粘贴

在编辑模式下，vim同样可以使用ctrl+v进行粘贴。我们按i进入编辑模式之后，将下列内容粘贴到vim中。

//vim编辑模式和命令模式的常用命令:
//在编辑模式中：可以使用 上 下 左 右 按键移动光标
//在命令模式中：可以使用 h j k l 命令移动光标
//在编辑模式中：可以使用退格或者DEL键删除字符
//在命令模式中：可以使用 x 命令删除字符
//在命令模式中：可以使用 dd 命令删除整行文字（谨慎使用！）
//在命令模式中：可以使用 ggdG 命令删除全部文字（谨慎使用！）
//在命令模式中：可以使用 u 命令撤销操作
//在命令模式中：可以使用 ctrl + r 命令重做操作。

4.3 文件内容的查找

在命令模式下，除了按:命令之外，还可以使用/命令进入末行模式，通过/进入末行模式之后，输入相关的内容即可进行全文检索。我们在命令模式下输入/dd。

光标就会移动到相关字符上。

4.3 文件的保存和放弃

当我们编辑完成之后，可以在命令模式中通过ZZ命令直接保存并退出编辑器，也可以通过在末行模式中通过:w单独保存文件。如果我们希望通过末行模式保存并退出，可以使用:wq。

但是需要注意的时，如果文件在修改之后没有保存，是无法通过:q退出的。如果编辑过的文件是只读属性也无法通过ZZ退出。这时我们就可以使用:q!命令放弃所有的编辑内容，强制退出vim。

远程桌面方式

使用远程桌面方式进行实验是，可以使用VS Code编译器进行代码的编写和操作，相对控制台方式更加的直观。但是这种方式对网络带宽的要求比较高。

进入网页环境

1.1 进入远程桌面

资源创建成功后，我们在右侧选择切换到远程桌面。

1.2 启动浏览器

在远程桌面页面中，点击Chromium网页浏览器。

登录RAM用户

2.1 打开网页

浏览器启动后会默认打开阿里云的RAM用户登录页。在登录页面中我们点击下一步按钮。

2.2 获取密码

接下来我们需要输入RAM用户的密码。密码显示在实验控制台左侧，我们点击子用户密码右侧的复制按钮。

复制完成后，我们在用户密码框中按Ctrl + V 复制密码，然后点击登录按钮

进入ECS的远程连接。

3.1 进入ECS控制台

登录成功后，页面跳转到控制台，我们在控制台的搜索框中输入ECS，然后点击云服务器ECS进入云服务器控制台。

3.2 进入远程连接界面

在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。

3.3 选择VNC远程连接

在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项，则可点击展开其他登录方式按钮。

登录VNC远程连接

4.1 初始化VNC密码

初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。

输入两次新的VNC密码，并点击确认。

4.2 登录VNC

VNC密码设置成功后，输入密码并点击确认。

4.4 进入图形界面

VNC登录成功后会看到实验ECS的登录界面，在登陆界面中我们点击DEV用户图标

4.5 在图形界面中登录

在密码框中输入默认登录密码Dev12345。即可进入图形实验环境

使用VS Code编辑器

登录图形实验环境之后，接下来我们来启动VS Code 编辑器。

5.1 进入应用程序列表

首先我们点击界面的下方的显示应用程序按钮。

5.2 启动VS Code

在应用程序列表中选择最后一页

然后点击VS Code应用图标

5.3 选择文件

在VS Code 编译器中，左边区域为文件列表，可以选择要编辑的文件

5.4 编辑文件

在VS Code中，右上区域为文件编辑区，可以进行文件内容编辑

5.5 操作终端

在右下区域的终端选项卡，为控制台区域，可以进行命令输入执行

3.  空类型

空类型

在前面实验中，我们介绍了number，boolean，string三种基本类型。除了这基本类型之外TypeScript在JavaScript的语法基础上还做了一些其他的类型扩展。在本小节我们为大家讲解一些比较常用的类型。

1. 空值限制
   

在JavaScript中，我们用undefine来表示一个变量没有赋值，但是在TypeScript中默认情况下变量不允许为空值，这也就避免了开发中经常出现的空引用异常。我们修改index.ts文件为如下内容

var n:number
console.log(n)

在终端选项卡输入如下命令编译并查看。

tsc

会发现由于n没有初始化，因此这时对n进行引用TypeScript编译器就会报错。

2. undefined类型
   

由于默认情况下无法在TypeScript中对变量赋空值，因此在TypeScript中将undefined定义为了一种特殊类型。但是在默认的严格模式下我们无法将undefined类型赋值给其他类型普通变量。我们修改index.ts文件为如下内容

var n:number
var undef:undefined
n = undef

在终端选项卡输入如下命令编译并查看。验证undefine无法赋值给普通变量

tsc

3. null类型
   

除了undefined之外null也被用来表示空值。这两个类型的意义很接近，如果使用==来判断undefined和null，结果会返回的相等，但是两者在使用的时候还是略有差别。

一般来说而undefined用来表示一个变量尚未被赋值，而null类型用来表示一个变量具有值，但是它的值为空。下面我们用一个例子来说明两者的不同：

例如用户信息中电子邮箱为可选字段，当用户没有电子邮箱时，该字段填写null比较合适。而如果用户信息中需要强制包含手机号，但是用户尚未完成手机号的认证。这时候手机号填写undefined更加的合适。

另外这两者在一些函数的调用中的结果也略有不同，例如我们使用new Number()将两者转换成number。会发现两者的转换结果不同。我们修改index.ts文件为如下内容

//比较类型
console.log(undefined == null)
//输出类型
var UN;
console.log(UN)
var N:null
N = null;
console.log(N)
//参数调用
console.log(new Number(null));
console.log(new Number(undefined));

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

4.  联合类型

在之前的实验中，我们使用的TypeScript类型的变量都只能有一个具体的类型，但是在某些特殊情况下，我们可能会允许一个变量拥有多种类型，例如我们经常使用console.log函数，他的参数就可以接受各种类型的变量。因此本小节我们就来了解TypeScript中的联合类型。

1. 联合空值
   

联合类型最常见的一种用法，是用来显示表示一个值允许为空。在上一个小节中我们了解到，TypeScript将undefined作为一个特殊的类型处理，而一个非undefined类型的变量的值是不允许为空。但是在特殊情况下我们需要为变量设置为空时，就可以使用联合类型将变量和类型和undefined通过|关键字生成联合类型。我们修改index.ts文件为如下内容。

var emptystr: string | undefined;
emptystr = "Hello World";
console.log(emptystr)
emptystr = undefined;
console.log(emptystr)

在终端选项卡中输入如下命令。我可以看到string | undefined类型的关键字，既可以接受字符串，也可以接受undefined空值。

tsc
node index.js

2. 联合类型的调用
   

在上一个步骤种我们介绍了联合空值的用法，但是如果TypeScript无法判断我们的变量是否为空的时候，我们将无法直接调用变量的属性和方法。我们修改index.ts文件为如下内容。

function strLength(val:string | undefined):string
{
    return "字符串长度:" + val.length
}
console.log(strLength("Hello World"));
console.log(strLength(undefined));

在终端选项卡中输入如下命令。我可以看到由于无法确定变量是否为空，因此编译发生错误。

tsc

3. 空值判断
   

因此遇到和空值联合的类型，我们在使用之前要通过if方法对变量进行筛选，TypeScript的编译器会根据前后的代码逻辑进行判断，只有前后代码逻辑能保证变量不为空情况下，我们才能执行变量相应的属性或者方法。

而对于更复杂的多类型联合时，变量的具体类型判断，我们将在后面的实验中学习。我们修改index.ts文件为如下内容。

function strLength(val:string | undefined):string
{
  if( val != undefined ){
        return "字符串长度:" + val.length
    }
    else{
        return "字符串为空"
    }
}
console.log(strLength("Hello World"));
console.log(strLength(undefined));

在终端选项卡中输入如下命令。我可以看到属性值读取成功

tsc
node index.js

5.  枚举类型

除了空类型和联合类型之外。另一种常用的特色类型为美剧类型，枚举类型一般用来表示一些常量的集合，比如星期一到星期日七个常量就可以组成一个枚举。枚举也是大多数编程语言支持的类型。

1. 枚举类型语法
   

枚举类型，采用enum 枚举名的格式定义，在枚举类型种，我们可以添加多个枚举值。当我们使用枚举类型时，我们采用枚举名.枚举值的格式。在定义枚举值之后，我们可以尝试使用console.log输出枚举值，在我们修改index.ts文件为如下内容

enum fruit{
    apple, banana, orange
}
var f:fruit = fruit.banana;
console.log(f);

在终端选项卡输入如下命令编译并查看。我们会发现枚举值在运行时是以数字的形式存储。

tsc
node index.js

2. 自定义枚举值
   

在上一个步骤种我们了解到，枚举值使用数字进行存储的，在默认的情况下，枚举值按照定义时的顺序，从0开始累加计数。

我们除了可以让枚举值使用默认的数字之外，还可以为枚举值自定义数字。我们修改index.js文件为如下内容。

enum fruit{
    apple = 10, banana = 100, orange = 150
}
console.log(fruit.apple);
console.log(fruit.banana);
console.log(fruit.orange);

在终端选项卡输入如下命令编译并查看。同时我们再用cat命令来查看枚举值编译后的结果

tsc
node index.js
cat index.js

3. 枚举类型的常见用法
   

在上一个步骤种我们通过cat命令来查看编译后的JavaScript代码。我们可以发现枚举名会被编译成一个JavaScript对象，所有对枚举名的操作都是对这个JavaScript对象的操作。

实际上在使用枚举值的时候。我们可以通过枚举名[]的格式。在枚举值的字符串，枚举值，甚至是枚举值的数字进行转换。

但是要注意的是使用枚举名[数字]的形式有可能会导致undefined的出现，因此并不推荐这种用法。

enum fruit{
    apple = 10, banana = 100, orange = 150
}
console.log(fruit["banana"]);
console.log(fruit[fruit.banana]);
console.log(fruit[10]);
console.log(fruit[1]);

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

6.  字面量类型

在上一个小节种，我们学习了枚举类型。通过学习我们了解到，枚举类型实际上通过自定义对象和数组来实现的。除了枚举类型之外，在TypeScript种还有一个简单的表示常量值集合的方式。也就是字面量类型。

1. 字面量类型
   

在TypeScript中，我们可以直接将string，number，boolean三种类型的常量值直接设置为类型。这种类型被称为字面量类型。我们修改index.ts文件为如下内容。

var v:"UP";
v = "UP";
v = "Hello World"

在终端选项卡输入如下命令编译并查看。可以看到字面量变量只能设置为定义时所用字符串的值，而不能时其他值。

tsc
cat index.js

2. 字面量的应用
   

一般来说单独的使用字面量类型并没有太多的意义。字面量变量常用的用法是和联合类型组合使用，从而限定变量的值为特定的范围。我们修改index.ts文件为如下内容。

var v:"UP" | "DOWN" | "LEFT" | "RIGHT";
v = "UP";
console.log(v);
v = "DOWN"
console.log(v);

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

3. 字面量和枚举
   

字面量类型的用法和枚举类型比较相似，接下来我们从编译之后的JavaScript代码层面，来看一下两者的区别，我们修改index.ts文件为如下内容。

var v:"UP" | "DOWN" | "LEFT" | "RIGHT";
v = "UP";
console.log(v);
v = "DOWN"
console.log(v);
enum enumtype {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}
console.log(enumtype.UP)
console.log(enumtype.DOWN)

在终端选项卡输入如下命令编译并查看。我们可以看到字面量类型和枚举类型最大的区别在于，字面类是靠TypeScript的编译器进行处理的，其存储的值就是字面量本身，而枚举类型是靠JavaScript运行时的代码进行处理的，其存储的值是数字。

tsc
node index.js

实验链接：https://developer.aliyun.com/adc/scenario/a995bf50f9a545c78612da43e2e109a8