通过基础类型组合而来的, 我们可以叫他高级类型. 包含: 交叉类型 / 联合类型 / 接口等等, 当然不止他们3个。

接口(interface)

一种定义复杂类型的格式, 比如我们用对象格式存储一篇文章, 那么就可以用接口定义文章的类型:

  1. interface Article {
  2.     title: stirng;
  3.     count: number;
  4.     content:string;
  5.     fromSite: string;
  6. }
  7. const article: Article = {
  8.     title: '为vue3学点typescript(2), 类型',
  9.     count: 9999,
  10.     content: 'xxx...',
  11.     fromSite: 'baidu.com'
  12. }

在这种情况下,当我们给article赋值的时候, 如果任何一个字段没有被赋值或者字段对应的数据类型不对, ts都会提示错误, 这样就保证了我们写代码不会出现上述的小错误.

非必填(?)

还是上面的例子, fromSite的意思是文章来自那个网站,如果文章都是原创的, 该字段就不会有值, 但是如果我们不传又会提示错误, 怎么办?
这时候就需要标记fromSite字段为非必填, 用”?”标记:

  1. interface Article {
  2.     title: stirng;
  3.     count: number;
  4.     content:string;
  5.     fromSite?: string; // 非必填
  6. }
  7. // 不会报错
  8. const article: Article = {
  9.     title: '为vue3学点typescript(2), 类型',
  10.     count: 9999,
  11.     content: 'xxx...',
  12. }


用接口定义函数

接口不仅可以定义对象, 还可以定义函数:

  1. // 声明接口
  2. interface Core {
  3.     (n:number, s:string):[number,string]
  4. }
  5. // 声明函数遵循接口定义
  6. const core:Core = (a,b)=>{
  7.     return [a,b];
  8. }

用接口定义类

先简单看下如何给类定义接口, 后面的课程具体讲类:

  1. // 定义
  2. interface Animate {
  3.     head:number;
  4.     body:number;
  5.     foot:number;
  6.     eat(food:string):void;
  7.     say(word:string):string;
  8. }
  9. // implements
  10. class Dog implements Animate{
  11.     head=1;
  12.     body=1;
  13.     foot=1;
  14.     eat(food){
  15.         console.log(food);
  16.     }
  17.     say(word){
  18.         return word;
  19.     }
  20. }


交叉类型(&)

交叉类型是将多个类型合并为一个类型, 表示”并且“的关系,用&连接多个类型, 常用于对象合并:

  1. interface A {a:number};
  2. interface B {b:string};
  3. const a:A = {a:1};
  4. const b:B = {b:'1'};
  5. const ab:A&B = {...a,...b};

联合类型(|)

交叉类型也是将多个类型合并为一个类型, 表示”或“的关系,用|连接多个类型:

  1. function setWidth(el: HTMLElement, width: string | number) {
  2.     el.style.width = 'number' === typeof width ? `${width}px` : width;
  3. }


参考

  1. 为vue3学点typescript, 基础类型和入门高级类型