面试题：Angular中TypeScript的接口如何与组件交互

在组件中使用接口规范输入属性（@Input()）的数据类型

首先定义接口，例如：

export interface User {
  name: string;
  age: number;
}

然后在组件中使用该接口来规范@Input()属性：

import { Component, Input } from '@angular/core';
import { User } from './user.interface';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() user: User;
}

利用接口处理组件方法的参数和返回值类型

定义接口，例如：

export interface MathOperation {
  num1: number;
  num2: number;
}

在组件方法中使用接口：

import { Component } from '@angular/core';
import { MathOperation } from './math - operation.interface';

@Component({
  selector: 'app - calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent {
  addNumbers(operation: MathOperation): number {
    return operation.num1 + operation.num2;
  }
}

父子组件通信场景下接口保证数据传递类型安全的示例

父组件：

import { Component } from '@angular/core';
import { User } from './user.interface';

@Component({
  selector: 'app - parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  user: User = { name: 'John', age: 30 };
}

父组件模板（parent.component.html）：

<app - child [user]="user"></app - child>

子组件（ChildComponent）：

import { Component, Input } from '@angular/core';
import { User } from './user.interface';

@Component({
  selector: 'app - child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() user: User;
}

子组件模板（child.component.html）：

<p>Name: {{user.name}}, Age: {{user.age}}</p>

在这个例子中，通过User接口，父子组件在传递user数据时，保证了数据结构的一致性。如果父组件传递的数据不符合User接口的定义，TypeScript编译器会报错，从而确保了数据传递的类型安全。

星途面试题库

面试题：Angular中TypeScript的接口如何与组件交互

知识考点

面试题答案