​​​​

前言????

  • 虽然之前有学过​​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​​了，所以如果访问这个变量的属性和方法必须是联合的类型公共的方法或者公共的属性才是没问题的。

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

  • 如上图所示一开始它属于​​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​​相关的知识，大家可以一起来学习。
  • 如果您觉得这篇文章有帮助到您的的话不妨????关注+点赞+收藏+评论+转发????支持一下哟~~????