Stricter typescript type for Trans components prop (#1516)

* Example of how types allow incorrect usage

* Add correct types and allow tslint to run on tsx files

* Remove invalid type example

* Remove test for invalid behaviour

index.d.ts

@@ -34,7 +34,7 @@ export interface TransProps<E extends Element = HTMLDivElement>
   extends React.HTMLProps<E>,
     Partial<WithT> {
   children?: React.ReactNode;
-  components?: readonly React.ReactNode[] | { readonly [tagName: string]: React.ReactNode };
+  components?: readonly React.ReactElement[] | { readonly [tagName: string]: React.ReactElement };
   count?: number;
   context?: string;
   defaults?: string;

package.json

@@ -117,9 +117,9 @@
     "test:watch": "cross-env BABEL_ENV=development jest --no-cache --watch",
     "test:coverage": "cross-env BABEL_ENV=development jest --no-cache --coverage",
     "test:lint": "eslint ./src ./test",
-    "test:typescript": "tslint --project tsconfig.json '**/*.ts'",
-    "test:typescript:noninterop": "tslint --project tsconfig.nonEsModuleInterop.json '**/*.ts'",
-    "test:typescript:customtypes": "tslint --project ./test/typescript/custom-types/tsconfig.json '**/*.ts'",
+    "test:typescript": "tslint --project tsconfig.json '**/*.{ts,tsx}'",
+    "test:typescript:noninterop": "tslint --project tsconfig.nonEsModuleInterop.json '**/*.{ts,tsx}'",
+    "test:typescript:customtypes": "tslint --project ./test/typescript/custom-types/tsconfig.json '**/*.{ts,tsx}'",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "prettier": "prettier --write \"{,**/}*.{ts,tsx,js,json,md}\""

test/typescript/Trans.test.tsx

@@ -26,6 +26,14 @@ function objectComponents() {
   return <Trans components={{ Btn: <button /> }} defaults="Hello <Btn />" />;
 }
 
+function MyComponent() {
+  return <>world</>;
+}
+
+function objectCustomComponents() {
+  return <Trans components={{ Btn: <MyComponent /> }} defaults="Hello <Btn />" />;
+}
+
 function constObjectComponents() {
   const constObject = {
     Btn: <button />,

ts4.1/index.d.ts

@@ -264,7 +264,7 @@ export type TransProps<
   E = React.HTMLProps<HTMLDivElement>
 > = E & {
   children?: TransChild | TransChild[];
-  components?: readonly React.ReactNode[] | { readonly [tagName: string]: React.ReactNode };
+  components?: readonly React.ReactElement[] | { readonly [tagName: string]: React.ReactElement };
   count?: number;
   context?: string;
   defaults?: string;