我们前几篇内容搭建和TS的学习环境,大家可以根据自己的需求进行配置,从今天开始我们正式学习TS相关的语法内容。我们这次先简单的介绍一些在TS中常见的数据类型。包括:字符串(string), 数值(number),布尔(boolen), 数组或者列表(array),元组(tuple),枚举(enum)。
从字面意思就可以知道,它用来表示字符串,例如我们的名字,一个单词,一篇文章等,都可以看成是一个字符串。
我们在TS中可以通过如下的形式来指定一个变量的类型为 字符串:
const name_str: string = "Tango";
当我们给一个变量指定了数据类型后,如果尝试给他赋值一个不是该类型的变量值时,VSCode则会报错。
同时我们会看到控制台也会提示有错误,并且不会将上面的代码编译为js。
还记得我们之前在配置环境时设置的那个变量吧,如下:
"noEmitOnError": true,
如果我们将它改期false
,会发现,虽然编辑器依然提示有错误,但是这并不影响js的编译。所以我建议大家还是将其设置为true
比较好。
这里的数值类型不单单指整数,也包括小数。我们可以通过下面的代码将一个变量的数据类型指定为数值类型
let age : number = 10;
age = 10.5;
我们可以看到最后age的值为10.5。这里额外有一点需要注意一下,我们的name是用const来声明的,值代表它是一个常量,是不可以不修改的。而age是let声明的,这是一个变量它是可以进行重新赋值的。
我们可以将一个一个变量的数据类型指定为boolen来表示布尔类型,布尔类型的只有两个true和false。
let is_student : boolean = false;
我们通常可以使用中括号[ ]来表示一个数组。例如下面这段代码
let data_list = [1, 2, 3, 4, 5]
我们来看一下编辑的提示是什么
可以看到它提示的是number[]
因为我们这个列表里面只有数值类型的数据,如果加入字符串呢?
let data_list = [1, 2, 3, 4, 5, "tango"];
我们可以发现它变成了(string | number)[]
这个格式,这代表它保存的是数值和字符串类型。
因此我们可以通过这种方式来指定一个变量为哪种数据类型的列表,例如下面这个只能保存数值类型的列表
let numbers: number[] = [0, 1, 2, 3, 4, 5];
这时我们如果尝试将字符串添加进去,会发现提示报错。
其他数据类型也可以使用同样的方式进行指定。如果我们需要保存多个数据类型时,这时我们可以使用“或(|)”这个表达式,关于这个表达式我们下篇介绍逻辑运行时再详细解释,你只需要知道它表示或即可。
let data_info: (string | number | boolean)[] = [1, 2, "tango", true];
我们可以看到它可以同时接收三种数据类型的的数据。并能正常的显示。
除了上面这种常见的里表外,它还支持嵌套,例如:
let myNumbers: number[][] = [
[1, 3],
[5, 7],
];
这样我们就可以创建一个二维数组了,你可以尝试一下其他的数据类型的二维数组,这里不再赘述了。当然如果这时将一个字符串或者其他类型的数据插入也是会报错的,你可以尝试一下。
元组和数组的区别通常在与元组的数据是固定的通常是不可变的。
通常我们可以通过类似下面这种方式来定义一个元组
const courseDetails: [string, number] = ["TypeScript", 100]
我们可以注意到它和数组的区别是用const来声明,然后数据类型是通过中括号来声明,并且没有使用或而是用的逗号来分隔。这意味着它对数据类型的顺序是有要求的,这时如果我们将分数和课程的名称换个位置,你会发现它报错了。
并且对元素的个数也是有要求的。
在TS中我们可以通过如下的方式来定义一个枚举类型的数据
enum UserData {
"Tango",
"Nexus",
"Tom",
"Jeck",
}
当它被编译为js时会变成如下的结构
我们发现它是以0开始做完起始值的,如果我想让他从1开始,只需要将代码改为如下即可
enum UserData {
"Tango" = 1,
"Nexus",
"Tom",
"Jeck",
}
我们可以将它作为一个数据类型赋值给一个变量
let user_num: UserData = UserData.Tango;
有的时候我们希望控制台的显示更直观些,这时候我们可以使用下面的这种方式来格式化显示
enum UserInfo {
ID = 1,
Name = "Tango",
Age = "18",
}
let user_id: UserInfo = UserInfo.ID;
let user_name: UserInfo = UserInfo.Name;
let user_age: UserInfo = UserInfo.Age;
console.log(`user id is ${user_id}`);
如果我们不给变量指定数据类型,那么可以将其数据类型设置为any类型的。
let any_data: any = 10;
any_data = "Tango";
这时将不会报错,可以正常的编译。
这样虽然很方便,但是不太建议使用这样的方式,因为后期维护起来稍微费劲些,而且更容易出现bug。虽然Python都是这样的弱类型,但是能指定尽量还是指定的好。
好了今天的内容就是这些,我是Tango,一个热爱分享技术的程序猿我们下期见。
我正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有