TypeScript常用知识之--接口和泛型

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

因为Typescript的持续火爆，分享下TS的常用知识点，我们一起学习交流，一起加油！

接口

接口和type类似都是对 函数和变量的一种约束

1.约束变量

interface Type1 {
    name: string;
    age: number;
}

let type1: Type1 = {
    name: "Tom",
    age: 11,
};

2.约束函数

interface Type2 {
    (a: string, b: number): any;
}

let type2: Type2 = (a: string, b: number): any => {};

3.约束构造函数

interface Type3 {
    new (name: string): any;
}
function createAnimal(clazz: Type3) {
    return new clazz("1");
}
// 创建一个类
class Dog {
    constructor(public namt: string) {}
}
//使用这个类
createAnimal(Dog);

4.可以定义任意的属性

interface Type4 {
    [index: number]: string;
}
let type4: Type4 = {
    1: "1",
};

5.可以索引属性 规定key的类型

interface Type5 {
    [index: number]: string;
}
let arr:Type5=['1','2']

6.可以实现多个接口

class TypeMulti implements Type1, Type4 {
    [xxx: number]: string;
    name: string;
    age: number;
}

7.如果一个函数的类型 拥有了其他属性

interface Type7 {
    (name: string, age: number): void;
    gender: string;
}

let t1: any = (a: string, b: number): void => {};
t1.age = 16;

let t2: Type7 = t1;

泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，

这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

1.泛型的使用

function createObj<T>(obj: T): T {
    return obj;
}
let time = createObj<string>("today");

2.类的泛型 *

class Person<T> {
    constructor(public age: T) {
        this.age = age;
    }
    getAge(): T {
        return this.age;
    }
}

let person = new Person<number>(11);

3.构造函数泛型

function factory<T>(typeClass: { new (): T }): T {
    return new typeClass();
}
class Animal {}
let animal = factory<Animal>(Animal);

4.默认泛型

function fn2<T = string>(a: T) {}
// 取默认的泛型string
fn2("1");

5.泛型的约束

可以使用extends对泛型进行约束

function fn3<T extends number>(val: T): void {}
fn3<number>(1);
// fn3<string>('1');// 报错

class C1 {
    name: string;
}

class C2 {
    age: number;
}

class CC {
    name: string;
    age: number;
    gender: string;
}

// 这里的T 只能是一个包含C1属性的一个实例
function print<T extends C1>(c: T) {}

print<C1>(new C1());
// print<C2>(C2);//报错 因为C2的属性没有包括C1
print<CC>(new CC());

6.泛型的使用

interface G<U> {
    <T>(a: T): U;
}

// 使用泛型接口 定义U
let fn4: G<string> = function <T>(a: T): string {
    return "1";
};

// 使用函数 定义T
fn4<number>(1);

相关资料

• TypeScript 官网

大家喜欢的可以看看我的专栏 (TypeScript常用知识) 我会尽量保持每天晚上更新，如果喜欢的麻烦帮我点个赞，十分感谢

大家如果喜欢“算法”的话，可以看看我分享的另外一个专栏（前端搞算法）里面有更多关于算法的题目的分享,希望能帮助大家更深的理解算法

文章内容目的在于学习讨论与分享学习TS过程中的心得体会，文中部分素材来源网络，如有侵权，请联系删除，邮箱 182450609@qq.com