TypeScript中的接口的实际运用场景以及理解泛型约束

目录

一、先来了解一下什么是TypeScript？

二、TypeScript有哪些特性与优势？

三、为什么说在TS中如果泛型排第二，那么接口一定排第一

四、TypeScript的用法

接口的定义：

函数类型的定义：

泛型的定义：

泛型约束的定义：extends

---

一、先来了解一下什么是TypeScript？

        TypeScript（简称TS）是一种开源的编程语言，它是JavaScript的一个超集，由Microsoft开发和维护。TypeScript通过添加静态类型、类、接口、模块等新特性来扩展JavaScript，并在其基础上提供了更强大的工具和编译器功能。

二、TypeScript有哪些特性与优势？

        具体而言，TypeScript提供了以下特性和优势：

1. 静态类型检查：TypeScript引入了静态类型系统，在开发过程中可进行类型检查，捕获常见的错误和潜在的问题，减少运行时错误，并提供更可靠的代码提示和自动补全功能。

2. 类和接口：TypeScript支持面向对象的编程，引入了类和接口的概念以及相关的特性，如封装、继承、多态等。这使得代码更易于组织、理解和维护，并提供了更高的可重用性和扩展性。

3. ES6+支持：TypeScript对ECMAScript（JavaScript的标准化版本）的最新特性提供了广泛的支持，例如箭头函数、模板字符串、解构赋值、Promise等。

4. 模块化开发：TypeScript支持使用模块化进行代码组织，支持以ES6模块规范导入和导出模块，提供了更好的代码组织和可维护性。

5. 编译时类型检查：TypeScript代码需要先经过编译器的转换，将TypeScript代码转换为纯JavaScript代码，这个过程中会进行严格的类型检查，捕获潜在的错误。这可以在开发过程中提前发现问题，并加快代码的执行速度。

        总的来说，TypeScript提供了更强大的工具和类型检查，帮助开发人员编写更可靠、可维护和可扩展的前端代码。它与JavaScript的语法很接近，可以无缝迁移现有的JavaScript项目，并且在大型和复杂的项目中尤为有用。

三、为什么说在TS中如果泛型排第二，那么接口一定排第一

        在TypeScript中，当定义一个类型或者类时，可以使用接口（interfaces）和泛型（generics）来增加灵活性和可复用性。

        接口用于定义对象的结构和行为，它可以描述一个对象应该具有的属性和方法。通过接口，可以约束一个对象的形状，使其符合特定的结构。

        泛型用于在定义函数、类或接口时，可以在它们的内部使用指定类型的占位符，以后在实际使用时再指定具体的类型。泛型可以增加代码的复用性和灵活性，使代码可以适用于多种类型。

        当一个接口需要使用泛型时，接口的定义中会包含泛型参数。这意味着，在使用这个接口时，必须同时指定泛型的具体类型。

        通常情况下，将接口排在前面是因为接口定义了对象的结构和行为，更能直观地表达类型的要求。而泛型则属于更高级的特性，它可以为不同的类型提供通用的支持。因此，当需要同时使用接口和泛型时，通常将接口放在第一位，以提高代码的可读性和可理解性。

        综上所述，将接口排在第一位，泛型排在第二位，是一种更常见和推荐的代码风格。但这并不是绝对的规定，实际使用时可以根据需求和个人偏好进行灵活调整。

四、TypeScript的用法

        使用：指定变量的类型，:的前后有没有空格都可以

window.onload=function(){

       let flag:boolean=false;  //布尔类型

       let num:number=12;    //数值类型

       let str:string='abcd';     //字符串类型

       let msg:string=`hello,${str},${num}`;

       let u:undefined=undefined; //undefined类型

       let n:null=null;  //null类型

}

         数组类型的定义。最简单的方法就是使用 [类型+方括号] 来表示数组。     

let arr1:number[]=[1,2,3];

let items=["a","b","c"];

let arr2:string[]=items

        存在多钟类型 联合类型      

let arr3:(number | string)[]=[1,2,3,"1","2","3"];
    
let arr4:any[]=[1,2,3,"1","2","3"];

        数组泛型

let arr5:Array=[1,2,3,"1","2","3"];

接口的定义：

        接口虽然和class（类）有点相同，类是声明并且实现方法，但是接口只声明成员方法，不做实现的。需要注意的是，一旦定义了任意属性，那么确定属性好可选属性都必须是它的子属性。

interface IPerson{

       name:string;  //确定属性

       age?:number; //可选属性

       [propName:string]:any;  //任意属性

//需要注意的是，一旦定义了任意属性，那么确定属性好可选属性都必须是它的子属性。

}



let Ob:IPerson={

       name:"xiaoming",

       age:18,

       weight:100

}

函数类型的定义：

        一个函数有输入和输出，要在TypeScript中对其进行约束，需要把输入和输出都考虑到。

function sum(x:number,y:number):number{

       return x+y

}

泛型的定义：

        泛型(Generics)是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候在指定类型的一种特性。(可以实现公共复用)

function f1(a:T,b:T):T[]{

       return [a,b] //当没有返回值时return,则把T[]改为viod

};

f1(1,2);

f1("hello","abcd");

f1(true,false);

        对比以下的代码:

function f1(a:number,b:number):number[]{

       return [a,b]

};

f1(1,2);

function f1(a:string,b:string):string[]{

       return [a,b]

}

f1("hello","abcd");

function f1(a:boolean,b:boolean):boolean[]{

       return [true,false]

}

泛型约束的定义：extends

interface ILength{

       Length:number;

}

function f2(a:T)：number{
       return a.length //要求所有类型都有length属性（数组，字符串，对象）数字没有。

}

f2("hello")

//接口调用公共复用方法不仅仅针对于对象，输入和输出类型一样可以调用公共复用方法。

//泛型接口 复用输入和输出类型

interface IFn{

       (a:string,b:string):boolean

       //(a:T,b:T):T ;则需设置let fn1=function (x,y){

}

let fn1:IFn=function(x,y){
       if(x>y){
       return true

       }else{

       return false

       }

};

fn1(100,200);



let fn2: IFn=function(s1,s2){

       return s1===s2

};

fn2(a,b)

《到此结束，感谢列位收看》