Skip to content

Commit d2bc732

Browse files
Update README.md
1 parent fcdfec4 commit d2bc732

File tree

1 file changed

+15
-22
lines changed

1 file changed

+15
-22
lines changed

README.md

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,19 @@ Please contribute on this topic! [File an issue](https://github.com/sw-yx/react-
386386
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
387387
</details>
388388

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+
389402
# Troubleshooting Handbook: Types
390403

391404
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:
518531

519532
```tsx
520533
export interface Props {
521-
/** this dictates what the button will say */
522534
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-
* @default false
539-
*/
540-
disabled?: boolean;
541535
}
542536
export const PrimaryButton = (
543-
props: Props & React.HTMLProps<HTMLButtonElement>
537+
props: Props & React.HTMLProps<HTMLButtonElement> // adding my Props together with the @types/react button provided props
544538
) => (
545539
<Button
546540
{...props}
@@ -554,7 +548,7 @@ Sometimes when intersecting types, we want to define our own version of an attri
554548

555549
```tsx
556550
export interface Props {
557-
label: React.ReactNode
551+
label: React.ReactNode // this will conflict with the InputElement's label
558552
}
559553

560554
// here is the magic - omitting an attribute
@@ -573,7 +567,6 @@ export const Checkbox = (
573567
<label className='Checkbox-label'>
574568
<input
575569
type="checkbox"
576-
checked={!!checkedclass}
577570
{...props}
578571
/>
579572
</label>

0 commit comments

Comments
 (0)