TypeScript中如何实现由其他接口属性拼接的接口属性定义

你这段写法有两个核心认知偏差，先纠正再给实现方案：

• TypeScript的interface是纯编译时的类型约束，不会产生任何运行时代码，不可能直接在接口定义里实现字符串拼接的运行时逻辑，必须分开处理「类型校验规则」和「实际赋值逻辑」两部分。
• 类型空间里访问接口的属性类型，不能用JS取值的点语法，必须用方括号索引访问符。

类型约束定义（编译时校验） #

如果使用TS 4.1及以上版本，可借助模板字面量类型，严格约束childTitle的格式为appId拼接横杠再拼接appName的结构：

export interface FooParent {
   appId: string,
   appName: string
}

export interface FooDetail {
  childTitle: `${FooParent['appId']}-${FooParent['appName']}`
}

上述定义仅在编译阶段做格式校验，要求childTitle必须符合字符串-字符串的格式，不会自动生成拼接后的值。
如果你的TS版本低于4.1不支持模板字面量类型，直接把childTitle类型设为string即可，格式正确性靠运行时逻辑保证。

运行时拼接逻辑 #

字符串拼接是JS运行时行为，需要在给FooDetail类型对象赋值时实现，可以直接手动拼接，也可以封装工具函数统一处理避免重复代码：

// 原始parent数据
const parentData: FooParent = {
  appId: "1001",
  appName: "订单管理系统"
}

// 方式1：直接赋值时手动拼接
const detail1: FooDetail = {
  childTitle: `${parentData.appId}-${parentData.appName}` // 最终值为"1001-订单管理系统"
}

// 方式2：封装通用生成函数，自动完成拼接，保证类型和值都符合要求
function createFooDetail(parent: FooParent): FooDetail {
  return {
    childTitle: `${parent.appId}-${parent.appName}`
  }
}
const detail2 = createFooDetail({appId: "1002", appName: "用户中心"})

扩展场景：需要FooDetail包含FooParent全部属性 #

如果你的fooDetail本身需要复用fooParent的所有属性，可以用交叉类型简化定义，配合工具函数一次生成完整对象：

type FooFullDetail = FooParent & {
  childTitle: `${FooParent['appId']}-${FooParent['appName']}`
}

function createFullDetail(parent: FooParent): FooFullDetail {
  return {
    ...parent,
    childTitle: `${parent.appId}-${parent.appName}`
  }
}

// 调用函数直接得到包含appId、appName、childTitle的完整对象，无需手动处理拼接
const fullDetail = createFullDetail({appId: "1003", appName: "支付平台"})

内容的提问来源于stack exchange，提问作者Sunny Singh