「TypeScript」入门基础(二)🎯---联合类型与接口

前言🎉

• 虽然之前有学过TypeScript但是平时业务上面都还是用JavaScript来开发导致逐渐对TypeScript生疏了。
• 借此更文活动的机会再来一起学习一下TypeScript的知识吧。

TypeScrip联合类型🍉

• TypeScrip联合类型可以理解为让变量的类型为定义的类型其中一种，每个类型通过|来分隔。

let someThing: string | number;
someThing = 'lwj';
someThing = 5201314;
复制代码

• 如上的代码中someThing取的类型为string|number，这其中就用了联合类型，代表了someThing可以接受string和number类型的值，我们可以看到下面我们给变量分别赋值了string类型和number类型都不会报错，这就是联合类型。
• 值得一提的是，虽然变量接受了联合类型可以取这两个类型的值，但TypeScrip实际上是'不确定'该值什么时候是什么类型的，就像上面一开始给了string的值，这个时刻他是string类型的，但是下一秒给了number类型，这时候他就属于number了，所以如果访问这个变量的属性和方法必须是联合的类型公共的方法或者公共的属性才是没问题的。

• 如上图所示一开始它属于string类型的时候是有length属性的，但是后来变成number类型时就不存在了，这时候就会报错了，所以我们在访问不确定类型的变量属性的时候要小心。

TypeScrip对象的类型——接口🍍

基础用法

• 在TypeScript中，我们使用接口（Interfaces）来定义对象的类型,那么什么是接口呢？我觉得可以理解为是一个类似连接中间件的东西，只要双方都满足一定的条件才可以通过这个接口来连接起来，而在定义对象的类型中，接口就像是对对象的形状进行描述。

interface Option {
  label: string;
  value: number;
}
let ageOption: Option = {
  label: '23岁',
  value: 23
};
let agesOption: Option = {
  label: 23, //报错
  value: '23' //报错
};
复制代码

• 在上面我们可以看到定义了一个interface来描述option的形状需要一个string类型的label和一个number类型的value，所以在下面定义的对象中如果不符合条件就会报错。
• 接口一般用大写字母开头，在我们定义的变量与接口制作的形状要完全一致，如果少了或多了属性都是不可以的。

interface Option {
  label: string;
  value: number;
}
let ageOption: Option = { 
  label: '23岁'  //报错，跟规定的接口少了一个属性
};
let agesOption: Option = { 
  label: '23岁',
  value: 23,
  sth:'hi'  //报错，跟规定的接口多了一个sth属性
};
复制代码

可选属性

• 从上面我们了解到接口就是为了规范对象类型而生的，那么有没有那么一种情况我们并不希望对象完全匹配一个接口呢？这时候我们可以使用可选属性。

interface Option {
  label: string;
  value?: number;
}
let ageOption: Option = {
  label: '23岁',
  value: 23,
};
let timesOption: Option = {
  label: '分钟',
};
复制代码

• 从上面我们可以看到在定义接口的时候一个属性使用了?，代表了这个属性是可选的也可以理解为是可有可无的，所以下面的两个对象使用了接口都不会报错。

任意属性

• 从上面看到我么可以使用可选属性让对象少写于接口的属性，那么有没有办法让我们的的对象定义的时候不局限于接口的属性呢？这时候就要用到任意属性了。

interface Option {
  label: string;
  value?: number;
  [propName: string]: any;
}
let ageOption: Option = {
  label: '23岁',
  value: 23,
  icon:'无图标'
};
复制代码

• 从上面我们可以看到在接口增加了一个属性类型为any，属性名为string类型的属性，在我们使用接口的时候就可以增加这种属性到对象里面。
• 值得一提的是如果设置了任意属性，那么其余属性的类型必须是任意属性类型的子集,就比如上面的确定属性类型string和可选属性类型number都是任意属性类型any的子集，所以这样是合理的。
• 一个接口中只能有一个任意属性，如果想让接口中有多个类型的属性，则可以在任意属性中使用联合类型。

interface Option {
  label: string;
  [propName: string]:string | number;
}
let ageOption: Option = {
  label: '23岁',
  icon:'无图标',
  icons:23
};
复制代码

只读属性

• 有时候我们希望一些属性不能被更改，他的值一开始就确定好，那我们可以使用只读属性

interface Option {
  readonly id: number;
  label: string;
  [propName: string]:string | number;
}
let ageOption: Option = {
  id: 1,
  label: '23岁',
  icon:'无图标',
  icons:23
};
ageOption.id=110 //报错
复制代码

• 正如上面代码所示，id属性第一次被确定是在定义ageOption对象的时候就被确定了，而它对应的接口中是一个readonly属性，那么它就不可被更改。

写在最后👋

• 本文也算是记录一下TypeScript的学习，接下来我会持续输出TypeScript相关的知识，大家可以一起来学习。
• 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛

往期精彩🌅

如何优雅的使用Vuepress编写组件示例（上）👈

如何优雅的使用Vuepress编写组件示例（下）👈

「站在上帝的角度」谈谈Element组件结构-Switch

「站在上帝的角度」谈谈Element组件结构-Radio