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

    1. 示例:
    2. // 定义了一个很普通的接口
    3. interface Iinter{
    4. }
    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);

  1. -
  2. 4. 只读属性
  3. ```javascript
  4. 示例:
  5. // 数组对象
  6. interface Item{
  7. readonly text: string,
  8. // 可选属性
  9. num: number,
  10. // 必须使用 [] 来定义任意属性
  11. // 一旦我们定义了任意属性,确定属性和可选属性的`类型必须是任意属性类型的子集。`
  12. [propsText: string]: any
  13. }
  14. const arr: Array<Item> = [{ text: '1', num: 1, obj: { a: 1 } },{ text: '2',num: 2 },{ text: '3', num: 3 }];
  15. arr[0].text = '123'; // 报错
  16. 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);

  1. -
  2. 6. `函数类型`
  3. ```javascript
  4. 示例:
  5. // 函数接口
  6. interface FnItem{
  7. (msg: string): void
  8. }
  9. // 一种是无名函数
  10. const fn:FnItem = function(msg) {
  11. console.log(msg);
  12. }
  13. 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. }

}

  1. -
  2. 8. `继承接口`
  3. ```javascript
  4. 示例:
  5. // 类接口 - 定义的是当前类上的属性
  6. interface PClass{
  7. name: string,
  8. age: number,
  9. // say == 146 定义的函数
  10. say(msg: string): void,
  11. }
  12. // 接口继承
  13. interface PEat extends PClass{
  14. // name: string,
  15. // age: number,
  16. // // say == 146 定义的函数
  17. // say(msg: string): void,
  18. eat(msg: string): void,
  19. }
  20. class Person implements PEat{
  21. name: string;
  22. age: number;
  23. constructor(name: string, age: number) {
  24. this.name = name;
  25. this.age = age;
  26. }
  27. say(msg: string) {
  28. console.log(msg);
  29. }
  30. eat(msg: string) {
  31. console.log(msg);
  32. }
  33. }
  34. <!-- ------ -->
  35. //接口继承
  36. interface GrandFather{
  37. name: string
  38. }
  39. interface Father{
  40. age: number
  41. }
  42. // 接口即成 extends
  43. // 继承一个 interface Son extends Father{
  44. // 继承多个 interface Son extends Father,GrandFather (以 , 进行分割)
  45. interface Son extends Father,GrandFather{
  46. money: number
  47. }
  48. class GrandSon implements Son{
  49. name: string;
  50. money: number;
  51. age: number;
  52. constructor(name: string, money: number, age: number) {
  53. this.name = name;
  54. this.money = money;
  55. this.age = age;
  56. }
  57. }
  58. const g = new GrandSon('胡图图', 100, 18);
  59. 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’); ```