TypeScript知识点

//定义一个求和的函数
 function sum(n1:number,n2:number){
    return n1+n2
 }
sum(10,20)

//声明变量有多种类型
//联合类型
let a1:string|number ='hello'
a1 = 100

//任意类型  any
let a2:any =true
a2:1;
a2='hello'

//数组
let arr1:number[] = [1,2,3,4,5]; //后面中括号里面的值必须为number类型
let arr2:string[] = ['a','b','c']; //中括号里面的内容必须都为字符串类型
let arr3:(number|string)[] = [1,2,3,'a','c'];

//function 输入类型  输出类型
function f1(x:number,y:number):number{
    return x+y
}
f1(20,'30') //不符合要求，会报错

function f2(a,b):void{ //void 代表的是无返回值
    if(a>b){
        
    }else{
        
    }
}

function f1(x:number,y:number):boolean{
    return x===y   //返回的是布尔值
}

对象的类型----接口

在面向对象语言中，接口(interfaces)是一个很重要的概念，它是对行为的抽象接口（interfaces） 可以用于对[对象的形状（Shape）] 进行描述

​ 接口相当于一个约束，让对象遵循约束

接口的定义

接口首字母大写
interface Person{ 
  name:string;
  age:number; //必须属性
  sex?:string // 可选属性
  [propName:string]:any;//任意属性
}

const 02:Person ={
    name:'o2',
    age:18
}

TS中的泛型

<泛型变量名称>(参数1: 泛型变量, 参数2: 泛型变量, ...参数n: 泛型变量) => 泛型变量

泛型： 是指在定义函数，接口或类的时候，不预先指定具体的类型，而在使用的时候在指定类型的一个特性

泛型变量T T表示任何类型

 function f4(x:number,y:number):number[]{  //返回的是一个number类型的数组
     return[x,y]
 }
f4(10,20)

 function f5(x:string,y:string):string[]{//返回的是一个字符串类型的数组
     return[x,y]
 }
f5('a','c')

 function f6(x:boolean,y:boolean):boolean[]{//返回的是一个布尔类型的数组
     return[x,y]
 }
f6(true,false);

//泛型

 function f7<T>(x:T,y:T):T[]{ //泛型变量 T  T代表任何类型
     return[x,y]
 }
f7<number>(1,2);
f7<string>('x','y');
f7<boolean>(true,false);

//
function f8(x:string):number{
    return x.length
};
f8('hello itlove')

function f9<T>(x:T):number{ //会报错，我们要用到约束
    return x.length
};
f9<string>('hello itlove')

泛型的约束

泛型的约束：我们定义一个接口来描述约束条件。 泛型可以通过 extends 一个接口来实现泛型约束，写法如：<泛型变量 extends 接口> ，

//泛型约束  extends
 interface Length{
     length:number;
 }
function f10<T extends LengthNum>(x:T):number{ //会报错，我们要用到约束
    return x.length
};
f10('hello itlove')

泛型接口

//定义函数，判断传入的参数是否相等
let fn1 =function(s1,s2){
    return s1===s2
};
fn1('a','b');

let fn2 =function(s1:string,s2:string):boolean{
    return s1===s2
};
fn2('a','b');

//另一个函数
let fn3 =function(x,y){
    if(x>y){
        return true
    }else{
        return false
    }
};

let fn4 =function(x:string,y:string):boolean{
    if(x>y){
        return true
    }else{
        return false
    }
};

//定义规范
interface InspectFn{
    // (x:string,y:string):boolean;
     <T> (x:T,y:T):boolean;

}
//将上面的规范运用到下面的代码中
let fn1:InspectFn =function(s1,s2){
    return s1===s2
};
 //fn1('a','b');
fn1<string>('a','b');

//
let fn3:InspectFn =function(x,y){
    if(x>y){
        return true
    }else{
        return false
    }
};
fn3<number>(10,5)