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”
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!