使来自 react-intl 的 FormattedMessage 中的 id 继承自自定义 TypeScript 接口以启用 VS IntelliSense 和类型检查

Posted 2023-02-19

【中文标题】使来自 react-intl 的 FormattedMessage 中的 id 继承自自定义 TypeScript 接口以启用 VS IntelliSense 和类型检查

【英文标题】：Make id in FormattedMessage from react-intl inherit from a custom TypeScript interface to enable VS IntelliSense and type checking

【发布时间】：2021-01-01 03:42:33

【问题描述】：

鉴于react-localization 没有日期和数字格式并且严重依赖于一位开发人员，我们决定改用react-intl，因为从长远来看它似乎更安全。

https://github.com/stefalda/react-localization/graphs/contributors

我们之前的代码如下所示：

localizationService.ts

import LocalizedStrings from 'react-localization';

import svSE from './languages/sv-SE';
import enUS from './languages/en-US';
import arSA from './languages/ar-SA';

export default new LocalizedStrings(
    svSE,
    enUS,
    arSA
);

ILanguageStrings.ts

export interface ILanguageStrings 
    appName: string
    narration: string
    language: string

zh-CN.ts

import  ILanguageStrings  from '../ILanguageStrings';

const language: ILanguageStrings = 
    appName: "Our App",
    narration: "Narration",
    language: "Language"


export default language;

然后可以导入本地化，ILanguageStrings 通过 Visual Studio 中的 IntelliSense 可见并由 TypeScript 验证。

import localization from '../services/localizationService';

但是使用FormattedMessage 来自react-intl id 是string | number | undefined。我们仍然使用语言文件，那么我们如何确保id 在ILanguageStrings 中而不破坏react-intl 的原始类型定义？

我尝试使用 TypeScript 声明合并和合并接口，但我只能在那里添加新成员，而不能更改 id 属性。 “有效”字符串也不被视为正确。

react-app-env.d.ts：

import * as reactIntl from 'react-intl';

declare module 'react-intl' 
    export interface MessageDescriptor 
        id?: ILanguageStrings;
        idTest: ILanguageStrings 
    

https://github.com/microsoft/TypeScript/issues/10859

https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces

【参考方案1】：

我之前在使用react-intl 和typescript 时遇到了同样的问题。我的解决方案只是创建一个为id 提供适当类型的包装器组件。 id 类型应该是 keyof 支持最多的语言配置对象。

假设文件./languages/en-US的内容是这样的

  "AUTH.GENERAL.FORGOT_BUTTON": "Forgot Password",
  "AUTH.LOGIN.TITLE": "Login Account",
  "AUTH.FORGOT.TITLE": "Forgotten Password?",
  "AUTH.REGISTER.TITLE": "Sign Up",
  "AUTH.VALIDATION.INVALID": "name is not valid",
  "AUTH.VALIDATION.REQUIRED": "name is required",
  "AUTH.VALIDATION.NOT_FOUND": "The requested name is not found",
  "AUTH.VALIDATION.INVALID_LOGIN": "The login detail is incorrect",
  "AUTH.VALIDATION.REQUIRED_FIELD": "Required field",
  "AUTH.VALIDATION.INVALID_FIELD": "Field is not valid",
  "MENU.DASHBOARD": "Dashboard",
  "MENU.PRODUCT": "Product",
  "TOPBAR.GREETING": "Hi,",
  ...

I18nProvider.tsx

import React from "react";
import  IntlProvider  from "react-intl";
import svSE from './languages/sv-SE';
import enUS from './languages/en-US';
import arSA from './languages/ar-SA';

// In this example, english has the most support, so it has all the keys
export type IntlMessageID = keyof typeof enUS;

export default function I18nProvider( children ) 
  return (
    <IntlProvider locale="en" messages=enMessages>
      children
    </IntlProvider>
  );

FormattedMessage.tsx

import React from "react";
import  FormattedMessage as ReactFormattedMessage  from "react-intl";
import  IntlMessageID  from "./I18nProvider";

type FormattedMessageProps = 
  id?: IntlMessageID;
  defaultMessage?: string;
  values?: Record<string, React.ReactNode>;
  children?: () => React.ReactNode;
;

export default function FormattedMessage(props: FormattedMessageProps) 
  return <ReactFormattedMessage ...props />;

用法

import React from "react";
import I18nProvider from "./I18nProvider";
import FormattedMessage from "./FormattedMessage";

export default function App() 
  return (
    <I18nProvider>
      <div className="App">
        <FormattedMessage id="..." />
      </div>
    </I18nProvider>
  );

这是结果

现场演示

在下面的演示中，您可以通过按Ctrl + Space 在编辑器中触发 IntelliSense

【讨论】：

工作就像一个魅力！不过我选择使用export type ILanguageStringsIds = keyof ILanguageStrings;，因为所有语言都继承自同一个接口。