React+TypeScript类型链式访问优化：去除default层级

问题原因 #

你当前代码里出现types.login.default.form的原因是：login.tsx中使用了export default login导出命名空间，当用import * as _login导入时，模块对象_login会把default作为属性来存放你导出的命名空间，因此必须通过.default访问。

解决方案 #

方案1：修改login.tsx直接导出命名空间 #

把login.tsx中的export default改为直接导出命名空间：

// login.tsx
export namespace login {
  export type form = {
    mobile: string;
  }
}

然后修改index.tsx，直接导入命名空间并聚合：

// index.tsx
import { login } from './login';

namespace types {
  export import login = login;
}

export default types;

此时在app.tsx中就可以直接使用types.login.form：

// app.tsx
import types from '../types';

const Form = ({ mobile }: types.login.form) => {
  return <div>{mobile}</div>;
};

方案2：拆分类型导出与聚合 #

如果不想用命名空间，也可以拆分导出：

// login.tsx
export type LoginForm = {
  mobile: string;
};

然后在index.tsx中重新组织types命名空间：

// index.tsx
import { LoginForm } from './login';

namespace types {
  export namespace login {
    export type form = LoginForm;
  }
}

export default types;

这样同样可以在app.tsx中使用types.login.form。

关键说明 #

• TypeScript中，export default导出的内容会被包裹在模块的default属性中，使用import * as导入时必须通过.default访问。
• 直接导出命名空间或类型，可以避免生成多余的default层级，让链式访问更简洁。

内容的提问来源于stack exchange，提问作者new of man