TypeScript 基础 — interface 的函数和属性

在接口中定义方法有两种方法。

• 声明为类型为函数的属性

1.  
   interface Logger {
2.  
   log: (message: string) => void
3.  
   }

• 声明为正常函数

1.  
   interface Logger {
2.  
   log(message: string): void
3.  
   }

区别

如果将该方法声明为接口函数，则可以添加更多重载版本。

1.  
   interface Logger {
2.  
   log(message: string): void
3.  
   }
4.  
    
5.  
   // 在其他地方
6.  
   interface Logger {
7.  
   log(message: string, level: string): void
8.  
   }

另一方面，将方法声明为属性可以防止复制具有不同类型的属性声明：

1.  
   interface Logger {
2.  
   log: (message: string) => void
3.  
   }
4.  
    
5.  
   // 不起作用
6.  
   interface Logger {
7.  
   log: (message: string, level: string) => void
8.  
   }

readonly 修饰符仅对属性声明有效。

1.  
   interface Person {
2.  
   firstName: string
3.  
   lastName: string
4.  
    
5.  
   readonly fullName: () => string
6.  
    
7.  
   // 不起作用
8.  
   // readonly fullName(): string
9.  
   }

TypeScript 为实现接口方法的类生成不同的输出。

假设我们有一个 ConsoleLogger 类，它只在控制台窗口中记录消息。

对于第一种方法：

1.  
   interface Logger {
2.  
   log: (message: string) => void
3.  
   }
4.  
    
5.  
   class ConsoleLogger implements Logger {
6.  
   log = (message: string) => {
7.  
   console.log(message)
8.  
   }
9.  
   }
10.  
     
11.  
    // 生成的 JavaScript 代码：
12.  
    //
13.  
    // class ConsoleLogger {
14.  
    // constructor() {
15.  
    // this.log = (message) => {
16.  
    // console.log(message)
17.  
    // }
18.  
    // }
19.  
    // }

对于第二种方法：

1.  
   interface Logger {
2.  
   log(message: string): void
3.  
   }
4.  
    
5.  
   class ConsoleLogger implements Logger {
6.  
   log(message: string) {
7.  
   console.log(message)
8.  
   }
9.  
   }
10.  
     
11.  
    // 生成的 JavaScript 代码：
12.  
    //
13.  
    // class ConsoleLogger {
14.  
    // log(message) {
15.  
    // console.log(message)
16.  
    // }
17.  
    // }

查看生成的 JavaScript 代码，您将看到不同的输出。

第一种方法在构造函数中生成属性 log。这意味着每次创建类的新实例时都会创建 log。

而第二种方法生成 log 方法，并且它存在于类的所有实例中。log 方法也是类 prototype 的成员，因此如果需要，我们可以扩展该类以重写该方法：

1.  
   class ConsoleLogger implements Logger {
2.  
   log(message: string) {
3.  
   console.log(message)
4.  
   }
5.  
   }
6.  
    
7.  
   class ConsoleLoggerWithColor extends ConsoleLogger {
8.  
   // 重写 log 方法
9.  
   log(message: string) {
10.  
    // 以白色和蓝色背景区域显示消息
11.  
    console.log('%c%s', 'color: white; background: blue', message)
12.  
    }
13.  
    }