Merge pull request #86 from phrase/improve-type

chore: Improve type for formatMessage

.github/workflows/main.yml

@@ -2,15 +2,15 @@ name: Test
 on: [push]
 jobs:
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js 12.8
-      uses: actions/setup-node@v1
+    - uses: actions/checkout@v3
+    - name: Use Node.js 16
+      uses: actions/setup-node@v3
       with:
-        node-version: 12.8
+        node-version: 16
     - name: Install dependencies
-      run: npm install
+      run: yarn install
     - name: Test
       run: |
-        npm test -- --configuration=ci
+        yarn test

__tests__/injectIntl.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as Utils from '../helper/test_utils';
-
-import { injectIntl } from '../src';
+import { injectIntl, ReactIntlPhraseProps } from '../src';
 
 const key = 'key.id';
 const locale = 'en';
@@ -14,7 +13,7 @@ describe('injectIntl', () => {
     let ComponentUnderTest;
 
     beforeEach(() => {
-      function Component({ translate }) {
+      function Component({ translate }: ReactIntlPhraseProps) {
         const translation = translate(key);
 
         return (<div>{translation}</div>);
@@ -53,8 +52,8 @@ describe('injectIntl', () => {
     let ComponentUnderTest;
 
     beforeEach(() => {
-      function Component({ formatMessage }) {
-        const message = formatMessage({ id: key });
+      function Component({ formatMessage }: ReactIntlPhraseProps) {
+        const message = formatMessage({ id: key }, {name: 'Eric'});
 
         return (<div>{message}</div>);
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl-phraseapp",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "The In-Context-Editor for react using react-intl",
   "main": "dist/react-intl-phraseapp.js",
   "typings": "./dist/index.d.ts",

src/injectIntl.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { injectIntl as injectIntlReact } from 'react-intl';
+import { injectIntl as injectIntlReact, IntlFormatters } from 'react-intl';
 import { escapeId, isPhraseEnabled } from './functions';
 
 export type ReactIntlPhraseProps = {
     translate: (_: string)=> string;
-    formatMessage: (_: {id?: string}) => string;
+    formatMessage: IntlFormatters['formatMessage'],
 };
 
 export function injectIntl(WrappedComponent: React.ComponentType<ReactIntlPhraseProps>, options?: Parameters<typeof injectIntlReact>[1]): ReturnType<typeof injectIntlReact> & React.FC<ReactIntlPhraseProps> {