do.js

// type, model, interface
// type.ts

export interface IUser {
    name: string;
    lastname: string;
    birthday: string | Date;
    skills: {
        id: number;
        value: string;
        level: string;
    }[]
}


// service
// service.ts

import { IUser } from './../../dont/types/user';

export class UserService {
    getUser(): IUser {
        return {
            name: 'Vinicius', 
            lastname: 'Marcelino', 
            birthday: '29-09-2000', 
            skills: [
                {
                    id: 1, 
                    value: 'CSS', 
                    level: 'pleno'
                }]
            }
    }
}



// Component
// profile.ts

import { UserService } from "../service/service";
import { IUser } from "../types/user";

type ISkill = IUser['skills'][0]

interface ISkillTemplate extends ISkill {
    checked: boolean;
}

interface IUserTemplate extends IUser {
    fullname: string;
    skills: ISkillTemplate[];
}

class Profile {
    user: IUserTemplate;
    userService: UserService;

    constructor(userService: UserService){
        this.userService = userService;
        this.init();
    }

    init(){
        this.fetchUser();
    }

    fetchUser(){
        const user: IUser = this.userService.getUser();
        this.user = this.mapUser(user);
    }

    mapUser(user: IUser): IUserTemplate {
        return {...user, fullname: `${user.name} ${user.lastname}`, skills: this.mapSkills(user.skills)}
    }

    mapSkills(skills: ISkill[]): ISkillTemplate[] {
        return skills.map((skill) => ({...skill, checked: false}))
    }
}

dont.js

// type, model, interface
// type.ts

export interface IUser {
    name: string;
    lastname: string;
    fullname?: string;
    birthday: string | Date;
    skills: ISkill[]
}

export interface ISkill {
    id: number;
    value: string;
    level: string;
    checked?: boolean;
}


// service
// service.ts

export class UserService {
    getUser() {
        return {
            name: 'Vinicius', 
            lastname: 'Marcelino', 
            birthday: '29-09-2000', 
            skills: [
                {
                    id: 1, 
                    value: 'CSS', 
                    level: 'pleno'
                }]
            }
    }
}


// Component
// profile.ts

import { UserService } from "../service/service";
import { IUser } from "../types/user";

class Profile {
    user: IUser;
    userService: UserService;

    constructor(userService: UserService){
        this.userService = userService;
        this.init();
    }

    init(){
        this.fetchUser();
    }

    fetchUser(){
        const user = this.userService.getUser();
        this.user = {...user, fullname: `${user.name} ${user.lastname}`}
    }
}