遍历compex对象以修改Typecript中的所有值

Question

我有一个看起来像这样的打字稿界面：

interface IPageConfig {
    fooSection?: IFooSectionUrlMap;
    barSection?: IBarSectionUrlMap;
    blaSection?: IBlaSectionUrlMap;
}

interface IFooSectionUrlMap {
    oneUrl: string;
    twoUrl: string;
    threeUrl: string;
}

interface IBarSectionUrlMap {
    fourUrl: string;
    fiveUrl: string;
    sixUrl: string;
}

interface IBlaSectionUrlMap{
    sevenUrl: string;
    eightUrl: string;
    nineUrl: string;
}

我想做的是遍历对象上的每个URL——在每个属性中——并通过在每个URL前面加上/将它们从相对URL更改为绝对URL。

我尝试使用Object.keys.forEach（）和Object.entries.forEach（）从我遇到的一些文章中，我尝试使用...在循环中将事物定义为键。在 TS 抱怨之前，它总是能很好地通过第一级。它抱怨同样的事情：

'for… in'语句的左侧必须是'string'或'any'. ts类型（2405）

我在这里做错了什么？下面是代码：

typescript prettyprint-override">function convertToRelativeUrls(config: IPageConfig) {
    let sectionName: keyof IPageConfig;
    for (sectionName in config) {
        if (sectionName.endsWith('Section')) {
            let section = config[sectionName];
            if (section) {

                // If I hover over it, propName has a type of never
                let propName: keyof typeof section;

                // Right here is where TS complains -- propName
                for (propName in section) {
                    if (propName && section && section[propName]) {

                        // When I try setting it, the right-hand side is fine.
                        // The left-hand side says 
                        // "Type 'string' is not assignable to type 'never'"
                        section[propName] = '/' + section[propName];
                    }
                }
            }
        }
    }
}

编辑:我的函数中的错别字。应该是<代码>。endsWith('Section')，而不是< code >。endsWith('UrlMap')。我已经修复了原始版本，但我把它留在这里，所以呼吁它的评论仍然有意义。

Answer 1

您可以通过修改类型和函数的某些方面来解决这个问题。

要使这种方法起作用，您需要使用类型别名而不是接口，以便在声明后无法将其他字段添加到您的类型中：这会通知编译器它们不是开放/可变的。

除了前面的TS手册链接之外，您还可以看到这些链接以获取更多信息：1、2、3

对于每个接口，您都可以这样重写：

// before
interface IFooSectionUrlMap {
  oneUrl: string;
  twoUrl: string;
  threeUrl: string;
}

// after
type IFooSectionUrlMap = {
  oneUrl: string;
  twoUrl: string;
  threeUrl: string;
};

关于从数据派生类型的另一种方法，请参见TS playground链接。

将接口转换为类型别名后，您可以专注于函数。您可以使用一些类型实用程序来创建一个可以分配给IPageConfig的类型，而不是使用IPageConfig作为对象参数的类型

function prefixNestedStrings (obj: Partial<Record<string, Record<string, string>>>): void {
  for (const key in obj) {
    if (!key.endsWith('Section')) continue; // key pattern mismatch

    const objChild = obj[key]; // Record<string, string> | undefined
    if (!objChild) continue; // no value

    for (const key in objChild) {
      if (!key.endsWith('Url')) continue; // key pattern mismatch
      const str = objChild[key];
      if (typeof str !== 'string') continue; // type mismatch
      objChild[key] = `/${str}`;
    }
  }
}

把所有的东西放在一起：

TS游乐场

type IFooSectionUrlMap = {
  oneUrl: string;
  twoUrl: string;
  threeUrl: string;
};

type IBarSectionUrlMap = {
  fourUrl: string;
  fiveUrl: string;
  sixUrl: string;
};

type IBlaSectionUrlMap = {
  sevenUrl: string;
  eightUrl: string;
  nineUrl: string;
};

type IPageConfig = {
  fooSection?: IFooSectionUrlMap;
  barSection?: IBarSectionUrlMap;
  blaSection?: IBlaSectionUrlMap;
};

function prefixNestedStrings (obj: Partial<Record<string, Record<string, string>>>): void {
  for (const key in obj) {
    if (!key.endsWith('Section')) continue; // key pattern mismatch

    const objChild = obj[key]; // Record<string, string> | undefined
    if (!objChild) continue; // no value

    for (const key in objChild) {
      if (!key.endsWith('Url')) continue; // key pattern mismatch
      const str = objChild[key];
      if (typeof str !== 'string') continue; // type mismatch
      objChild[key] = `/${str}`;
    }
  }
}

const pageConfig: IPageConfig = {
  fooSection: {
    oneUrl: 'one',
    twoUrl: 'two',
    threeUrl: 'three',
  },
  barSection: {
    fourUrl: 'four',
    fiveUrl: 'five',
    sixUrl: 'six',
  },
};

prefixNestedStrings(pageConfig);

console.log(pageConfig); // See console: looks good to me

从TS游乐场编译的JS：

function prefixNestedStrings(obj) {
    for (const key in obj) {
        if (!key.endsWith('Section'))
            continue; // key pattern mismatch
        const objChild = obj[key]; // Record<string, string> | undefined
        if (!objChild)
            continue; // no value
        for (const key in objChild) {
            if (!key.endsWith('Url'))
                continue; // key pattern mismatch
            const str = objChild[key];
            if (typeof str !== 'string')
                continue; // type mismatch
            objChild[key] = `/${str}`;
        }
    }
}
const pageConfig = {
    fooSection: {
        oneUrl: 'one',
        twoUrl: 'two',
        threeUrl: 'three',
    },
    barSection: {
        fourUrl: 'four',
        fiveUrl: 'five',
        sixUrl: 'six',
    },
};
prefixNestedStrings(pageConfig);
console.log(pageConfig); // See console: looks good to me