接口的基本使用 (接口也是一种数据类型)
接口是一种抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要具体的类去实现,然后第三方就可以同这组抽象方法调用,让具体的类执行具体的方法
export default {}
interface IFullName {
firstName: string,
lastName: string
}
let name: IFullName = {
firstName: "张",
lastName: "老六"
}
console.log(name.firstName, name.lastName);
function say({ firstName, lastName }: IFullName): void {
console.log(`你真是个${firstName}${lastName}`)
}
say(name)
可选属性与只读属性
可选属性使用 : ?
只读属性使用:readonly
readonly与const的区别:作为变量使用的话用const ,若做为属性则使用readonly
export default {}
// 可选属性用 ? 来进行修饰
interface IFullName {
firstName: string,
lastName: string,
age?: number
}
let goddassName: IFullName = {
firstName: "张三",
lastName: "赵四",
age: 34
}
console.log(goddassName.firstName);
console.log(goddassName.lastName);
// console.log("ss");
// 只读属性
//顾名思义就是这个属性是不可以修改的,对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性
interface IInfo {
readonly name: string,
readonly age: number
}
let info: IInfo = {
name: "张三",
age: 23
}
// console.log(info.name);
// console.log(info.age);
// info.name="赵四" //不可以修改
// info.age=34 //不可以修改
索引签名
定义:索引签名用于描述那些"通过索引得到"的类型
格式:如[props:string]:any
应用场景:解决参数问题的物种 方法
export default {}
interface IFullName {
firstName: string,
lastName: string,
age?: number,
singName?: string,
[props: string]: any
}
// 注意点:如果使用接口来限定变量或者形参,那么再给变量或者形参赋值的时候,多一个或少一个都不行
// (实际开发中往往会出现多或者少的情况怎样解决)
// 方案一 解决方案:可选属性
let goddass1: IFullName = { firstName: "杨", lastName: "张三" }
let goddass2: IFullName = { firstName: "李", lastName: "赵四", age: 43, singName: "赵一" }
// 方案二 解决方案使用变量
let info = { firstName: "杨", lastName: "张三", song: "song" }
let goddass3: IFullName = info;
// console.log(goddass3); //{ firstName: '杨', lastName: '张三', song: 'song' }
// 第三种方案 使用类型断言
let goddass4: IFullName = ({ firstName: "赵四", lasrName: "赵四", age: 12, ssss: 43 }) as IFullName;
console.log(goddass4);
// 第四种方案 索引签名
interface IBeauty {
[props: string]: string
}
let IBeauty = { fristName: "张", last: "三", age: "十岁" }
console.log(IBeauty);
interface IAge {
[props: string]: number
}
let ages = { age: 43, num: 32, sum: 64 }
// 案例
interface IMyFullName {
first: string,
last: string,
[props: string]: string
}
let goddass5: IMyFullName = { first: "张三", last: "张四", sex: "女" }
函数接口
export default {}
interface IMyFullName {
(salary: number, rewary: number): number
}
let sum: IMyFullName = function (x: number, y: number): number {
return x + y
}
let he = sum(1, 4)
console.log(he);
接口的继承
接口继承就是说接口可以通过其他接口来扩展自己
TS允许接口继承多个接口
继承使用关键字extends
单继承 多继承
export default {}
// 单继承
interface IMyFullName {
age: number
}
// 子 父
interface firstName extends IMyFullName {
name: string
}
let lady: firstName = {
name: "张三",
age: 43
}
console.log(lady.age);
console.log(lady.name);
// 多继承
interface Name {
m1: number
}
interface Age {
m2: number
}
interface ziyuan extends Name, Age {
m3: string
}
let lady2: ziyuan = {
m1: 34,
m2: 34,
m3: "ss"
}
console.log(lady2.m1);
console.log(lady2.m2);
console.log(lady2.m3);
接口与类型别名的异同
// 相同点:1.都可以描述属性或方法
// 2.都允许拓展
// 不同点:1.type 可以声明基本类型别名,联合类型,[元组]
// 2.当出现使用type和interface声明同名变量 type会直接报错 interface会进行组合
都可以描述属性和方法
// 都可以描述属性 和方法
type WomanStar = {
name: string,
age: number,
show(): void
}
interface IWomanStar {
name: string,
age: number,
show(): void
}
// 类型别名
let star1: WomanStar = {
name: "张三",
age: 34,
show() {
console.log("show1");
}
}
let star2: IWomanStar = {
name: "张四",
age: 23,
show() {
console.log("show2");
}
}
console.log(star1);
console.log(star2);
都可以扩展
// 都可以扩展
type Fnn1 = {
name: string
}
type Fnn2 = Fnn1 & {
name2: number
}
let sum: Fnn2 = {
name: "张三",
name2: 34
}
console.log(sum.name, sum.name2);
// 别名
interface Qnn1 {
age: string
}
interface Qnn2 extends Qnn1 {
age1: number
}
// 接口
let star: Qnn2 = {
age: "张武",
age1: 23
}
console.log(star);
不同点:
// 1.type可以声明基本数据类型,联合类型,数组等
type a = number;
type b = string;
type c = string[];
type d = [number | string]
// interface只能声明变量
// interface s = string //报错
// 2.当出现使用type和interface声明同名变量时
// type会直接报错
// type Name = {
// name: string
// }
// type Name = {
// name: string
// } //报错
// interface会进行组合
interface Age {
age: number
}
interface Age {
age: number,
name: string
}
let Sum: Age = {
age: 34,
name: "赵四"
}
console.log(Sum.age);