＜TypeScript＞接口的语法以及函数接口---------代码解析,清晰易懂

目录

一.接口描述对象的形状

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"
}

扩充: 

 加强版:

 终极版: