TypeScript（二）

接口Interfaces

接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

interface RichMan{
	money:number,
	age:number,
	name:string
}
let p1:RichMan;//约束对象的shape
p1={money:40000,age:30,name:"karen"}
p1={money:"40000w",age:30,name:"karen"} //报错
p1=[100,203,24]//报错

可选属性

interface Person{
	name:string,
	age:number,
	money?:number
}
let p1:Person;
p1={name:"karen",age:20}//添加问号设置为可选属性，money可无

只读属性

interface Person2{
	readonly fistname:string
	lastname:string,
	age:number,
	money?:number,
	readonly life?:number
}
let p2:Person2;
p2={fistname:"jiang",lastname:"haowen",age:88,money:1000}
p2.fistname="li"//报错，因为firstname为只读属性
console.log(p2.fistname,p2.life)
p2.life=2 //报错，因为life为只读属性

设置属性名属性值任意

interface Myobject{
	[pro:string]:any
}
let p1:Myobject;
p1={age:200,life:"2px",xxx:true}
console.log(p1)

类型断言

程序员预先知道是正确的，告诉编译器“这样不会出错”

type Mytype1=number|boolean;
let a:Mytype1=200//true
let b:number=400
b=a//不会报错

type Mytype1=number|boolean;
function fn():Mytype1{
	 return 200
}
let a:Mytype1=fn()		//人能一眼看出函数返回结果，但是机器不行
let b:number=400
b=a//报错  这时就需要类型断言
	
b=(a as number);//类型断言
b=<number>a//类型断言

类型断言只能「欺骗」TypeScript 编译器，无法避免运行时的错误。

函数

定义函数

声明式（只有一种）

function add(x: number, y: number): number {
	return x + y;
}

定义式

(1)	let add = function(x: number, y: number): number { return x + y; };
(2)	let arr = [function(x: number, y: number): number { return x + y; },10,20,30];
(3)	let obj = {fn:function(x: number, y: number): number { return x + y; }}
(4)	(function(x: number, y: number): number { return x + y; })()

例：

//函数有2个参数 是number  和数组(任意数据)  返回值是元组：[第一个必须是number 第二个必须是任意数组]
function fm(arg1:number,arg2:any[]):[number,any[]]{   
	return [arg1*arg1,[10,"hello",arg2]]
}

let [x,y]=fm(100,[10,20,true])		//解构赋值
console.log(x,y)

fm(100) //报错,参数少了不行
fm(100,[],200)//报错,参数多了不行

interface Person{
    age:number,
    color:string
}
function fn(age:number,color:string):Person[]{  //Person[]接口类型的数组，[Person]接口类型的元组（限制元素个数）
    return [{age,color},{age:2000,color:"sdasd"}]
}
fn(100,"red")

可选参数和默认参数

可选修饰符?
可选参数

function fn(x: number, y?: number，z?: number): void {  }
fn(886)
fn(886，undefined，778)

默认参数

function add(x: number=666, y: number=777): void {
	console.log(x,y)
}
fn(1,2)		//1 2
fn(1)		//1 777	//没有传参就是默认参数
fn(undefined,520) //666 520
//给了默认值，这个参数就是可选参数

参数位置问题

1.可选参数放后面
2.可选参数不传值可以用undefined表示
3.默认参数可以放在必填参数的前面

剩余参数

function fn(arg1:number,arg2:string,...rest):void{
    console.log(arg1,arg2,rest)
}

fn(10,"hello")		//10 hello []
fn(20,"666",100,200,300)	//20 666 [100,200,300]

函数类型变量

函数类型:参数和返回值来对函数进行分类
(参数1:类型,参数2:类型,…)=>返回值类型

function fm(a:number):number{return 200}
let fn=function(arg1:number):number{
     return arg1+100
};
//fn和fm不是同一个函数，但是函数类型一样（传参类型为number，返回值类型为number）

写法

let fn:(arg1:number,arg2:number)=>[number,number];
fn=function(arg1:number,arg2:number）:[number,number]{
     return [arg1+100,arg2]
}

//注意！！！
let fn=(arg:number):number=>arg //这是箭头函数
let fn:(arg:number)=>number		//这是函数类型

在函数和返回值类型之前使用 =>符号，返回值类型是函数类型的必要部分，如果函数没有返回任何值，必须指定返回值类型为 void而不能留空。

用接口封装函数变量类型

interface MyType {
	//冒号前为函数,括号内为参数，冒号后为类型
	(Vaule1:number, Value2:number):number
	//(number):number
	//():number
}
let fn:MyType;
fn=(arg1:number,arg2:number):number=>{
	return arg1+arg2
}

练习

interface Mytool2{
    (arg1:number,arg2:number):(arg3:number)=>[number,number]
}

let fn:Mytool2=(arg1:number,arg2:number):(arg3:number)=>[number,number]=>{

    return  (arg:number):[number,number]=>{return [100,200] }
}

interface MyTool{
    ():number
}
interface MyTool2{
   (fn:(arg:number)=>MyTool,fm:number):(arg:number)=>MyTool
}

let fg:MyTool2;
fg=(arg1:(arg:number)=>MyTool,arg2:number):(number)=>MyTool=>{
     //(arg:number)=>MyTool
    return function(a:number):MyTool{return ():number=>100}
}