TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解（学习总结---从入门到深化）

文章目录

接口_可选属性

?接口_只读属性

接口_额外的属性检查?

接口_ 函数类型?

?接口_类类型

接口_继承接口

---

接口_可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用 “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.y
??console.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:string
??public name:string
??public age:string
??constructor(name,age){
????this.name = name;
????this.age = age
?}
}

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

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

接口_继承接口

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

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

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

interface Info{ 
??name:string
??age: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
})