使 FormattedMessage 中的 id 從 react-intl 繼承自自定義 TypeScript 接口以啟用 VS IntelliSense 和類型檢查

Question

鑒於react-localization沒有日期和數字格式並且嚴重依賴於一個開發人員，我們決定切換到react-intl ，因為從長遠來看它似乎更安全。

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

我們之前的代碼如下所示：

本地化服務.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
}

en-US.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';

但是，使用來自react-intl id的FormattedMessage是string | number | undefined string | number | undefined string | number | undefined 。 我們仍然使用語言文件，那么我們如何確保id在ILanguageStrings中而不破壞react-intl的原始類型定義？

我嘗試使用 TypeScript 聲明合並和合並接口，但我只能在那里添加新成員而不能更改 id 屬性。 “有效”字符串也不被認為是正確的。

反應-應用程序-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

Answer 1

我之前在使用react-intl和typescript時遇到了同樣的問題。 我的解決方案只是創建一個包裝器組件，為id提供適當的類型。 id類型應該是支持keyof的語言配置對象的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>
  );
}

格式化消息.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

Answer 2

我的第一個想法與@NearHuscarl 相同

但是，我發現文檔中有一段是關於這個的：

https://formatjs.io/docs/react-intl#typing-message-ids-and-locale

您可以使用全局聲明來增加消息 ID 的類型

declare global {
  namespace FormatjsIntl {
    interface Message {
      ids: keyof typeof messages
    }
  }
}