面试题：TypeScript 国际化方案类型安全优化与动态加载

import { useState, useEffect } from 'react';

// 假设语言包的结构
type LanguagePack = {
  [key: string]: string;
};

// 加载语言包的函数，这里模拟从服务器获取
async function loadLanguagePack(lang: string): Promise<LanguagePack> {
  // 实际应用中这里会是一个网络请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        greeting: `Hello, ${lang === 'en'? 'world' : '世界'}`
      });
    }, 1000);
  });
}

// 自定义Hook用于动态加载语言包
function useDynamicLanguage(lang: string) {
  const [languagePack, setLanguagePack] = useState<LanguagePack | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setLoading(true);
    loadLanguagePack(lang)
    .then((pack) => {
        setLanguagePack(pack);
        setError(null);
      })
    .catch((err) => {
        setError(`加载语言包失败: ${err.message}`);
      })
    .finally(() => {
        setLoading(false);
      });
  }, [lang]);

  return {
    languagePack,
    loading,
    error
  };
}

// 使用示例
function App() {
  const { languagePack, loading, error } = useDynamicLanguage('en');

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div>
      {languagePack && <p>{languagePack.greeting}</p>}
    </div>
  );
}

export default App;

上述代码中：

LanguagePack 类型定义：定义了语言包的结构，它是一个对象，键值对中值为字符串。
loadLanguagePack 函数：模拟从服务器加载语言包的异步操作。
useDynamicLanguage 自定义Hook：使用 useState 和 useEffect 实现动态加载语言包，并处理加载状态（loading）、加载结果（languagePack）以及加载错误（error）。
App 组件：展示如何使用这个自定义Hook，并根据不同的状态进行相应的UI渲染。

星途面试题库

面试题：TypeScript 国际化方案类型安全优化与动态加载

知识考点

面试题答案