Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

[Basic] Improve the class component defaultProps example#103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Conversation

@VanTanev
Copy link
Contributor

@VanTanevVanTanev commentedApr 6, 2019
edited
Loading

What cheatsheet is this about? (if applicable)

Basic cheatsheet

--

In the current example, we have a type definition forProps but do not make use of it fordefaultProps. This can lead to a mismatch between the actual fields indefaultProps and what theProps type defines.

Adding an explicitPartial<Props> type todefaultProps seems like good example code.

In the current example, we have a type definition for props but do notmake use of it for defaultProps. This can lead to a mismatch betweendefaultProps and props.
@VanTanevVanTanev changed the titleImprove the class component defaultProps example[Basic] Improve the class component defaultProps exampleApr 6, 2019
@swyxio
Copy link
Collaborator

good eye! thanks very much!

@swyxioswyxio merged commit623a1d0 intotypescript-cheatsheets:masterApr 8, 2019
@VanTanev
Copy link
ContributorAuthor

VanTanev commentedApr 8, 2019
edited
Loading

@sw-yx Actually, I just checked, and the caveat that is stated under "Typescript 2.9 and earlier" still applies -defaultPropsshould not be typed asPartial<Props>, because that causes all component props to be considered optional in JSX (tested withtypescript: 3.4.1 and@types/react: 16.8.12).

Another approach would be to use:

