语言入门-2:基本类型
1. 创建资源
开始实验之前,您需要先创建实验相关资源。
- 在实验室页面,单击创建资源。
- (可选)在实验室页面左侧导航栏中,单击云产品资源列表,可查看本次实验资源相关信息(例如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编辑模式:复制粘贴 测试 //在编辑模式中:可以使用上下左右 按键移动光标 //在命令模式中:可以使用hjkl 命令移动光标 //在编辑模式中:可以使用退格或者DEL键删除字符 //在命令模式中:可以使用x 命令删除字符
然后我们可以在命令模式和编辑模式下测试这几个命令的用法。
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进入云服务器控制台。
3.2 在ECS控制台中,我们找到实验创建的ECS,点击右侧的远程连接按钮。
3.3 在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项,则可点击展开其他登录方式按钮。
登录VNC远程连接
4.1 初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。
4.2 输入两次新的VNC密码,并点击确认。
4.3 VNC密码设置成功后,输入密码并点击确认。
4.4 VNC登录成功后会看到实验ECS的登录界面。
3. number类型
在前面的使用中我们为大姐介绍了TypeScript的基本语法,通过学习大家可以发现,TypeScript最大的特点就是为JavaScript提供了数据类型的支持。在TypeScript语法中,已经内置了很多种的原生数据类型。下面我们就来介绍最常用的三种数据类型。
- number类型
在TypeScript中number类型用来保存数字类型,和C,JAVA等语言不同的是,TypeScript中的number类型并不区分正负数和整数小数浮点数。我们修改index.js为如下内容。
var n:number = 0; console.log(n); n = -1; console.log(n); n = 1/3 console.log(n); n = 5.0e10; console.log(n);
在终端选项卡输入如下命令编译并查看。
tsc node index.js
- number的多种写法
同时number类型还支持多种不同进制的写法,比如十六进制,八进制,二进制。我们修改index.js为如下内容。
var n:number = 0xaaa;//十六进制 console.log(n); n = 0b11010101;//二进制 console.log(n); n = 0o777;//八进制 console.log(n);
在终端选项卡输入如下命令编译并查看。
tsc node index.js
- number类型的精度
还需要注意的是,number类型在表示数字时有精度的限制,我们修改index.js为如下内容。
var n:number = 123456789012345678900000000 console.log(n) n = 1234567890123456789 console.log(n) n = 0.1234567890123456789 console.log(n)
在终端选项卡输入如下命令编译并查看。可以看到无论数字的绝对值大或者小,数字的精度都会受到限制。
tsc node index.js
4. boolean类型
- boolean类型
boolean类型用于表示对错值,属于TypeScript中一种比较简单的类型。只有true和false两种属性值。
除了直接使用常量赋值之外,TypeScripe中的判断语法的计算结果也是boolean。我们修改index.js为如下内容。
var b : boolean; b = false; console.log(b); b = (1 == 1.0) console.log(b);
在终端选项卡输入如下命令编译并查看。
tsc node index.js
- Boolean类型
需要注意的是,在TypeScript中,除了boolean类型之外。还有另一个Boolean类型。和作为基本类型的boolean不同的时,这个类型是TypeScript通过高级类型对boolean类型的封装。
接下来我们来看一下两种类型的互相转换,我们修改index.js为如下内容。
var b:boolean = true; var B:Boolean = new Boolean(b);//boolean类型转换成Boolean类型 console.log(B); b = B.valueOf();//Boolean类型转换成boolean类型 console.log(b);
在终端选项卡输入如下命令编译并查看。会发现Boolean类型和boolean类型进行了转换
tsc node index.js
- 类型转换
Boolean类型除了可以作为基本类型的高级封装之外,还可以用来将其他类型转换成boolean,我们来看两个例子,一个是从字符串到boolean的转换,另一个是从number到boolean的转换。
会我们修改index.js为如下内容。
console.log(new Boolean("true").valueOf()) console.log(new Boolean("").valueOf()) console.log(new Boolean(0).valueOf()) console.log(new Boolean(100).valueOf())
在终端选项卡输入如下命令编译并查看。在TS中,所有的非0数字都会被转换成true,所有的非true(不区分大小写)字符串都被转化成false。
tsc node index.js
5. string类型1
- string类型
string类型用于表示字符串,他可以说是TypeScript中使用的最多的基本类型。大部分的应用都离不开字符串的使用。以下是string类型的常见用法,包括使用""或者''定义字符串,混合使用"和',使用\转义字符,以及使用+连接多个字符串或者连接字符串和其他元素。我们修改index.ts文件为如下内容
var s:string = "Hello World" console.log(s); s = "Hello 'World'" console.log(s); s = 'hello world' console.log(s); s = 'hello "world"' console.log(s); s = 'hello \'world\'' console.log(s); s = "Hello" + " " + 'world' console.log(s); s = "Hello " + 123 console.log(s);
在终端选项卡输入如下命令编译并查看。
tsc node index.js
- 其他类型的转换
在TypeScript中绝大多数的类型都包含了toString()方法。通过这种方法。可以将属性转化成string字符串。我们使用的console.log()日志输出方法,就是使用toString()将各种类型的属性转化成string。我们修改index.ts文件为如下内容。
var n:number = -1.45 var b:boolean = true; console.log(n.toString()) console.log(b.toString())
在终端选项卡输入如下命令编译并查看。
tsc node index.js
- string到number的转化
在开发过程中,number和string的互相转换时非常常见的操作。其中string类型到number类型的转化具有专门的转化方法,分别是parseInt和parseFloat。我们修改index.ts文件为如下内容。
var n : number; n = parseFloat("10.5"); console.log(n); n = parseInt("10.5"); console.log(n);
在终端选项卡输入如下命令编译并查看。可以看到parseInt方法会省略字符串中的小数部分。parseFloat则会保留小数部分。
tsc node index.js
6. string类型2
- string的+连接
在实际开发过程中,我们经常遇到需要将不同的类型拼接成一个字符串的情况,比如在一条人员信息中通常需要包括姓名,年龄,出生日期,性别等不同类型的数据。如果对每一个需要元素都执行一次toString()然后再拼接。代码会变得非常冗长,因此TypeScript提供了字符串的+运算符解决这个问题。
如果在+运算符的两个参数中有一个是字符串,那么+运算符的逻辑就变为将前后两个参数转换成字符串然后拼接。同时+运算符可以连续使用,以拼接多个参数。我们修改index.ts文件为如下内容
var s:string s = "" + 1 + 1 +" str "+ true; console.log(s)
在终端选项卡输入如下命令编译并查看。我们发现如是字符串连接,即使是两个数字相加也会改变原有逻辑。
tsc node index.js
- 相等和严格相等
在TypeScript中判断两个元素是不是相等一般使用==关键字。由于TypeScript语言是比较灵活的动态语言,所以在使用==关键字时,即使是前后两个参数的类型不完全一致,TypeScript也会先将两个参数进行类型转换,然后再进行比较。
但是在某些情况下我们需要对两个元素进行严格的判断,也就是在比较的过程中,完全禁止两个参数进行类型转换。在这种情况下,我们可以使用TypeScript提供的===关键字。
接下来我们来使用这种两方法比较string类型和String类型,String类型和Boolean类型类似,也是对string类型的高级封装。我们修改index.ts文件为如下内容
console.log('abc' == new String('abc')) console.log('abc' === new String('abc'))
在终端选项卡输入如下命令编译并查看。我们发现两者使用相等判断的结果为true,但是使用严格相等的判断为false。
tsc node index.js
- 字符串大小比较
除了使用相等和严格相等判断之外,string还支持>,<等关键字,对字符串进行进行大小判断。在字符串判断时,TypeScript会按照ASCII字符的顺序,从两个字符串的第一个字符进行比较。如果不等就返回比较结果,如果相等就继续比较下一个字符。这种字符串比较往往用于对字符串进行排序的操作。修改index.ts文件为如下内容
console.log('123a' > '123') console.log('123' > '12.3') console.log('一二三' < '四五六') console.log('123' <= new String('123'))
在终端选项卡输入如下命令编译并查看。我们发现字符串的大小比较,使用的是相等判断,而不是严格相等。
tsc node index.js
实验链接:https://developer.aliyun.com/adc/scenario/5f5e544fb2474bec957749b828b1520b