[TypeScript] - TypeScript官方文档学习笔记-接口-上（二）

ゝ一世哀愁。 2023-02-22 05:15 91阅读 0赞

前言

接口只是在语法层面限制写法，从而使部分语句写法不出现，本质是语法规范

接口

TypeScript中接口用来定义结构类型，出于类型检查需要

编译转换后接口消失，仅用于语法检查

普通对象传入：

  1. function printLabel(labeledObj: { label: string }) {
  2.     console.log(labeledObj.label);
  3. }
  5. let myObj = {size: 10, label: "Size 10 Object"};
  6. printLabel(myObj);

注意：传入的对象中有额外属性

通过接口：

  1. interface LabeledValue {
  2.     label: string;
  3. }
  5. function printLabel(labeledObj: LabeledValue) {
  6.     console.log(labeledObj.label);
  7. }
  9. let myObj = {size: 10, label: "Size 10 Object"};
  10. printLabel(myObj);

可选属性

在接口属性名称后加?，标识属性是可选的

  1. interface SquareConfig {
  2.     color?: string;
  3.     width?: number;
  4. }
  6. function createSquare(config: SquareConfig): {color: string; area: number} {
  7.     let newSquare = {color: "white", area: 100};
  8.     if (config.color) {
  9.         newSquare.color = config.color;
  10.     }
  11.     if (config.width) {
  12.         newSquare.area = config.width * config.width;
  13.     }
  14.     return newSquare;
  15. }
  17. let mySquare = createSquare({color: "black"});

只读属性

在属性名称前加readonly修饰符

  1. interface Point {
  2.     readonly x: number;
  3.     readonly y: number;
  4. }

只读数组

ReadonlyArray<T>，像用Array<T>那样，但不可改变

  1. let a: number[] = [1, 2, 3, 4];
  2. let ro: ReadonlyArray<number> = a;
  3. //let ro: ReadonlyArray<number> = [1,2,3,4];
  4. ro[0] = 12; // error!
  5. ro.push(5); // error!
  6. ro.length = 100; // error!
  7. a = ro; // error!

将只读数组赋给对象也是非法的

可以通过类型断言将可读数组赋给其它变量

  1. let ar :ReadonlyArray<number> = [1,2,3,4]
  2. let b = ar as number[]

readonly vs const

  • 属性用readonly（语法限制）
  • 变量用const（编译限制）

额外属性检查

如果提供的对象没有一个是接口（或普通对象写法）中包含的，TS语法检查会报一个错误

这个错误可能是因为拼写错误（显示错误主要目的是这个），或就是这样

  1. interface SquareConfig {
  2.     color?: string;
  3.     width?: number;
  4. }
  6. function createSquare(config: SquareConfig): { color: string; area: number } {
  7.     return {color: 'red',area: 23}
  8. }
  10. let mySquare = createSquare({ colour: "red", width: 100 });// Error

解决方法：断言

  1. let mySquare = createSquare({ colour: "red", width: 100 } as SquareConfig);

允许额外属性

若要在方法中使用额外属性,可以在接口中添加[propName: string]: any;

  1. interface SquareConfig {
  2.     color?: string;
  3.     width?: number;
  4.     [propName: string]: any;
  5. }

通过变量

通过将对象赋给变量来绕过检查（至少需要一个共同属性）

  1. let squareOptions = { colour: "red", width: 100 };
  2. let mySquare = createSquare(squareOptions);

大多数时候多余属性是错误的存在

发表评论

表情：
评论列表 （有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Typescript学习笔记（二）

    泛型 在像C\和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。 我们需要一种方法使返

    迷南。迷南。/ 0 赞/ 323 阅读