staticdefaultProps:Pick<Props,'name'>={name:'world'}`

What do you think?

@ferdaber
Copy link
Collaborator

A good way of working withdefaultProps is to actually reverse the props definition so that it uses thedefaultProps type and adds additional types:

typeProps=typeofMyComponent.defaultProps&{age:number}classMyComponentextendsComponent<Props>{staticdefaultProps={name:'world'}}

@swyxio
Copy link
Collaborator

o shit lets do that instead! much nicer.

swyxio added a commit that referenced this pull requestApr 9, 2019
@VanTanev
Copy link
ContributorAuthor

VanTanev commentedApr 9, 2019
edited
Loading

I ran into a case where thetypeof MyComponent.defaultProps pattern did not provide good ergonomics:

// in a separate fileinterfaceModelValues={title:stringdescription?:string}// in a custom formik formtypeProps={onSubmit:(values:ModelValues,actions:FormikActions<ModelValues>)=>voidinitialValues:ModelValues}classModelFormextendsReact.Component<Props>{staticdefaultProps:Pick<Props,'initialValues'>={initialValues:{title:''description:''}}render(){ ...}}

The reason I want to have a type definition directly onstatic defaultProps is that it protects me from omitting some value from the defaults, especially when dealing with more complicated props. Also, when there are type errors, they will directly show up in this file, instead of in the call sites.

@RiaanWest
Copy link

This has been merged, so not sure if y'all will see this, but:

This seems to now be possible if you make use of an interface for props:

export type IconSize = 'small' | 'regular' | 'medium' | 'large';interface IconPropsInterface {  icon: string;  size?: IconSize;}export class Icon extends Component<IconPropsInterface> {  static defaultProps: IconPropsInterface = {    icon: '',    size: 'regularrr',   <-- Throws: Type '"regularrr"' is not assignable to type '"small" | "regular" | "medium" | "large" | undefined'.ts(2322)  }}

@swyxio
Copy link
Collaborator

i see you@RiaanWest. wanna PR something?

@ferdaber
Copy link
Collaborator

This will breakLibraryManagedAttributes inference for that component. It will cause all of its props to be optional when creating JSX elements of that component.

exporttypeIconSize='small'|'regular'|'medium'|'large';interfaceIconPropsInterface{icon:string;size?:IconSize;}exportclassIconextendsComponent<IconPropsInterface>{staticdefaultProps:IconPropsInterface={icon:'',size:'regularrr',<--Throws:Type'"regularrr"'isnotassignabletotype'"small" | "regular" | "medium" | "large" | undefined'.ts(2322)}}constmyIcon=<Icon/>// this will not throw an error even though `icon` is required,

@RiaanWest
Copy link

Thanks for pointing this out@ferdaber - great point. I wasn't aware of that!

bernssolg added a commit to bernssolg/My-React-Sample that referenced this pull requestFeb 28, 2022
erinodev added a commit to erinodev/My-React-project that referenced this pull requestFeb 28, 2022
petardev101 added a commit to petardev101/react that referenced this pull requestJun 4, 2022
supercrytoking added a commit to supercrytoking/react that referenced this pull requestJul 14, 2022
kevindavies8 added a commit to kevindavies8/react-full-stack-developer that referenced this pull requestAug 24, 2022
johnfrench3 pushed a commit to johnfrench3/react-Fronted-developer that referenced this pull requestSep 7, 2022
ericbrown2716 added a commit to ericbrown2716/react-stack-build-website that referenced this pull requestSep 29, 2022
peterjohnson4987 added a commit to peterjohnson4987/full-stack-developer-react that referenced this pull requestOct 3, 2022
renawolford6 pushed a commit to renawolford6/react-husky-website that referenced this pull requestOct 6, 2022
Yoshidayoshi23 added a commit to Yoshidayoshi23/react that referenced this pull requestOct 20, 2022
renawolford6 added a commit to renawolford6/react-dev-build-doc- that referenced this pull requestNov 10, 2022
coopfeathy added a commit to coopfeathy/cheatsheet that referenced this pull requestDec 4, 2022
dreamcoder75 added a commit to dreamcoder75/react-sample that referenced this pull requestJan 15, 2023
holyblock pushed a commit to holyblock/chart that referenced this pull requestFeb 27, 2023
AIDevMonster added a commit to AIDevMonster/Awesome-React that referenced this pull requestJun 21, 2023
whiteghostDev added a commit to whiteghostDev/Awesome-React that referenced this pull requestAug 6, 2023
cedev935 added a commit to cedev935/React-TypeScript that referenced this pull requestSep 11, 2023
aleksandaralek added a commit to aleksandaralek/typescript-react-cheatsheet that referenced this pull requestOct 24, 2023
xbucks pushed a commit to xbucks/react-cheatsheets that referenced this pull requestOct 24, 2023
joyfulmagician added a commit to joyfulmagician/react that referenced this pull requestOct 25, 2023
green52199 pushed a commit to green52199/React-Typescript that referenced this pull requestOct 26, 2023
TOP-10-DEV added a commit to TOP-10-DEV/typescript-cheatsheets-react that referenced this pull requestDec 8, 2023
secretsuperstar1109 added a commit to secretsuperstar1109/react-typescript-cheatsheets that referenced this pull requestDec 9, 2023
champion119 added a commit to champion119/react that referenced this pull requestJan 5, 2024
dragon360-dev added a commit to dragon360-dev/react that referenced this pull requestMar 13, 2024
EugeneYoona added a commit to EugeneYoona/React_full_src that referenced this pull requestApr 10, 2024
fairskyDev0201 added a commit to fairskyDev0201/typescript-cheatsheet that referenced this pull requestApr 17, 2024
solutionGuru0129 added a commit to solutionGuru0129/react that referenced this pull requestMay 27, 2024
alisenola added a commit to alisenola/react-cheatsheets that referenced this pull requestMay 29, 2024
marceloaguilera94 pushed a commit to marceloaguilera94/react that referenced this pull requestJun 5, 2024
Linda423 added a commit to Linda423/React that referenced this pull requestJul 31, 2024
genie4viz pushed a commit to genie4viz/react that referenced this pull requestSep 2, 2024
dreamsoft07 added a commit to dreamsoft07/React-TypeScript that referenced this pull requestOct 15, 2024
chivalrousdev added a commit to chivalrousdev/React that referenced this pull requestNov 14, 2024
super-dev03 pushed a commit to super-dev03/react-test that referenced this pull requestDec 25, 2024
Mani2044 added a commit to Mani2044/react that referenced this pull requestFeb 6, 2025
sunstrike-spec added a commit to sunstrike-spec/react that referenced this pull requestFeb 23, 2025
darkhorse00512 added a commit to darkhorse00512/React that referenced this pull requestFeb 28, 2025
Misha0421 added a commit to Misha0421/React-Project that referenced this pull requestMar 4, 2025
luckyman0026 added a commit to luckyman0026/react that referenced this pull requestMar 5, 2025
buddy0323 added a commit to buddy0323/react that referenced this pull requestMar 11, 2025
ronanmurphy26 added a commit to ronanmurphy26/react that referenced this pull requestMar 13, 2025
reo0603 added a commit to reo0603/TypeScript-Cheatsheet that referenced this pull requestApr 10, 2025
fast-codi-expert added a commit to fast-codi-expert/Creating-Sheet that referenced this pull requestMay 18, 2025
tanaka0722-dev added a commit to tanaka0722-dev/react that referenced this pull requestOct 14, 2025
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@VanTanev@swyxio@ferdaber@RiaanWest

[8]ページ先頭

©2009-2025 Movatter.jp