Tweet
Tweet

Slide 1

Slide 1 text

Type-Safe i18n on RN Quipper Limited @hotchemi

Slide 2

Slide 2 text

7/19 Thu 19:30~22:00

Slide 3

Slide 3 text

react-native-i18n user?!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

• quipper/react-native-i18n-ts • paired with TypeScript • inspired by R.java mechanism • strong IDE support • compile time check

Slide 7

Slide 7 text

Demo

Slide 8

Slide 8 text

• Under the hood • Generate d.ts file from definition • with TypeScript compiler API

Slide 9

Slide 9 text

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; }

Slide 10

Slide 10 text

• 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

Slide 11

Slide 11 text

Enjoy!