feat(react-ts): improve default types

Author: afiiif

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to the "vscode-js-ts-react-nextjs-snippets" extension will b
 ## 1.11.0 <small>- 2022/09/06</small>
 
 - Added Redux snippet (`rxDispatch`, `rxStore`, `rxSlice`)
+- Improved React TS snippets
 
 ## 1.10.0 <small>- 2022/07/19</small>
 

package.json

@@ -3,7 +3,7 @@
   "displayName": "JS/TS React/Next.js Snippets",
   "description": "Snippets for JS/TS, React/Next.js, React Query, SWR, Jest, React Hook Form, & many more",
   "icon": "images/logo.png",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "publisher": "afifu",
   "keywords": [
     "vscode",

snippets/typescript.json

@@ -342,7 +342,7 @@
     "prefix": "rFC.TS.$$rFC.(type)",
     "body": [
       "type Props = {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "export default function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}({ ${2:children} }: Props) {$0",
@@ -359,7 +359,7 @@
     "prefix": "rFCe.TS.$$rFCe.(type)",
     "body": [
       "type Props = {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}({ ${2:children} }: Props) {$0",
@@ -378,7 +378,7 @@
     "prefix": "rAFC.TS.$$rAFC.(type)",
     "body": [
       "type Props = {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "export const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = ({ ${2:children} }: Props) => {$0",
@@ -395,7 +395,7 @@
     "prefix": "rAFCe.TS.$$rAFCe.(type)",
     "body": [
       "type Props = {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = ({ ${2:children} }: Props) => {$0",
@@ -414,7 +414,7 @@
     "prefix": "rFC.TS.$$rFC.(interface)",
     "body": [
       "interface Props {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "export default function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}({ ${2:children} }: Props) {$0",
@@ -431,7 +431,7 @@
     "prefix": "rFCe.TS.$$rFCe.(interface)",
     "body": [
       "interface Props {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}({ ${2:children} }: Props) {$0",
@@ -450,7 +450,7 @@
     "prefix": "rAFC.TS.$$rAFC.(interface)",
     "body": [
       "interface Props {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "export const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = ({ ${2:children} }: Props) => {$0",
@@ -467,7 +467,7 @@
     "prefix": "rAFCe.TS.$$rAFCe.(interface)",
     "body": [
       "interface Props {",
-      "\t$2: unknown;",
+      "\t$2: ReactNode;",
       "}",
       "",
       "const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = ({ ${2:children} }: Props) => {$0",

src/snippets/react-ts.ts

@@ -5,7 +5,7 @@ export const tsReactFnComp: Snippet = {
   prefix: ['rFC', '(type)'],
   body: [
     'type Props = {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `export default function \${1:${FILENAME_PASCALCASE}}({ \${2:children} }: Props) {$0`,
@@ -21,7 +21,7 @@ export const tsReactFnCompExport: Snippet = {
   prefix: ['rFCe', '(type)'],
   body: [
     'type Props = {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `function \${1:${FILENAME_PASCALCASE}}({ \${2:children} }: Props) {$0`,
@@ -39,7 +39,7 @@ export const tsReactArrowFnComp: Snippet = {
   prefix: ['rAFC', '(type)'],
   body: [
     'type Props = {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `export const \${1:${FILENAME_PASCALCASE}} = ({ \${2:children} }: Props) => {$0`,
@@ -55,7 +55,7 @@ export const tsReactArrowFnCompExport: Snippet = {
   prefix: ['rAFCe', '(type)'],
   body: [
     'type Props = {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `const \${1:${FILENAME_PASCALCASE}} = ({ \${2:children} }: Props) => {$0`,
@@ -73,7 +73,7 @@ export const tsReactFnCompV2: Snippet = {
   prefix: ['rFC', '(interface)'],
   body: [
     'interface Props {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `export default function \${1:${FILENAME_PASCALCASE}}({ \${2:children} }: Props) {$0`,
@@ -89,7 +89,7 @@ export const tsReactFnCompExportV2: Snippet = {
   prefix: ['rFCe', '(interface)'],
   body: [
     'interface Props {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `function \${1:${FILENAME_PASCALCASE}}({ \${2:children} }: Props) {$0`,
@@ -107,7 +107,7 @@ export const tsReactArrowFnCompV2: Snippet = {
   prefix: ['rAFC', '(interface)'],
   body: [
     'interface Props {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `export const \${1:${FILENAME_PASCALCASE}} = ({ \${2:children} }: Props) => {$0`,
@@ -123,7 +123,7 @@ export const tsReactArrowFnCompExportV2: Snippet = {
   prefix: ['rAFCe', '(interface)'],
   body: [
     'interface Props {',
-    '\t$2: unknown;',
+    '\t$2: ReactNode;',
     '}',
     '',
     `const \${1:${FILENAME_PASCALCASE}} = ({ \${2:children} }: Props) => {$0`,