You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-22Lines changed: 15 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -386,6 +386,19 @@ Please contribute on this topic! [File an issue](https://github.com/sw-yx/react-
386
386
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
387
387
</details>
388
388
389
+
# Working with Non-Typescript Libraries (writing your own index.d.ts)
390
+
391
+
392
+
Please contribute on this topic! [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
393
+
394
+
<details>
395
+
396
+
<summary>Explanation</summary>
397
+
398
+
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
399
+
</details>
400
+
401
+
389
402
# Troubleshooting Handbook: Types
390
403
391
404
Facing weird type errors? You aren't alone. This is the worst part of using Typescript with React. Try to avoid typing with `any` as much as possible to experience the full benefits of typescript. Instead, let's try to be familiar with some of the common strategies to solve these issues.
@@ -518,29 +531,10 @@ Adding two types together:
518
531
519
532
```tsx
520
533
exportinterfaceProps {
521
-
/** this dictates what the button will say */
522
534
label:string;
523
-
/** this dictates what the button will do */
524
-
onClick: (e:any) =>void; // tslint:disable-line
525
-
/**
526
-
* Options for the button styling
527
-
*
528
-
* @default{size: default, type: primary}
529
-
*
530
-
*/
531
-
displaytype?: {
532
-
size?:ButtonSizes;
533
-
type?:ButtonTypes;
534
-
};
535
-
/**
536
-
* Disables onclick
537
-
*
538
-
* @defaultfalse
539
-
*/
540
-
disabled?:boolean;
541
535
}
542
536
exportconst PrimaryButton = (
543
-
props:Props&React.HTMLProps<HTMLButtonElement>
537
+
props:Props&React.HTMLProps<HTMLButtonElement>// adding my Props together with the @types/react button provided props
544
538
) => (
545
539
<Button
546
540
{...props}
@@ -554,7 +548,7 @@ Sometimes when intersecting types, we want to define our own version of an attri
554
548
555
549
```tsx
556
550
exportinterfaceProps {
557
-
label:React.ReactNode
551
+
label:React.ReactNode// this will conflict with the InputElement's label
0 commit comments