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 และมันใช้งานได้สำหรับฉัน!
