Next-translate: Typescript support

[Miloshinjo]

Is there a relevant @types package to download with this? I keep getting can't find module declaration or --isolatedModules error on build time (when I delcare it into @types folder)

[justincy]

There is nothing. I created my own for my usage which I'll share below, but it doesn't cover the whole API.

declare module 'next-translate/useTranslation' {
  export default function useTranslation(): {
    t: (key: string, query?: { [name: string]: string | number }) => string;
    lang: string;
  };
}

declare module 'next-translate/appWithI18n' {
  type Config = {
    defaultLanguage?: string;
    allLanguages?: Array<string>;
    ignoreRoutes?: Array<string>;
    redirectToDefaultLang?: boolean;
    currentPagesDir?: string;
    finalPagesDir?: string;
    localesPath?: string;
    loadLocaleFrom?: (lang: string, ns: string) => void;
    pages?: { [name: string]: Array<string> };
  };

  export default function appWithI18n(App: FunctionComponent, config: Config);
}

declare module 'next-translate/I18nProvider' {
  export default function I18nProvider(props: {
    lang: string;
    namespaces: object;
    children: ReactNode;
  }): ReactElement;
}

declare module 'next-translate/Router' {
  type RouterAdditions = {
    pushI18n(path: string, as?: string, options?: {}): void;
    replaceI18n(path: string, as?: string, options?: {}): void;
  };
  export type Router = import('next/router').SingletonRouter & RouterAdditions;
  declare const _default: Router;
  export default _default;
}

declare module 'next-translate/Link' {
  type NextLink = import('next/link');
  declare const _default: NextLink;
  export default _default;
}

[aralroca]

@justincy @Miloshinjo I'm not very familiar with TypeScript. Feel free to open a PR in order to add the types! It will be very useful for many people!

[Miloshinjo]

Thank you. @justincy and @aralroca. It would be useful I agree. The current workaround is to use the require syntax to import stuff instead of es6 imports.

This lib is very good and it was very easy to implement translations (much easier then regular nexti18next lib), so I think it's worth to add @types to it.

Cheers!

[BjoernRave]

It might be worth it to take a look at https://github.com/jaredpalmer/tsdx

[ljosberinn]

@justincy hey sorry for the ping. would you mind sharing your folder structure / how you got TS to pick up that typings file? I've tried now around 10 different ways to include it and neither VSCode nor tsc pick up my *.d.ts.

[justincy]

You have to add the directory of the d.ts file to compilerOptions.typeRoots in tsconfig.json. Like this:

{
  "compilerOptions": {
    ...
    "typeRoots": ["src/@types", "node_modules/@types"]
  }
}

By default, typeRoots includes node_modules so you have to include that when you override it. So in that example above, src/@types is where I keep my custom TS defs.

Does that make sense? Does it work for you?

[ljosberinn]

Thank you, ironically at the same time you answered I found an alternative way without typeRoots simply using *.d.ts.

[BadRed]

I can try and grab that one @aralroca ?

[aralroca]

@BadRed sure! Feel free to open a PR! PR are welcome! Thank you so much ☺️

[aralroca]

@BadRed I put the tag "help wanted" because I'm not very familiar with TypeScript, so your help is more than welcomed 🙌👏

[arnaudjnn]

How to use GetStaticPaths with ts?

export const getStaticPaths: GetStaticPaths = async ({ lang }) => {
   ....
}

return
```
Type '({ lang }: { lang: any; }) => Promise<{ paths: { params: { slug: any; }; }[]; fallback: boolean; }>' is not assignable to type 'GetStaticPaths'.

[aralroca]

How to use GetStaticPaths with ts?

export const getStaticPaths: GetStaticPaths = async ({ lang }) => {
   ....
}

return

Type '({ lang }: { lang: any; }) => Promise<{ paths: { params: { slug: any; }; }[]; fallback: boolean; }>' is not assignable to type 'GetStaticPaths<ParsedUrlQuery>'.

I'm not very familiar with TypeScript, but I guess that you can create your own interface with { paths: [], fallback: boolean, lang: string } meanwhile this issue is not developed. Also, as another option, directly add the comment // @ts-ignore above the function, without any interface.

[RobinSCU]

Good Morning,

@aralroca I started to transfer your package to Typescript https://github.com/RobinSCU/next-translate/tree/feature/rewrite-to-ts maybe it helps here. It is just the start of the transfer and I don't have all the types yet. For example, I don't know what the type of the argument in the i18nMiddleware is, my debugger says its an IncommingMessage but as far as I know, this type don't have res and next as variables.

Is this transfer interesting for you and your team?

Best Robin

[dasblitz]

@arnaudjnn you've probably found a solution by now, but I'll just add this here for others to find.

I've created a file like below with the following types for GetStaticProps and GetStaticPaths. Although the GetStaticProps type from Nextjs works too because it allows for props to be anything, so props.lang is already accounted for.

import { ParsedUrlQuery } from "querystring";

type Lang = {
  lang: string;
};

export type GetStaticProps<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery
> = (
  context: GetStaticPropsContext<Q> & Lang
) => Promise<GetStaticPropsResult<P>>;

export type GetStaticPaths<P extends ParsedUrlQuery = ParsedUrlQuery> = (
  context: Lang
) => Promise<{
  paths: Array<
    | string
    | {
        params: P;
      }
  >;
  fallback: boolean | "unstable_blocking";
}>;

[aralroca]

TypeScript types are added on 0.19.3 release. I'm going to close this issue, although in the future I would like to migrate the full project to TypeScript to autogenerate this types.