TypeScript：扩展Array.prototype.join以支持元组类型

我希望扩展Array.prototype.join方法，使其在数组为元组时返回使用分隔符拼接的模板字符串类型。已实现Join工具类型，但扩展Array定义时，this始终被转换为数组类型，无法得到期望结果。

参考代码如下：

type Throw<ErrorMessage extends string> = `TypeError: ${ ErrorMessage }` & { [ Key in ErrorMessage ]: void }
   
type Join<TupleOrArray, Delimiter> =
  TupleOrArray extends [] ? '' 
  : Delimiter extends string
    ? TupleOrArray extends [infer First, ...infer Rest] | Readonly<[infer First, ...infer Rest]>
      ? First extends string | number | bigint | boolean | null | undefined
        ? Rest extends [] 
          ? `${ First }` 
          : `${ First }${ Delimiter }${ Join<Rest, Delimiter> }` 
        : Throw<'Rest must be an array of strings or empty array'>
      : TupleOrArray extends { toString: () => string }[]
        ? string
        : Throw<'StringTuple is not an array or tuple'>
    : Throw<'Delimiter must be a string'>
  ;

interface Array<T> {
  join<Delimiter>(delimiter: Delimiter): this extends infer TupleOrArray ? Join<TupleOrArray, Delimiter> : never
}

const array = ['a', 'b', 'c']
const tuple = [ 'a', 'b', 'c' ] as const

type JoinedArray = Join<typeof array, '-'>
//   ^? type JoinedArray = string

const joinedArray = array.join('-')
//    ^? const joinedArray: string
// 😎

type JoinedType = Join<typeof tuple, '-'>
//   ^? type JoinedType = 'a-b-c'

const joinedTuple = tuple.join('-')
//    ^? const joinedTuple: string
// 😭

目前joinedTuple的类型被推导为string，期望它是'a-b-c'。

原因 #

用as const声明的元组类型是readonly ["a", "b", "c"]，它继承的是ReadonlyArray<T>而非Array<T>。原代码仅扩展了Array<T>接口，未覆盖只读元组场景，导致join方法仍使用原生定义，返回string。此外原接口定义中this extends infer TupleOrArray的写法冗余，泛型约束可更直接。

修复代码 #

同时扩展Array<T>和ReadonlyArray<T>接口，并调整泛型参数：

type Throw<ErrorMessage extends string> = `TypeError: ${ ErrorMessage }` & { [ Key in ErrorMessage ]: void }
   
type Join<TupleOrArray, Delimiter> =
  TupleOrArray extends [] ? '' 
  : Delimiter extends string
    ? TupleOrArray extends [infer First, ...infer Rest] | Readonly<[infer First, ...infer Rest]>
      ? First extends string | number | bigint | boolean | null | undefined
        ? Rest extends [] 
          ? `${ First }` 
          : `${ First }${ Delimiter }${ Join<Rest, Delimiter> }` 
        : Throw<'Rest must be an array of strings or empty array'>
      : TupleOrArray extends { toString: () => string }[]
        ? string
        : Throw<'StringTuple is not an array or tuple'>
    : Throw<'Delimiter must be a string'>
  ;

// 同时扩展 Array 和 ReadonlyArray 接口
interface Array<T> {
  join<D extends string>(delimiter: D): Join<this, D>;
}

interface ReadonlyArray<T> {
  join<D extends string>(delimiter: D): Join<this, D>;
}

const array = ['a', 'b', 'c']
const tuple = [ 'a', 'b', 'c' ] as const

type JoinedArray = Join<typeof array, '-'>
//   ^? type JoinedArray = string

const joinedArray = array.join('-')
//    ^? const joinedArray: string

type JoinedType = Join<typeof tuple, '-'>
//   ^? type JoinedType = 'a-b-c'

const joinedTuple = tuple.join('-')
//    ^? const joinedTuple: 'a-b-c' ✅

修复说明 #

1. 新增ReadonlyArray<T>接口扩展，覆盖只读元组的场景；
2. 将Delimiter泛型约束为string，确保分隔符类型合法，同时让Join类型能正确推导；
3. 直接返回Join<this, D>，去掉冗余的infer写法，简化逻辑。

书籍 #

• 《TypeScript高级程序设计》：深入讲解TypeScript类型系统，涵盖高级类型、泛型等核心内容；
• 《TypeScript实战》：结合实际项目案例，讲解类型工具的应用技巧。

文章 #

• TypeScript官方文档「高级类型」章节：系统介绍联合类型、交叉类型、类型推断、映射类型等基础高级类型；
• 社区平台（如Medium、Dev.to）的TypeScript系列文章：不少开发者会分享类型工具的实现思路与实战技巧。

视频 #

• YouTube「TypeScript Deep Dive」系列视频：深入剖析TypeScript类型系统的底层逻辑；
• 国内视频平台（如B站）的TypeScript进阶教程：更贴合中文开发者的学习习惯，包含大量实战演示。

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