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经常使用知识) 我会尽可能保持天天晚上更新，若是喜欢的麻烦帮我点个赞，十分感谢

你们若是喜欢“算法”的话，能够看看我分享的另一个专栏（前端搞算法）里面有更多关于算法的题目的分享,但愿能帮助你们更深的理解算法

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