文章目录

接口_可选属性

 接口_只读属性

接口_额外的属性检查 

接口_ 函数类型 

 接口_类类型

接口_继承接口

---

接口_可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用 “option bags” 模式时很常用，即给函数传入的参数对象中只有部分属性赋值了 

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号 

interface SquareConfig {color?: string;width?: number;
}
function createSquare(config: SquareConfig)
{let newSquare = {color: "white",area: 100}if (config.color) {newSquare.color = config.color;}if (config.width) {newSquare.area = config.width * config.width;}return newSquare;
}
let mySquare = createSquare({ color: "black"
});
console.log(mySquare)

 可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。 比如，我们故意将 createSquare 里的 color 属性名拼错，就会得到一个错误提示

interface SquareConfig {color?: string;width?: number;
}
function createSquare(config:SquareConfig){let newSquare = { color: "white", area: 100 };if (config.clor) {// Error: Property 'clor' does not exist on type 'SquareConfig'newSquare.color = config.clor;}if (config.width) {newSquare.area = config.width * config.width;}return newSquare;
}
let mySquare = createSquare({ color: "black"});

 接口_只读属性

一些对象属性只能在对象刚刚创建的时候赋值。 你可以在属性名前用 readonly 来指定只读属性 

对象操作 

interface Point {readonly x: number;readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

 函数操作

interface Point {readonly x: number;readonly y: number;
}
function MyPoint(ps:Point){const pt = {x:100,y:200}// Cannot assign to 'x' because it is a read-only property.ps.x = pt.x;ps.y = pt.yconsole.log(ps)
}
MyPoint({ x:100,y:200 })

 readonly vs const

最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const ，若做为属性则使用 readonly 

接口_额外的属性检查 

我们知道。接口具有“option bags” 模式，那我们来看下面的例子 

interface SquareConfig {color?: string;width?: number;
}
function createSquare(config: SquareConfig) {console.log(config)
}
let mySquare = createSquare({width: 100 });

现在多了一个需求，在传入的参数中，可能会传入未知参数 colour 因为有“option bags” 模式，会不会允许我们传入未知参数呢？

interface SquareConfig {color?: string;width?: number;
}
function createSquare(config: SquareConfig) { }
let mySquare = createSquare({ colour: "red",width: 100 });

然而，TypeScript 会认为这段代码可能存在 bug
对象字面量会被特殊对待而且会经过“额外属性检查”，你会得到一个错误

error: Object literal may only specify known properties, but 'colour' does not exist in type 'SquareConfig'. Did you mean to write 'color'?

 我们可以通过添加额外属性的方式解决这个问题

interface SquareConfig {color?: string;width?: number;[propName: string]: any;
}
function createSquare(config: SquareConfig)
{console.log(config)
}
let mySquare = createSquare({ colour: "red", width: 100 });

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量： 因为 squareOptions 不会经过额外属性检查，所以编译器不会报错

interface SquareConfig {color?: string;width?: number;
}
function createSquare(config: SquareConfig)
{console.log(config)
}
const squareObj = { colour: "red", width: 100 }
let mySquare = createSquare(squareObj);

要留意，在像上面一样的代码里，你可能不应该去绕开这些检查，这不利于代码可读性与纠错性

接口_ 函数类型 

接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型

interface SearchFunc {(source: string, subString: string)
}

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口

let mySearch: SearchFunc;
mySearch = function (source: string, subString: string) {console.log(source,subString)
};
mySearch("Hello","World")

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配

interface SearchFunc {(source: string, subString: string)
}
let mySearch: SearchFunc;
mySearch = function (sou: string, sub: string) {console.log(sou,sub)
}
mySearch("Hello","World")

 接口_类类型

与传统面向对象里接口的基本作用一样，TypeScript 也能够用它来明确的强制一个类去符合某种契约 

interface UserInterface {job:string
}
class Teacher implements UserInterface {public job:stringpublic name:stringpublic age:stringconstructor(name,age){this.name = name;this.age = age}
}

你也可以在接口中描述一个方法，在类里实现它

interface UserInterface {job:stringsayHello(j:string):void
}
class Teacher implements UserInterface {public job:stringpublic name:stringpublic age:stringconstructor(name,age){this.name = name;this.age = age}sayHello(j: string) {this.job = jconsole.log(j,this.name,this.age)}
}
const t = new Teacher("张三","20");
t.sayHello("itxiaotong")

接口_继承接口

和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里 

interface Info{name:stringage:number
}
interface Job extends Info{job:string
}
function user(userInfo:Job){console.log(userInfo)
}
user({ name:"iwen",age:20,job:"itxiaotong" })

 一个接口可以继承多个接口，创建出多个接口的合成接口

interface Info{ name:stringage:number
}
interface Num{num:number
}
interface Job extends Info,Num{job:string
}
function user(userInfo:Job){console.log(userInfo)
}
user({name:"iwen",age:20,job:"itbaizhan",num:1001
})