React Typescript国际化Context Provider报函数缺少返回类型错误

问题修复方案 #

你遇到的Missing return type on function报错是ESLint规则要求所有函数必须显式声明返回类型导致，React函数组件的标准返回类型是JSX.Element，除此之外你的代码还存在多处类型定义不匹配的问题，会触发后续TS报错，统一修正如下： #

具体修改点

• 给LocalizationProvider箭头函数显式标注返回值为JSX.Element，解决缺失返回类型报错，也可通过配置ESLint规则豁免React函数组件的返回类型检查
• 修正上下文类型定义错误：
  1. translations原类型标注为string错误，实际是LocalizedStrings实例，修改为对应类型
  2. setAppLanguage实际接收字符串参数，原无参定义错误
  3. initializeAppLanguage是异步函数，返回值为Promise<void>
• 修正上下文默认值不符合类型要求的问题，用类型断言兼容空默认值
• 修正children的类型为更通用的React.ReactNode，兼容所有合法React子元素

修正后完整代码

import AsyncStorage from '@react-native-community/async-storage';
import React, {createContext, useState, ReactNode} from 'react';
import LocalizedStrings from 'react-native-localization';
import * as RNLocalize from 'react-native-localize';

import en from '@local/translation/localization/en.json';
import ru from '@local/translation/localization/ru.json';
import fr from '@local/translation/localization/fr.json';

const DEFAULT_LANGUAGE = 'en';
const APP_LANGUAGE = 'appLanguage';

const languages = {en, ru, fr};
const translations = new LocalizedStrings(languages);

// 修正上下文类型定义
interface LocalLizationContextType {
  translations: LocalizedStrings<typeof languages>;
  setAppLanguage: (language: string) => void;
  appLanguage: string;
  initializeAppLanguage: () => Promise<void>;
}

// 用类型断言处理空默认值
export const LocalizationContext = createContext<LocalLizationContextType>({} as LocalLizationContextType);

interface LocalizationProviderProps {
  children: ReactNode; // 修正children类型
}

// 显式标注返回类型为JSX.Element 解决Missing return type报错
export const LocalizationProvider = ({children}: LocalizationProviderProps): JSX.Element => {
  const [appLanguage, setAppLanguage] = useState<string>(DEFAULT_LANGUAGE);

  const setLanguage = (language: string) => {
    translations.setLanguage(language);
    setAppLanguage(language);
    AsyncStorage.setItem(APP_LANGUAGE, language);
  };

  const initializeAppLanguage = async () => {
    const currentLanguage = await AsyncStorage.getItem(APP_LANGUAGE);

    if (currentLanguage) {
      setLanguage(currentLanguage);
    } else {
      let localeCode = DEFAULT_LANGUAGE;
      const supportedLocaleCodes = translations.getAvailableLanguages();
      const phoneLocaleCodes = RNLocalize.getLocales().map(
        locale => locale.languageCode,
      );
      phoneLocaleCodes.some(code => {
        if (supportedLocaleCodes.includes(code)) {
          localeCode = code;
          return true;
        }
      });
      setLanguage(localeCode);
    }
  };
  return (
    <LocalizationContext.Provider
      value={{
        translations,
        setAppLanguage: setLanguage,
        appLanguage,
        initializeAppLanguage,
      }}
    >
      {children}
    </LocalizationContext.Provider>
  );
};

可选ESLint规则豁免配置

如果不想每次都给React组件显式写返回类型，可以在.eslintrc.js里添加如下规则，允许箭头函数形式的React组件自动推导返回类型：

rules: {
  '@typescript-eslint/explicit-function-return-type': [
    'error',
    { allowExpressions: true }
  ]
}

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