1

He creado la siguiente interfaz, la cual quiero usar para tapar una propiedad, que luego cargo con la respuesta de la api de Strava.

Interface

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;
}

Al intentar usarlo en el componente

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;
            })
        );
    }
}

En la línea de athlete: Athlete; me arroja el error

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

No entiendo, he consultado mucha documentación y en ninguna leo que necesite tener un constructor, que además creo que en una interfaz no puede haber, sino que debería montar una clase que implementase dicha interfaz; no sé si sería lo correcto para lo que busco, que es tirar los datos de las variables con las que trabajo.

3 respuestas 3

3

Eso se debe a que el modo strict de typescript está activado. Puedes documentarte acerca del modo strict Aquí

La configuración está en el archivo tsconfig.js del proyecto, similar a esto:

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

Volviendo a tu caso. En lugar de crear una clase que implemente la interfaz puedes agregar un ! al nombre de la variable, con eso le indicas al compilador que no muestre el error porque le aseguras que esa variable será inicializada, quedando la declaración así:

export class UserComponent implements OnInit {
    athlete!: Athlete;
2
  • Como duda personal, el tema de usar el (!), no podría llevar a la generación de errores en caso de que por ejemplo, la llamada a la API devolviese un nulo?, si no esta claro que nos podemos ahorrar el hacer todas las clases (no me interesa quitar el strict), pero claro siempre y cuando el usar la exclamación no genere problema
    – Diego
    Commented el 29 ago. 2021 a las 9:56
  • No habría diferencia con respecto a usar la clase. La validación de inicialización que se salta al usar ! solo existe en tiempo de compilación luego de eso el código transpilado a JS ya no tendrá conocimiento de esas reglas. Si la API devuelve un null se va a guardar en la variable athlete y va a reemplazar cualquier valor con el que se haya inicializado.
    – Lobos
    Commented el 29 ago. 2021 a las 13:53
1

Por si puedo ayudar a alguien, así lo he solucionado yo.

Si veis una solución mas óptima me encantaría que la comentarais.

Vamos al grano, por un lado mantengo la interfaz que ya tenía

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;
}

Por otro he creado una clase, en la que implemento la interfaz y en el constructor inicializo todas las propiedades

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;
    }
}

Y así ahora puedo usarlas para tipar y para declarar nuevas propiedades, incluso se puede tipar las respuestas del subscription (como se ve con el 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

De la documentación de TS 2.7 (Link)

Strict Class Initialization TypeScript 2.7 introduces a new flag called --strictPropertyInitialization. This flag performs checks to ensure that each instance property of a class gets initialized in the constructor body, or by a property initializer.

Si quieres mantener el interface en lugar de la clase que veo que has cambiado, te bastaría con inicializarlo tal y como se pide en el constructor, aunque fuera inicializarlo a null si quieres hacer la asignación más tarde sin indicar expresamente la promesa de declararla con el ! (como ya te han indicado).

Espero que te sirva!

1
  • Con null la verdad que me seguía dando error, pero con el tema de ! si que vi que se iba, gracias por la info, la verdad que estaba un poco desactualizado con Angular y estoy volviendo a la guerra.
    – Diego
    Commented el 30 ago. 2021 a las 15:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.