JavaScript新手求助：如何将YAML文件映射到TypeScript定义的接口

场景与现有内容 #

作为JavaScript新手，需要将给定的YAML文件结构映射到TypeScript定义的接口，目前在处理内层数组（如Donors）的映射时遇到问题。

YAML文件结构 #

- provider_name: SEA-AD
  consortiumn_name: SEA-AD
  defaults: thumbnail
  Donors:
  - id: "https://portal.brain-map.org/explore/seattle-alzheimers-disease#Human-MTG-10x_SEA-AD_Male_TissueBlock"
    label: Registered 2/20/2023, Rebecca Hodge, SEA-AD
    description: "4 x 4 x 5 millimeter, 0.11 millimeter"
    link: "https://portal.brain-map.org/explore/seattle-alzheimers-disease"
    sex: Male
    Blocks: 
    - id: https://portal.brain-map.org/explore/seattle-alzheimers-disease#Human-MTG-10x_SEA-AD_Male_TissueBlock
      label: Registered 2/20/2023, Rebecca Hodge, SEA-AD

TypeScript接口定义 #

export interface Provider {
    provider_name: string;
    provider_uuid: string;
    consortium_name: string;
    defaults: string;
    donors: Donor[]
}

export interface Donor {
    id: string;
    label: string;
    description: string;
    link: string;
    age: number;
    sex: string;
    bmi: number;
    blocks: Block[];
}

export interface Block {
    id: string;
    label: string;
}

已编写的JavaScript代码片段 #

const data = load("YAML File");  
const provider = {
    provider_name : data.provider_name,
    consortium_name : data.consortium_name,
    dafaults: data.defaults,
    donors: data.Donors.map(function (donor ) {

问题解答 #

你的思路是否正确？ #

整体思路是正确的：核心就是通过数组的map方法逐层遍历转换，将YAML中的字段映射到TypeScript接口定义的结构上。但需要修正几个细节问题：

1. YAML中的consortiumn_name多了一个字母n，要对应接口的consortium_name字段
2. 代码中dafaults拼写错误，应为defaults
3. YAML中的Donors（大写D）要对应接口的donors（小写d），内层Blocks同理要转为blocks
4. 接口中要求的provider_uuid、age、bmi字段在YAML中缺失，需要补充默认值或从其他来源获取

以下是修正后的完整实现代码：

// 假设load是你使用的YAML加载工具（如js-yaml的load方法）
// 注意YAML最外层是数组，需要取第一个元素
const data = load("YAML File")[0];  

const provider = {
    provider_name: data.provider_name,
    provider_uuid: "", // 缺失字段补默认值，可根据需求调整
    consortium_name: data.consortiumn_name, // 修正YAML的拼写问题
    defaults: data.defaults,
    donors: data.Donors.map(donor => ({
        id: donor.id,
        label: donor.label,
        description: donor.description,
        link: donor.link,
        age: donor.age ?? 0, // 缺失字段补默认值
        sex: donor.sex,
        bmi: donor.bmi ?? 0, // 缺失字段补默认值
        blocks: donor.Blocks.map(block => ({
            id: block.id,
            label: block.label
        }))
    }))
};

其他实现方式 #

1. 使用解构与展开语法简化代码

通过对象解构直接提取YAML中的字段，减少重复代码：

const data = load("YAML File")[0];

const provider = {
    provider_name: data.provider_name,
    provider_uuid: "",
    consortium_name: data.consortiumn_name,
    defaults: data.defaults,
    donors: data.Donors.map(({ 
        id, label, description, link, sex, Blocks, 
        age = 0, bmi = 0 
    }) => ({
        id, label, description, link, sex, age, bmi,
        blocks: Blocks.map(({ id, label }) => ({ id, label }))
    }))
};

2. 封装工具函数提高复用性

如果有多个类似的映射需求，可以把内层的转换逻辑封装成独立函数：

function mapBlock(blockData) {
    return {
        id: blockData.id,
        label: blockData.label
    };
}

function mapDonor(donorData) {
    return {
        id: donorData.id,
        label: donorData.label,
        description: donorData.description,
        link: donorData.link,
        age: donorData.age ?? 0,
        sex: donorData.sex,
        bmi: donorData.bmi ?? 0,
        blocks: donorData.Blocks.map(mapBlock)
    };
}

const data = load("YAML File")[0];
const provider = {
    provider_name: data.provider_name,
    provider_uuid: "",
    consortium_name: data.consortiumn_name,
    defaults: data.defaults,
    donors: data.Donors.map(mapDonor)
};

关于JavaScript的map方法 #

JavaScript数组是内置map方法的，它的作用是遍历数组的每个元素，对每个元素执行回调函数，返回一个由回调结果组成的新数组，不会修改原数组。你之前的误解可能是混淆了数组和对象（对象没有原生map方法）。

核心知识点补充：

• Array.prototype.map()：用于数组的转换与映射，是处理数组数据的常用方法
• 可选链操作符?.：如果YAML中可能存在字段缺失的情况，可以用donor?.age避免访问不存在的属性时报错
• 空值合并运算符??：用于给缺失的字段设置合理的默认值，仅当左侧值为null或undefined时生效

内容的提问来源于stack exchange，提问作者Himanshu Joshi