ค้นหาเว็บไซต์

typescript - ใช้ String เป็นประเภทค่าที่ส่งกลับจากฟังก์ชัน t() กับ i18next


ด้วย i18next v22.0.0 มาพร้อมความปลอดภัยด้านประเภทเต็มรูปแบบสำหรับฟังก์ชันการแปล t('world.greeting') ซึ่งยอดเยี่ยมมาก แต่เนื่องจากคุณสามารถใช้ฟังก์ชัน t() เพื่อดึงวัตถุจากการแปลแบบซ้อนกัน มันจึงอาจส่งกลับวัตถุหรือสตริงก็ได้

ฉันมักจะส่งคีย์การแปลที่ส่งผลลัพธ์เป็นสตริง ฉันใช้ t() เป็นหลักในบริบทที่มันต้องคืนค่าสตริง ดังนั้นฟังก์ชันเช่นในตัวอย่างโค้ดต่อไปนี้จึงทำให้เกิดข้อผิดพลาด TypeScript:

const resources = {
  en: {
    translation: {
      world:  {
        withGreeting: 'Hello World',
        withoutGreeting: 'World',
        someNestedProperty: {
          hello: 'Text',
        }
      },
    },
  },
}

// Declare i18next typings: https://www.i18next.com/overview/typescript
declare module "i18next" {
  interface CustomTypeOptions {
    resources: typeof resources["en"];
  }
}


// (...) initialize i18next

const getText = (enabled: boolean): string => {
   if(enabled) {
     // Typescript Error: string | { hello: string } not assignable to type string
     return t('world.withGreeting');  
   }
   return t('world.withoutGreeting');
}

เป็นไปได้ไหมด้วยเวทมนตร์ TypeScript บางอย่างเพื่อให้คุณบังคับให้ t() คืนค่าได้เพียงสตริงเท่านั้น?

คำตอบ #1

มันผ่านมาเป็นเวลานานแล้ว แต่ในกรณีที่ใครเจอนี่ ฉันสามารถเขียนทับอินเทอร์เฟซ TFunction ดั้งเดิมของ i18next ได้

ฉันสร้างไฟล์ที่มีชื่อเดียวกับไฟล์ที่มีการประกาศอินเทอร์เฟซ TFuncion ใน node_modules (index.d.ts) จากนั้นฉันได้คัดลอกอินเทอร์เฟซ TFuncion ดั้งเดิมมา แต่แทนที่ประเภทที่ส่งกลับทั้งหมดเป็น string

ไฟล์ index.d.ts สุดท้ายมีเนื้อหาดังนี้:

declare module 'i18next' {

  export interface TFunction {
    // basic usage
    <
      TResult extends TFunctionResult = string,
      TKeys extends TFunctionKeys = string,
      TInterpolationMap extends object = StringMap,
    >(
      key: TKeys | TKeys[],
    ): string
    <
      TResult extends TFunctionResult = TFunctionDetailedResult<object>,
      TKeys extends TFunctionKeys = string,
      TInterpolationMap extends object = StringMap,
    >(
      key: TKeys | TKeys[],
      options?: TOptions<TInterpolationMap> & { returnDetails: true; returnObjects: true },
    ): string
    <
      TResult extends TFunctionResult = TFunctionDetailedResult,
      TKeys extends TFunctionKeys = string,
      TInterpolationMap extends object = StringMap,
    >(
      key: TKeys | TKeys[],
      options?: TOptions<TInterpolationMap> & { returnDetails: true },
    ): string
    <
      TResult extends TFunctionResult = object,
      TKeys extends TFunctionKeys = string,
      TInterpolationMap extends object = StringMap,
    >(
      key: TKeys | TKeys[],
      options?: TOptions<TInterpolationMap> & { returnObjects: true },
    ): string
    <
      TResult extends TFunctionResult = string,
      TKeys extends TFunctionKeys = string,
      TInterpolationMap extends object = StringMap,
    >(
      key: TKeys | TKeys[],
      options?: TOptions<TInterpolationMap> | string,
    ): string
    // overloaded usage
    <
      TResult extends TFunctionResult = string,
      TKeys extends TFunctionKeys = string,
      TInterpolationMap extends object = StringMap,
    >(
      key: TKeys | TKeys[],
      defaultValue?: string,
      options?: TOptions<TInterpolationMap> | string,
    ): string
  }
}

ฉันวางไฟล์ไว้ในโฟลเดอร์ชื่อ overrides และมันใช้งานได้สำหรับฉัน!

บทความที่เกี่ยวข้อง