Typescript学习Day2(接口)

概念

//TypeScript的核心原则之一是对值所具有的结构进行类型检查
//它有时被称做‘鸭式辩型法’或‘结构性子类型化’。
//在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约

基本操作

//1，定义一个接口 
interface Person {
	pName : string,
	pAge : number,
	pJob : string
}
let person:Person = {  //接口的顺序是没有关系的，只会匹配接口的内容，只要属性存在，类型正确，那么即可编译通过
	pAge:22,
	pName:'nineone',
	pJob:'搞点夜点心778'
}

接口-可选属性 ?

interface Circle {
	color:string //颜色
	area:number //面积
}
interface CircleConfig{   // 添加 ‘？’ 来区分该属性是否可选
	color?:string
	radius?:number
}
function createCircle(config:CircleConfig):Circle{
	let newCircle = {color:'green',area:100}  //给圆的默认值
	if(config.color){  //如果有颜色
		newCircle = config.color
	}
	if(config.radius){  //如果有半径
		newCircle.area = Math.PI * config.radius * config.radius
	}
	return newCircle
}

let myCircle1 = createCircle(config:{radis:100})
let myCircle2 = createCircle(config:{color:'red'})

只读属性 readonly

interface FullName{  //readonly代表该属性只读
	readonly firstName : string
	readonly lastName : string
}
let p : FullName = {firstName:'杨',lastName:'楚青'}  
p.firstName = '李' //报错  只读属性赋值之后就不可修改

//数组 只读
let arr : number[] = [1,2,3,4]
let ra :ReadonlyArray<number> = arr
ra.push(2)  //报错 只读不可修改
ra[0] = 22  //报错 只读不可修改
ra.length = 100  //报错 只读不可修改

额外的属性检查
传入接口没有记录的属性

interface Circle {
	color:string //颜色
	area:number //面积
}
interface CircleConfig{   // 添加 ‘？’ 来区分该属性是否可选
	color?:string
	radius?:number
}
function createCircle(config:CircleConfig):Circle{
	let newCircle = {color:'green',area:100}  //给圆的默认值
	if(config.color){  //如果有颜色
		newCircle = config.color
	}
	if(config.radius){  //如果有半径
		newCircle.area = Math.PI * config.radius * config.radius
	}
	return newCircle
}
//1，使用类型断言  不推荐
let myCircle1 = createCircle(config:{radis:100,type:'red',num:99,flag:true} as CircleConfig)

//2，通过字符串的索引签名   [propsName:string]:any  推荐
interface CircleConfig{   // 添加 ‘？’ 来区分该属性是否可选
	color?:string
	radius?:number
	//字符串的索引签名
	[propsName:string]:any
}
let myCircle1 = createCircle(config:{radis:100,type:'red',num:99,flag:true})
//3，对象赋值 因为类型检查只会检查外部 并不会深入检查 所以这个方法可行 不会报错  不推荐
let obj = {radis:100,type:'red',num:99,flag:true}
let myCircle1 = createCircle(config:obj)

函数类型

interface CompareFunc{
	(first:number,last:number):boolean
}
let myCompare : CompareFunc = function (a,b){
	return a>b
}

可索引类型（了解）

interface StrArr {
	[index:number] : string
}
let myArr:StrArr = ['it','like']
let str:String =myArr[0]  //it

类类型

interface ClockInterface{
	currentTime:Date
	setTime(d:Date)
}
class Clock implements ClockInterface{
	currentTime:Date
	constructor(h:number,m:number){
		console.log(h,m)
	}
	setTime(d:Date){
		console.log(d)
	}
}

类静态部分 和 实例部分

//类具备两种类型
//1，静态部分的类型 不会去检查与约束
//2，实例类型

接口的继承

//一个接口 成员复制到另一个接口
//分割重用
interface Animal {
	//品种
	breed:string
}
interface Num {
	//数量
	num:number
}
interface Cat extends Animal,Num{  //通过extends关键字完成继承 , 继承多个接口用逗号隔开
	//颜色
	color:string
}
let cat = {} as Cat
cat.breed = '银渐层'
cat.color = '白色'