-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make the translation function fully type-safe #1193
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
69a412d
Make the translation function fully type-safe
pedrodurek 38bfb24
Fix some missing backmerges
pedrodurek 066e98e
Fix path for the new type definitions
pedrodurek 58805db
Remove Omit helper
pedrodurek f0c1018
Remove readonly
pedrodurek File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
# Prettier does not support typescript 4.1 syntax yet. | ||
# Once they support it, we can remove this line. | ||
# https://github.com/prettier/prettier/issues/9234 | ||
src/ts4.1/index.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,194 @@ | ||
import i18next, { ReactOptions, i18n, ThirdPartyModule, Resource, TOptions, StringMap } from 'i18next'; | ||
import * as React from 'react'; | ||
|
||
/** | ||
* This interface can be augmented by users to add types to `react-i18next` default resources. | ||
*/ | ||
export interface Resources {} | ||
|
||
type ResourcesKey<T = keyof Resources> = [T] extends [never] ? string : T; | ||
|
||
export type Namespace = ResourcesKey | ResourcesKey[]; | ||
|
||
export function setDefaults(options: ReactOptions): void; | ||
export function getDefaults(): ReactOptions; | ||
export function setI18n(instance: i18n): void; | ||
export function getI18n(): i18n; | ||
export const initReactI18next: ThirdPartyModule; | ||
export function composeInitialProps(ForComponent: any): (ctx: unknown) => Promise<any>; | ||
export function getInitialProps(): { | ||
initialI18nStore: { | ||
[ns: string]: {}; | ||
}; | ||
initialLanguage: string; | ||
}; | ||
|
||
export interface ReportNamespaces { | ||
addUsedNamespaces(namespaces: Namespace[]): void; | ||
getUsedNamespaces(): string[]; | ||
} | ||
|
||
declare module 'i18next' { | ||
interface i18n { | ||
reportNamespaces: ReportNamespaces; | ||
} | ||
} | ||
|
||
// Normalize single namespace | ||
type OmitArrayProps<T> = Exclude<T, keyof any[]>; | ||
type AppendKeys<K1, K2> = `${K1 & string}.${OmitArrayProps<K2> & string}`; | ||
type Normalize2<T, K = keyof T> = K extends keyof T | ||
? T[K] extends object | ||
? AppendKeys<K, keyof T[K]> | AppendKeys<K, Normalize2<T[K]>> | ||
: never | ||
: never; | ||
type Normalize<T> = keyof T | Normalize2<T>; | ||
|
||
// Normalize multiple namespaces | ||
type UnionToIntersection<U> = (U extends any | ||
? (k: U) => void | ||
: never) extends (k: infer I) => void | ||
? I | ||
: never; | ||
type LastOf<T> = UnionToIntersection< | ||
T extends any ? () => T : never | ||
> extends () => infer R | ||
? R | ||
: never; | ||
type AppendNS<N, K> = `${N & string}:${K & string}`; | ||
type NormalizeMulti<T, U extends keyof T, L = LastOf<U>> = L extends U | ||
? AppendNS<L, Normalize<T[L]>> | NormalizeMulti<T, Exclude<U, L>> | ||
: never; | ||
|
||
type NormalizeReturn<T, V> = V extends `${infer K}.${infer R}` | ||
? K extends keyof T | ||
? NormalizeReturn<T[K], R> | ||
: never | ||
: V extends keyof T | ||
? T[V] | ||
: never; | ||
|
||
type NormalizeMultiReturn<T, V> = V extends `${infer N}:${infer R}` | ||
? N extends keyof T | ||
? NormalizeReturn<T[N], R> | ||
: never | ||
: never; | ||
|
||
export type TFuncKey<N, T = Resources> = N extends (keyof T)[] | ||
? NormalizeMulti<T, N[number]> | ||
: N extends keyof T | ||
? Normalize<T[N]> | ||
: string; | ||
|
||
export type TFuncReturn<N, P, T = Resources> = N extends (keyof T)[] | ||
? NormalizeMultiReturn<T, P> | ||
: N extends keyof T | ||
? NormalizeReturn<T[N], P> | ||
: string; | ||
|
||
export interface TFunction<N extends Namespace> { | ||
<K extends TFuncKey<N>, TInterpolationMap extends object = StringMap>( | ||
key: K, | ||
options?: TOptions<TInterpolationMap> | string, | ||
): TFuncReturn<N, K>; | ||
<K extends TFuncKey<N>, TInterpolationMap extends object = StringMap>( | ||
key: K, | ||
defaultValue?: string, | ||
options?: TOptions<TInterpolationMap> | string, | ||
): TFuncReturn<N, K>; | ||
} | ||
|
||
export interface TransProps<N extends Namespace, K extends TFuncKey<N>, E extends Element = HTMLDivElement> | ||
extends React.HTMLProps<E> { | ||
children?: React.ReactNode; | ||
components?: React.ReactNode[] | { [tagName: string]: React.ReactNode }; | ||
count?: number; | ||
defaults?: string; | ||
i18n?: i18n; | ||
i18nKey?: K; | ||
ns?: N; | ||
parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null | ||
tOptions?: {}; | ||
values?: {}; | ||
t?: TFunction<N>; | ||
} | ||
export function Trans<N extends Namespace, K extends TFuncKey<N>, E extends Element = HTMLDivElement>( | ||
props: TransProps<N, K, E> | ||
): React.ReactElement; | ||
|
||
export function useSSR(initialI18nStore: Resource, initialLanguage: string): void; | ||
|
||
export interface UseTranslationOptions { | ||
i18n?: i18n; | ||
useSuspense?: boolean; | ||
} | ||
|
||
type UseTranslationResponse<N extends Namespace> = [TFunction<N>, i18n, boolean] & { | ||
t: TFunction<N>; | ||
i18n: i18n; | ||
ready: boolean; | ||
}; | ||
export function useTranslation< | ||
N extends Namespace = Extract<ResourcesKey, 'translation'> | ||
>( | ||
ns?: N, | ||
options?: UseTranslationOptions | ||
): UseTranslationResponse<N>; | ||
|
||
// Need to see usage to improve this | ||
export function withSSR(): <Props>( | ||
WrappedComponent: React.ComponentType<Props>, | ||
) => { | ||
({ | ||
initialI18nStore, | ||
initialLanguage, | ||
...rest | ||
}: { | ||
initialI18nStore: Resource; | ||
initialLanguage: string; | ||
} & Props): React.FunctionComponentElement<Props>; | ||
getInitialProps: (ctx: unknown) => Promise<any>; | ||
}; | ||
|
||
export interface WithTranslation<N extends Namespace> { | ||
t: TFunction<N>; | ||
i18n: i18n; | ||
tReady: boolean; | ||
} | ||
|
||
export interface WithTranslationProps { | ||
i18n?: i18n; | ||
useSuspense?: boolean; | ||
} | ||
|
||
export function withTranslation<N extends Namespace>( | ||
ns?: N, | ||
options?: { | ||
withRef?: boolean; | ||
}, | ||
): <P extends WithTranslation<N>>( | ||
component: React.ComponentType<P>, | ||
) => React.ComponentType<Omit<P, keyof WithTranslation<N>> & WithTranslationProps>; | ||
|
||
export interface I18nextProviderProps { | ||
i18n: i18n; | ||
defaultNS?: string; | ||
} | ||
|
||
export const I18nextProvider: React.FunctionComponent<I18nextProviderProps>; | ||
export const I18nContext: React.Context<{ i18n: i18n }>; | ||
|
||
export interface TranslationProps<N extends Namespace> { | ||
children: ( | ||
t: TFunction<N>, | ||
options: { | ||
i18n: i18n; | ||
lng: string; | ||
}, | ||
ready: boolean, | ||
) => React.ReactNode; | ||
ns?: N; | ||
i18n?: i18n; | ||
} | ||
|
||
export function Translation<N extends Namespace>(props: TranslationProps<N>): any; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have a hard time understanding this function, it takes a component as a parameter, returns a context of
unknown
type, which returns a promise ofany
type?ForComponent
is of typeany
? Could we be more specific of which type this is, maybeReactNode | ReactElement
?any
type should be avoided as much as possible.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Those types are coming from the original code, so I don't know much about the
composeInitialProps
function, but I definitely agree, we shouldn't be using any, so we could create an issue to tackle that later.