目录
一.接口描述对象的形状
1.接口的语法
2.可选属性
3.只读属性
4.可选只读属性的写法
5.对对象的属性名的类型描述
二.函数的接口
a.函数
1.函数在ts中的语法(为函数定义类型)
2.可选参数
3.默认参数
4.剩余参数
5.函数类型的变量
b.函数接口
一.接口描述对象的形状
1.接口的语法
TS的核心原则之一就是对值所具有的结构进行类型检查。TS里面接口的作用就是为这些类型命名 和 为你的代码 或 第三方代码定义契约。
我们来写一个接口:
我们要注意,接口名后{}不代表这是一个对象,我们可以理解为代码块的意思,所以别用逗号结尾,用分号结尾.
// interface表示接口，Box表示接口的名字 {}非表示对象,可以理解为代码块 interface Box{ width:string; color:string; opacity:number; } // 我们可以假设Box就是一种类型 b1就是Box类型 // 我们判断两个对象是否为同一种对象,属性(字段)是否一样,字段类型(字段保存的数据)是否一样 /* 在面向对象的程序中 对象是否有各种各样的[形状] 通过对象的成员和成员的数据类型 可以约束对象的形状 */ let b1:Box; b1={width:"200px",color:"red",opacity:0.6}; b1={width:"300px",color:"pink",opacity:0.7};
再来写一个:
interface Component{ methods:object; watch:object; name:string; } let c1:Component; // c1的类型为接口(Component) 则c1为一个对象 // 并且对象的成员必须有methods watch name 并且它们的类型分别为object object string类型 c1={methods:{},watch:{},name:""};
我们要注意在这里就算对c1进行更改,也不能改变对象成员的类型和成员名
还要注意对象中的对象成员的个数要和接口中的一一对应,比如我们把name删掉或者多加一个成员看有什么变化
2.可选属性
那么我们如何实现,少一个成员依旧成立呢,这里就有可选属性的概念-------接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。
// 可选属性 interface Box{ a:number;//必选属性 b?:string;//可选属性,对象有没有这个属性都可以 } let b1:Box; b1={a:100}; b1={a:100,b:"hello"};
但是如果我们的对象的成员中有这个可选属性,那么这个对象的成员必须遵循接口的规定:
interface Box{ a:number;//必选属性 b?:string;//可选属性,对象有没有这个属性都可以 } let b1:Box; b1={a:100};//可选属性可以没有 b1.b="66666";//可以添加属性 添加的为可选属性 console.log(b1);//{ a: 100, b: '66666' }
3.只读属性
一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:
// 只读属性 interface Box{ a:number;//必选属性 b?:string;//可选属性,对象有没有这个属性都可以 readonly c:boolean;//必选只读属性 } let b1:Box; b1={a:100,c:false};//可选属性可以没有 只读属性不能没有 // 取值 let a=b1.a; console.log(a);//100 // 存值 b1.a=1111; console.log(b1);//{ a: 1111, c: false } // 取值 let c=b1.c; console.log(c);false // 存值 b1.c=true;//报错 只读属性不能存值
4.可选只读属性的写法
readonly d?:[number,any]//只读的可选属性,而且是一个元组类型
5.对对象的属性名的类型描述
在对象中,标准的属性名是一个字符串,类数组的属性名为数字(真数组和类数组的区别是,真数组是Array创建的,类数组是Object创建的)
// 对对象名的属性名的类型描述 interface Person{ // pro表示属性名 可随便写 [pro:string]:any; } let per1:Person; per1={"age":100,name:"karen"}; per1={son:{name:"jack"}};
interface myArray{ [pro:number]:any;//对象属性名是数字 值是any } let a1:myArray; a1=[10,20,30]; a1={0:90,1:100,2:200};
二.函数的接口
a.函数
1.函数在ts中的语法(为函数定义类型)
参数列表里面的每个参数都需要名称和类型。我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。
function fn (x:number,y:string):number{ return x*2; } let re=fn(100,"hello"); console.log(re); let re2=fn(100); //参数个数少了 编译报错------应有 2 个参数，但获得 1 个。 let re3=fn("hello","hello"); //实参不满足形参类型 编译报错---类型“string”的参数不能赋给类型“number”的参数。 let res4=fn(100,"hello",200); //参数个数多了 编译报错----应有 2 个参数，但获得 3 个。
2.可选参数
传递给一个函数的参数个数必须与函数期望的参数个数一致。 不过，在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。毫无疑问，可选参数必须跟在必选参数后面
可选参数,实参传给形参的时候可以不用传,但是如果要传就必须要符合规定的类型
3.默认参数
在所有必选参数后面带默认值的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。
//默认参数值(默认参数自动就是可选参数 因此默认参数不用写?来描述) function fn (x:number,y:string="hello"):number{ console.log(x,y); //fn(100,"test");-------100 test // fn(200);-------------200 hello return x*2; } fn(100,"test"); fn(200);
带默认值的参数不需要放在必选参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值从而来获得默认值。
//注意 可选参数和默认参数不要设计在函数的必选参数前面 function fn (y:string="hello",x:number):number{ console.log(x,y)//fn(undefined,1000)-----1000 hello return x*2 } fn(undefined,1000)//不建议这样设计
4.剩余参数
5.函数类型的变量
规定函数的类型约束的方式是通过参数(类型)和返回值.
let f1:(x:number,y:string)=>number;//描述函数类型的一种表达式 函数的类型 //返回值必须是number 形参必须是number和string f1=function(a:number,b:string):number{ let c=a+b return 200 } f1=function(a:number,b:string):number{ let c=a*3 return 300 }
如下图所示的f1的两种写法 只修改了逻辑,我们可以说这两个函数是同一种函数,参数满足描述,(x:number,y:string) 返回值也满足 number.
扩充:
interface Box{ color:string length?:number } let f2:(x:[number],y:Array<Box>)=>[number,Box[]]; // 中文描述: //f2变量是一个函数 //函数有各种各样(如何区别函数:参数和返回值) /* f2是一个什么样的函数? 有两个参数 第一个参数是一个元祖(一个元素而且是number) 第二参数是数组(元素是Box类型) 有一个返回值 类型是元祖(一个是number,一个是数组(Box)) */ f2=function (a:[number],b:Box[]):[number,Box[]] { return [100,[{color:"red"}]] }
注意:形参类型不能省略,函数返回值可以省略
b.函数接口
函数接口相当于给那一类型的函数定义一个名字,与函数类型变量的区别在于返回值类型前面的符号"=>"和":"的区别
// 函数类型的变量 let b:number; let c:(a:string)=>number; // 赋值c一个函数 要求参数为string类型 函数返回值为number类型 c=(x:string):number=>{return 100} // 函数类型的接口 interface querySeclector{ (x:number):string; // 表示参数为number类型 返回值为string类型 } let a:querySeclector; a=function (x:number):string{ return x+"hello" }
扩充:
加强版:
终极版:
