新建我们的，我们通过这一个文件，使用所有的基础类型。

代码

解释

首先用关键字 enum声明了一个 Choose 的枚举，可以选择的是救落水的妈妈还是妻子。

在枚举enum中，我们可以对里面的选项赋值，假如不赋值的话，默认从0开始，一直自动递增。

结果

编译运行之后，我们发现 choose.Mother 的值其实是 2

  1. 你老婆和你妈妈同时掉进水里你先救哪个?
  2. 你的选择是： 2

实验二

代码

  1. class Person{
  2.     name: string; // 名字
  3.     age: number; // 年龄
  4.     labels: Array<string>; // 标签组
  5.     wives: string[]; // 妻子们
  6.     contact: [string, number]; // 元组 联系[联系地址，联系电话]
  7.     other: any; // 备注
  8.     saveMonth: boolean = true; // 是否救落水的妈妈
  9.     constructor(){}
  10.     answer() : Choose{
  11.         if (this.saveMonth === false){
  12.            return Choose.Wife;
  13.         }
  14.         return Choose.Mother;
  15.     }
  16.     hello() : void{
  17.         console.log('hello~ i\'m ' + this.name);
  18.         // return undefined;
  19.         // return null;
  20.     }
  21.     empty(){}
  22.     down() : never {
  23.         while (true){}
  24.         // throw new Error('error')
  25. }
  27. let zhangsan = new Person();
  29. zhangsan.name = "张三";
  30. zhangsan.age = 28;
  31. zhangsan.labels = ["颜值逆天", "年轻多金"];
  32. zhangsan.wives = ["一号","二号","三号"];
  33. zhangsan.contact = ["北京xxxxxxx别墅", 2];
  34. zhangsan.saveMonth = false;
  35. zhangsan.other = '不好不坏的人';
  37. let len = (<string>zhangsan.other).length;
  39. console.log(len);
  40. question(zhangsan.answer());
  42. zhangsan.hello();
  44. console.log(zhangsan.empty());

解释

这里我们声明了一个 Person 的类，包含了一下属性。

  • name 名称
  • age 年龄
  • 标签数组，每一个人都可以打上一些标签，代表一个人的特点
  • wives 妻子数组，可以是一个，也可以是很多个，取决于个人的道德
  • contact 联系方式，这是一个元组，语法跟数组类似，只不过提前规定了数组里面每一项的类型，所以说我们只能按照规定传入。
  • saveMother 是否救妈妈
  • other 备注，这是一个 any 类型表示任意类型

和以下方法

  • answer 根据 saveMother 这个属性去回答之前的问题。
  • hello 打招呼，我们限定了返回值是 void ，你可以解开注释，你会发现 void 可以接受 null 和 undefined 的返回值。
  • empty 这是一个空的方法，用来查看函数的默认返回值
  • down 方法返回 never，表示不会结束，或者出错。（非常不常用）

这里我们构造了一个虚拟的年少多金的张三，给他赋值了一些属性。

为什么需要any类型？

当我们去访问 any类型的 other 的时候，ts 并不知道此时的other是 string 类型，所以它不会提示 string 的相关方法。

当我们已经知道 any 的变量，具体为什么类型的时候怎么办？答案是，强制转换。

第一种方法

  1. <string>zhangsan.other

第二种方法

  1. zhangsan.other as string

此时我们随便选一种方法进行测试，我们发现，代码编辑器立刻就显示了string上面可以操作的一些方法。基础类型 - 图1

结果

编译之后。我们可以得到一下结果

  1. 6
  2. 你老婆和你妈妈同时掉进水里你先救哪个?
  3. 你的选择是： 1
  4. hello~ i'm 张三
  5. undefined

说明 empty 默认方法返回的是 undefined

定义变量

  1. let zhangsan = new Person();

这里我们使用 let 定义变量，而不是 var，因为var存在一些缺陷，所以被废弃掉了。

  1. const PI = '3.1415926'

不变的值就用 const ， 声明变量之前，请先问自己一句，这个值需要修改吗？

声明类型

  1. let 变量名称 : 变量类型 = 变量的值
  2. let word : string = 'how'

:冒号这个标点符号，在语义中的作用就是，对冒号之前的东西进行解释和阐述。

比如

  1.  let 我： 宇宙超级无敌大帅哥 = DevOps

同理

  1. string 类型的 word 是 'how'

变量类型可以是

  • number
  • string
  • 某类型数组 -> 某类型[] Array<某类型>
  • boolean
  • 元组

同样对于方法来说

  1. hello() : void

在编程的世界里面()常常跟函数，方法一起出现，所以我们这里把它读作方法

同时:对方法和函数的解释就是告诉你它的返回值

  1. hello 方法 返回 空
  1. hello -> hello
  2. () -> 方法
  3. : -> 返回值
  4. void -> 空

读起来就是，hello方法的返回值是空

  1. <string>zhangsan.other

我把它看做为 zhangsan.other 打上一个标签。

我给你打上什么类型的标签，你就是什么类型。

就像这幅图一样，宝宝在尝了一口这个奶瓶里面的奶之后，立马给它打了一个<Bad>标签，表示不好喝，同时再给宝宝喂的时候，宝宝极力的晃脑袋。

  1. zhangsan.other as string

而这个方式则比较简单， as 的中文意思就是作为，如同什么一样。

我让你作为是 string 就是 string，就是要让你像 string 一样。

  1. zhangsan.other 如同 string 一样

同理我们来改一下套马杆的飞驰的骏马像疾风一样

  1. 飞驰的骏马 as 疾风

这是不是很程序员！！

变量解构

小小的解构里面大学问，很有讲究。

相亲讲究个门当户对，解构讲究个对称。

增加你的代码

  1. let [ a, b, c] = [2, 8 , 16]
  3. console.log(a, b , c)

结果

= 就像镜子一样，let 的这一边放什么变量，就可以得到右边的值。

栗子一

这一次我们以非诚勿扰为例，公开约~，刺激奔放。

此时我们的男嘉宾Alex上场了，他是来自………，

此时 Alex 就像这样

  1. let [ , , Alex ] = [ 2, 8, 16 ]

结果 Alex 成功把 16 号带走了，回家生猴子去了。

修改你的代码

  1. let [ Alex, ...X ] = [ 5, 7, 12, 18 ];
  3. console.log(Alex)
  4. console.log(X)
  1. 5
  2. [ 7, 12, 18 ]

栗子二

男嘉宾 Alex 因为房钱谁给的原因，跟女嘉宾打起来了，立刻就闹掰了，或许这是预谋好的，谁又知道呢？Alex 继续联系导演，导演决定让年少多金的 Alex 再次上场。

….

5号，7号，12号，18号为 Alex 留灯了。

Alex 直接走向了 5 号，对于其他的看都没看一眼，成功带走。

此时神秘嘉宾 X 先生发动大招 （…）操作符，把剩余亮灯的女嘉宾全带走了。

记住 … 后面要跟上变量的名字，这种好用的流氓大招，你应该要记住。

修改你的代码

这样的定律对于对象是同样适用的，记得是修改你的代码，要不然重复定义变量会报错的。

  1. let { a, ...b } = { a:'string a', b: 'string b',c: 'string c' };
  3. console.log(a)
  4. console.log(b)
  1. string a
  2. { b: 'string b', c: 'string c' }

假如我们想换一个名字呢？

  1. let { a, ...b } = { a:'string a', b: 'string b',c: 'string c' };
  3. let x = a;

假如像上面这样，就感觉特别麻烦，所以我们可以像下面这样解构。

  1. let { a: x, ...b } = { a:'string a', b: 'string b',c: 'string c' };
  3. console.log(x)
  4. console.log(b)

当然我们还可以放到函数中去，当做函数的 默认值。

  1. function somefunc({ a: x, ...b } = { a:'string a', b: 'string b',c: 'string c' }) {
  2.     console.log(x)
  3.     console.log(b)
  4. }

还可以这样，在调用的时候再传

  1. function somefunc({ a: x, ...b }) {
  2.     console.log(x)
  3.     console.log(b)
  4. }
  6. somefunc({ a:'string a', b: 'string b',c: 'string c' })

其实原理还是对称，理他就是这个理，话操理不操。

小实验

代码
解释

你可以看到这3种是不一样的，saySomeThing2要求我们必须传递参数，其他的则不会。

把鼠标移动到saySomeThing1和saySomeThing2、saySomeThing3上面，它会出现这个函数的定义。基础类型 - 图2

基础类型 - 图3

这里我们只做简单的说明，更多信息放到后面说，?代表的意思就是可选的意思。

因为第一个函数是一个默认对象，所以导致对象可以不传，第二个函数是有默认的属性，所以导致属性可传可不传。第三个就是前俩个的合体。

结果
  1. 0 0
  2. 3 3
  3. 0 0
  4. 3 3
  5. 2 2