Type-Safe i18n on RN

Transcript

1. Type-Safe i18n on RN Quipper Limited @hotchemi

2. 7/19 Thu 19:30~22:00

3. react-native-i18n user?!

4. • It’s OK, but... • key name can be long

   and nested • gotta move around definition and code • can’t detect an error in compile time • “missing [key name] translation”
5. None

6. • quipper/react-native-i18n-ts • paired with TypeScript • inspired by R.java

   mechanism • strong IDE support • compile time check

7. Demo

8. • Under the hood • Generate d.ts file from definition

   • with TypeScript compiler API

9. declare module "react-native-i18n" { var fallbacks: boolean; var translations: {

   [keys: string]: any; }; function t(key: "common.cancel", opts: { value: any; }): string; function t(key: "common.ok"): string; } // for json loading declare module "*.json" { const value: any; export default value; }

10. • Installation • yarn add -D react-native-i18n-ts • set “model”

    and “outputDir” in package.json • tweak filesGlob in tsconfig.json • execute “yarn i18n-ts” command

11. Enjoy!