• 接口的作用：在面向对象编程中，接口是一种规范的定义，他定义了行为和动作的规范，在程序设计里面，接口起到了一种限制和规范的作用。

  • 接口的语法： 

    1. 示例：
    3. // 定义了一个很普通的接口
    4. interface Iinter{
    6. }
    1. 定义一个对象 ```javascript 示例：

    interface Obj { name: string, age: number }

    const obj: Obj = { name: ‘胡图图’, age: 18 }

    console.log(obj); ```

    1. 定义一个数组对象 ```javascript 示例：

    interface Item{ text: number } const arr: Array = [{ text: 1 },{ text: 2 },{ text: 3 }];

    console.log(arr); ```

    1. 任意属性（一旦我们定义了任意属性，确定属性和可选属性的类型必须是任意属性类型的子集。）（当不确定变量其他属性，又想绕过 TypeScript 的检测时，我们可以使用任意属性。） ```javascript 示例：

    // 数组对象 interface Item{ text: string, // 可选属性 num: number, // 必须使用 [] 来定义任意属性 // 一旦我们定义了任意属性，确定属性和可选属性的类型必须是任意属性类型的子集。 // 额外属性检查

  1. [propsText: string]: any

} const arr: Array = [{ text: ‘1’, num: 1, obj: { a: 1 } },{ text: ‘2’,num: 2 },{ text: ‘3’, num: 3 }];

console.log(arr);

  2. -  
  3.    4. 只读属性
  4. ```javascript
  5.   示例：
  7.   // 数组对象
  8.   interface Item{
  9.     readonly text: string,
  10.     // 可选属性
  11.     num: number,
  12.     // 必须使用 [] 来定义任意属性
  13.     // 一旦我们定义了任意属性，确定属性和可选属性的`类型必须是任意属性类型的子集。`
  14.     [propsText: string]: any
  15.   }
  16.   const arr: Array<Item> = [{ text: '1', num: 1, obj: { a: 1 } },{ text: '2',num: 2 },{ text: '3', num: 3 }];
  18.   arr[0].text = '123'; // 报错
  19.   console.log(arr);
    1. 可索引属性（可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。） ```javascript 示例：

    // 可索引类型-数组 interface Item{

  1. [index: number]: string

}

const arr:Item = [‘胡图图’, ‘我心疼’, ‘自治区’];

console.log(arr[0]);

// 可索引类型-对象 interface Obj{

  1. [index: string]: any

}

const obj:Obj = { name: ‘刘建行’, age: 18 };

console.log(obj.name);

  2. -  
  3.    6. `函数类型`
  4. ```javascript
  5.   示例：
  7.   // 函数接口
  8.   interface FnItem{
  9.     (msg: string): void
  10.   }
  12.   // 一种是无名函数
  13.   const fn:FnItem = function(msg) {
  14.     console.log(msg);
  15.   }
  17.   fn('123');
    1. 类接口 ```javascript 示例：

    // 类接口 - 定义的是当前类上的属性 interface PClass{ name: string, age: number, // say == 146 定义的函数 say(msg: string): void, }

    class Person implements PClass{ name = ‘胡图图’; age = 18;

    say(msg: string) { console.log(msg); } }

// 类接口 - 定义的是当前类上的属性 interface PClass{ name: string, age: number, // say == 146 定义的函数 say(msg: string): void, }

class Person implements PClass{ name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; }

  1. say(msg: string) {
  2.   console.log(msg);
  3. }

}

  2. -  
  3.    8. `继承接口`
  4. ```javascript
  5.   示例：
  7.   // 类接口 - 定义的是当前类上的属性
  8.   interface PClass{
  9.     name: string,
  10.     age: number,
  11.     // say == 146 定义的函数
  12.     say(msg: string): void,
  13.   }
  16.   // 接口继承
  17.   interface PEat extends PClass{
  18.     // name: string,
  19.     // age: number,
  20.     // // say == 146 定义的函数
  21.     // say(msg: string): void,
  22.     eat(msg: string): void,
  23.   }
  25.   class Person implements PEat{
  26.     name: string;
  27.     age: number;
  28.     constructor(name: string, age: number) {
  29.       this.name = name;
  30.       this.age = age;
  31.     }
  33.     say(msg: string) {
  34.       console.log(msg);
  35.     }
  37.     eat(msg: string) {
  38.       console.log(msg);
  39.     }
  40.   }
  42.   <!-- ------ -->
  45.   //接口继承
  46.   interface GrandFather{
  47.     name: string
  48.   }
  51.   interface Father{
  52.     age: number
  53.   }
  55.   // 接口即成 extends
  56.   // 继承一个 interface Son extends Father{
  57.   // 继承多个 interface Son extends Father,GrandFather (以 , 进行分割)
  58.   interface Son extends Father,GrandFather{
  59.     money: number
  60.   }
  62.   class GrandSon implements Son{
  63.     name: string;
  64.     money: number;
  65.     age: number;
  66.     constructor(name: string, money: number, age: number) {
  67.       this.name = name;
  68.       this.money = money;
  69.       this.age = age;
  70.     }
  71.   }
  73.   const g = new GrandSon('胡图图', 100, 18);
  74.   console.log(g);

