Home / Questions / 479634
Accepted
Diego
Asked: 2022-08-28 07:18:58 +0800 CST 2022-08-28 07:18:58 +0800 CST

如何在 Angular 的组件中使用接口？

  • 772

我创建了以下接口，我想用它来限制一个属性，然后我用 Strava api 的响应加载它。

界面

export interface Athlete {
    state: string;
    code: string;
    scope: string;
    id: number;
    username: string;
    resource_state: number;
    firstname: string;
    lastname: string;
    bio?: any;
    city: string;
    country: string;
    sex: string;
    premium: boolean;
    summit: boolean;
    created_at: Date;
    updated_at: Date;
    badge_type_id: number;
    weight: number;
    profile_medium: string;
    profile: string;
    friend?: any;
    follower?: any;
}

尝试在组件中使用它时

export class UserComponent implements OnInit {
    athlete: Athlete;
    constructor(
        private _route: ActivatedRoute,
        private _router: Router,
        private _oauth: OauthService
    ) {}

    ngOnInit(): void {
        this._route.queryParams.subscribe((params) =>
            this._oauth.refreshToken(params.code).subscribe((resp) => {
                this.athlete = resp.athlete;
            })
        );
    }
}

在该行athlete: Athlete;中，它向我抛出了错误

La propiedad "athlete" no tiene inicializador y no está asignada de forma definitiva en el constructor.

我不明白，我查阅了很多文档，也没有阅读任何需要有构造函数的文档，而且我也认为不可能有接口，而是应该有一个实现所述接口的类组装起来；我不知道这是否适合我正在寻找的东西，即从我使用的变量中提取数据。

angular

3 Answers

  1. 那strict是因为打字稿模式已打开。您可以在strict 此处记录有关该模式的信息

    配置在项目文件tsconfig.js中，类似这样：

    "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,

    回到你的情况。除了创建实现接口的类之外，您还可以将 a 添加!到变量的名称中，这样您就可以告诉编译器不要显示错误，因为您确保该变量将被初始化，并保留如下声明：

    export class UserComponent implements OnInit {
    athlete!: Athlete;
    • 2
  2. Best Answer

    如果我可以帮助某人，这就是我解决它的方法。

    如果您看到更优化的解决方案，我希望您对此发表评论。

    言归正传，一方面我保留了已有的界面

    export interface IAthlete {
    id: number;
    username: string;
    resourceState: number;
    firstname: string;
    lastname: string;
    bio: null;
    city: string;
    state: string;
    country: string;
    sex: string;
    premium: boolean;
    summit: boolean;
    createdAt: Date;
    updatedAt: Date;
    badgeTypeID: number;
    weight: number;
    profileMedium: string;
    profile: string;
    friend: null;
    follower: null;
}

    另一方面，我创建了一个类，在其中实现了接口，并在构造函数中初始化了所有属性

    import { IAthlete } from './athlete.interface';
export class Athlete implements IAthlete {
    id: number;
    username: string;
    resourceState: number;
    firstname: string;
    lastname: string;
    bio: null;
    city: string;
    state: string;
    country: string;
    sex: string;
    premium: boolean;
    summit: boolean;
    createdAt: Date;
    updatedAt: Date;
    badgeTypeID: number;
    weight: number;
    profileMedium: string;
    profile: string;
    friend: null;
    follower: null;

    constructor() {
        this.id = 0;
        this.username = '';
        this.resourceState = 0;
        this.firstname = '';
        this.lastname = '';
        this.bio = null;
        this.city = '';
        this.state = '';
        this.country = '';
        this.sex = '';
        this.premium = false;
        this.summit = false;
        this.createdAt = new Date();
        this.updatedAt = new Date();
        this.badgeTypeID = 0;
        this.weight = 0;
        this.profileMedium = '';
        this.profile = '';
        this.friend = null;
        this.follower = null;
    }
}

    所以现在我可以使用它们来输入和声明新属性，你甚至可以输入订阅响应（如 Welcome 所示）

    export class UserComponent implements OnInit {
    athlete: Athlete = new Athlete();
    constructor(
        private _route: ActivatedRoute,
        private _router: Router,
        private _oauth: OauthService
    ) {}

    ngOnInit(): void {
        this._route.queryParams.subscribe((params) =>
            this._oauth.refreshToken(params.code).subscribe((resp: Welcome) => {
                
                this.athlete = resp.athlete;
            })
        );
    }
}
    • 1

  3. 来自 TS 2.7 文档（链接）

    严格类初始化 TypeScript 2.7 引入了一个名为 --strictPropertyInitialization 的新标志。此标志执行检查以确保类的每个实例属性在构造函数主体中或由属性初始化程序初始化。

    如果您想保留接口而不是我看到您已更改的类，则只要按照构造函数中的要求对其进行初始化就足够了，即使您想稍后进行分配而将其初始化为 null 而没有明确指出承诺用 ! 声明它 （正如你已经被告知的那样）。

    希望这可以帮到你！

    • 1