为何无法在TypeScript类内定义interface/type？如何简化框架导入？

一、类内部定义interface/type报错问题 #

问题重现 #

代码示例：

class MyClass {
    interface IClass {
        name: string,
        id: string
    }
}

运行时错误提示：
Unexpected token. A constructor, method, accessor, or property was expected.

原因 #

TypeScript语法规则不允许在类的成员声明区域直接定义interface或type，类内部仅允许存在构造函数、方法、访问器或属性。

解决办法 #

• 外部定义类型：将类型移至类的外部作用域，类内部直接引用

  interface IClass {
      name: string,
      id: string
  }
  
  class MyClass {
      private data: IClass;
  }
  

• 命名空间关联类与类型：用命名空间包裹类型，实现类与类型的逻辑关联

  namespace MyClass {
      export interface IClass {
          name: string,
          id: string
      }
  }
  
  class MyClass {
      private data: MyClass.IClass;
  }
  

二、框架API优化：减少类型导入与提升智能提示 #

现有问题 #

框架抽象类RandomsRoute的子类重写方法时，必须单独导入Request、Response类型，且无自动类型提示，使用体验繁琐：

// 框架代码
abstract class RandomsRoute {
   public get(req: Request, res: Response): Promise<void> { res.send('') }
}

// 客户端代码
import RandomsRoute, { Request, Response } from '@my-pkg'

class Client extends RandomsRoute {
   // 不标注类型会报错，必须手动导入并声明
   public get(req: Request, res: Response): Promise<void> { res.send('client side') }
}

优化方案 #

1. 将类型挂载到抽象类静态属性

框架侧将Request、Response类型挂载为RandomsRoute的静态成员，客户端仅需导入抽象类即可访问类型：

// 框架侧代码
import type { Request, Response } from 'your-base-lib'

abstract class RandomsRoute {
   // 挂载类型为静态属性（仅用于类型引用，无需赋值）
   public static type Request = Request;
   public static type Response = Response;

   public get(req: Request, res: Response): Promise<void> { res.send('') }
}

export default RandomsRoute;

客户端使用：

import RandomsRoute from '@my-pkg'

class Client extends RandomsRoute {
   public get(req: RandomsRoute.Request, res: RandomsRoute.Response): Promise<void> {
       res.send('client side')
   }
}

2. 预定义方法签名类型

框架侧定义方法签名的类型别名，子类直接复用该类型，无需重复声明参数与返回值类型：

// 框架侧代码
import type { Request, Response } from 'your-base-lib'

export type RouteGetHandler = (req: Request, res: Response) => Promise<void>

abstract class RandomsRoute {
   public get: RouteGetHandler = async (req, res) => { res.send('') }
}

客户端使用：

import RandomsRoute, { RouteGetHandler } from '@my-pkg'

class Client extends RandomsRoute {
   public get: RouteGetHandler = async (req, res) => {
       res.send('client side')
   }
}

3. 自动推导父类方法类型

利用TypeScript的typeof操作符直接推导父类方法的类型，完全无需额外导入：

import RandomsRoute from '@my-pkg'

class Client extends RandomsRoute {
   public get: typeof RandomsRoute.prototype.get = async (req, res) => {
       res.send('client side')
   }
}

此方式会自动继承父类方法的参数与返回值类型，同时获得完整的智能提示。

内容的提问来源于stack exchange，提问作者zain ul din