typeScript 技术胖 笔记 下

20_函数泛型<>

现在给join方法一个泛型，名字就叫做JSPang,后边的参数，这时候他也使用刚定义的泛型名称。然后在正式调用这个方法时，就需要具体指明泛型的类型啦。

function join<JSPang>(first: JSPang, second: JSPang) {
  return `${first}${second}`;
}
join < string > ("jspang", ".com");

如果要是number类型，就直接在调用方法的时候进行更改就可以了。

join < number > (1, 2);

 a泛型中数组的使用

第一种是直接使用[]，第二种是使用Array<泛型>

function myFun<ANY>(params: ANY[]) {
  return params;
}
myFun < string > ["123", "456"];

function myFun<ANY>(params: Array<ANY>) {
  return params;
}
myFun < string > ["123", "456"];

 <T>来作泛型的表示

b 多个泛型的定义

第一个泛型用T,第二个用P代表。

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join < number, string > (1, "2");

 c 泛型的类型推断

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join(1, "2");

泛型也是支持类型推断的。但是不建议使用

d 初始类的泛型

class SelectGirl {
  constructor(private girls: string[] | number[]) {}
  getGirl(index: number): string | number {
    return this.girls[index];
  }
}

ts，复杂代码时，使用泛型重构 

class SelectGirl<T> {
  constructor(private girls: T[]) {}
  getGirl(index: number): T {
    return this.girls[index];
  }
}

const selectGirl = new SelectGirl(["大脚", "刘英", "晓红"]);
console.log(selectGirl.getGirl(1));

因为使用的泛型推断，不推荐

const selectGirl = new SelectGirl() < string > ["大脚", "刘英", "晓红"];

 e 泛型重的继承

 要求返回一个对象中的name,使用接口的方式

interface Girl {
  name: string;
}

extends实现泛型的继承

class SelectGirl<T extends Girl> {
 ...
}

interface Girl {
  name: string;
}

class SelectGirl<T extends Girl> {
  constructor(private girls: T[]) {}
  getGirl(index: number): string {
    return this.girls[index].name;
  }
}

const selectGirl = new SelectGirl([
  { name: "大脚" },
  { name: "刘英" },
  { name: "晓红" },
]);
console.log(selectGirl.getGirl(1));

 f 泛型约束

你现在要求这个泛型必须是string或者number类型，进行约束，可以使用关键字extends。

class SelectGirl<T extends number | string> {
  //.....
}

 22_命名空间

components.ts引用

namespace Components {
  export class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Header";
      document.body.appendChild(elem);
    }
  }

  export class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Content";
      document.body.appendChild(elem);
    }
  }

  export class Footer {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Footer";
      document.body.appendChild(elem);
    }
  }
}

 Home.ts引用

namespace Home {
  export class Page {
    constructor() {
      new Components.Header();
      new Components.Content();
      new Components.Footer();
    }
  }
}

子命名空间 

namespace Components {
  export namespace SubComponents {
    export class Test {}
  }

  //someting ...
}

24-import

import { Header, Content, Footer } from "./components";