chore(exampe): add typescript sample

.babelrc

@@ -8,7 +8,6 @@
         }
       }
     ],
-    "@babel/preset-flow",
     "@babel/preset-react"
   ]
 }

example/basic/package.json

@@ -1,10 +1,9 @@
 {
   "name": "basic",
   "version": "1.0.0",
-  "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "i18n": "NODE_ENV=development extract-messages -l=en,ja -o i18n -d en 'src/**/*.{js,tsx}'"
+    "i18n": "NODE_ENV=development extract-messages -l=en,ja -o i18n -d en 'src/**/*.{js,jsx}'"
   },
   "dependencies": {
     "react": "^16.13.1",

example/with-typescript/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true)
+
+  return {
+    presets: ['@babel/preset-react', '@babel/preset-typescript']
+  }
+}

example/with-typescript/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "App": {
+    "hello": "Hello Button",
+    "submit": "Submit Button"
+  },
+  "a": {
+    "hello": "hello",
+    "world": "world"
+  }
+}

example/with-typescript/i18n/ja.json

@@ -0,0 +1,10 @@
+{
+  "App": {
+    "hello": "",
+    "submit": ""
+  },
+  "a": {
+    "hello": "",
+    "world": ""
+  }
+}

example/with-typescript/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "with-typescript",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "i18n": "extract-messages -l=en,ja -o i18n -d en 'src/**/*.{ts,tsx}'"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-intl": "^4.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "extract-react-intl-messages": "latest",
+    "typescript": "^3.8.3"
+  }
+}

example/with-typescript/src/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { injectIntl, useIntl } from 'react-intl'
+
+export const SubmitButton = injectIntl(({ intl }) => {
+  const label = intl.formatMessage({
+    id: 'App.submit',
+    defaultMessage: 'Submit Button'
+  })
+  return <button aria-label={label}>{label}</button>
+})
+
+export const HelloButton = () => {
+  const intl = useIntl()
+  const label = intl.formatMessage({
+    id: 'App.hello',
+    defaultMessage: 'Hello Button'
+  })
+  return <button aria-label={label}>{label}</button>
+}

example/with-typescript/src/messages.ts

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  hello: {
+    id: 'a.hello',
+    defaultMessage: 'hello'
+  },
+  world: {
+    id: 'a.world',
+    defaultMessage: 'world'
+  }
+})