泛型

  • 泛型是指在定义函数、接口或类的时候，不预先预定具体的类型，而在使用的时候在指定类型的一种特性。
    1. 泛型函数 ```javascript 示例：

    // 就是用来定义泛型 T -》 可以是 26 个英文字母中随意， 他就好比说是一个形参 // 这里，我们使用了 类型变量，它是一种特殊的变量，只用于表示类型而不是值。 function fn1(msg: T): T { return msg; } console.log(fn1(‘胡图图’)); ```

    1. 泛型的多个类型参数 ```javascript 示例：

    // 元组 function fn2(arr: [ T, L ]): [ T, L ] { return [arr[0], arr[1]]; }

    console.log(fn2([123, ‘胡图图’])) // [123, ‘胡图图’]

    // 元组 function fn2(arr: [ T, L ]): [ L, T ] { return [arr[1], arr[0]]; }

    // console.log(fn2([123, ‘胡图图’])) // [123, ‘胡图图’] console.log(fn2([123, ‘胡图图’])) // [‘胡图图’, 123] ```

    1. 泛型变量（泛型变量 T 当作类型的一部分使用，而不是整个类型）； ```javascript 示例：

    // 2. number[] // 2. Array function fn3(arr: Array): Array { // T 现在代表谁？ 1，2，3，4 console.log(arr.length); return arr; } console.log(fn3([1,2,3,4])) ```

    1. 泛型接口 ```javascript 示例：

    // 定义泛型接口 interface Tinter{ name: T }

    const obj: Tinter = { name: ‘胡图图’ }

    console.log(obj); ```

    1. 泛型类 ```javascript 示例：

    // 定义泛型类 class Person1{ name: T constructor(name: T) { this.name = name; } }

    // 使用泛型类 const p1 = new Person1(‘1810A’); console.log(p1); ```

    1. 泛型约束 ```javascript 示例：

    // 泛型约束 () class Constraint{ public arr: Array = []; // 想数组中添加 add(msg: T): void { this.arr.push(msg); console.log(this.arr); } // 在数组中删除 delete(): void { this.arr.pop(); console.log(this.arr); } }

    // 调用泛型类 const c = new Constraint(); c.add(1); c.add(‘2’); // c.add(true); // 不能添加，因为不允许添加 boolean c.delete(); ```

    1. 增删改查的泛型接口（泛型类和泛型接口） ```javascript 示例：

    // 接口和类进行相结合使用 interface TClassItem{ add(msg: T): T; pop(msg: T): boolean; Update(msg: T,i: number): T; Search(msg: T, id: string): T; }

    class TArr implements TClassItem{ arr: any[] = []; add(msg: T) { this.arr.push(msg); console.log(this.arr); return msg; } pop() { this.arr.pop(); return true; } Update(msg: T, i: number) { return msg; } Search(msg: T, id: string) { return msg; } }

    const a = new TArr(); a.add(‘123’); ```