Default property value in React component using TypeScript

Question

I can t figure out how to set default property values for my components using Typescript   This is the source code   class PageState      export class PageProps       foo  string    bar      export class PageComponent extends React Component lt PageProps  PageState gt        public render    JSX Element               return                lt span gt Hello  world lt  span gt                       And when I try to use the component like this   ReactDOM render  lt PageComponent   gt   document getElementById  page       I get an error saying property foo is missing  I want to use the default value  I ve also tried to use static defaultProps       inside the component  but it had no effect as I suspected   src typescript main tsx 8 17   error TS2324  Property  foo  is missing in type  IntrinsicAttributes  amp  IntrinsicClassAttributes lt PageComponent gt   amp  PageProps  amp    children   ReactEle        How can I use default property values  Many JS components my company uses rely on them and not using them is not a choice

User · Answer

You can use the spread operator to re-assign props with a standard functional component   The thing I like about this approach is that you can mix required props with optional ones that have a default value  interface MyProps      text  string     optionalText   string     const defaultProps        optionalText    quot foo quot      const MyComponent    props  MyProps    gt       props        defaultProps     props

User · Answer

For those having optional props that need default values  Credit here     interface Props     firstName  string    lastName   string     interface DefaultProps     lastName  string     type PropsWithDefaults   Props  amp  DefaultProps   export class User extends React Component lt Props gt      public static defaultProps  DefaultProps         lastName   None          public render          const   firstName  lastName     this props as PropsWithDefaults       return          lt div gt  firstName   lastName  lt  div gt

User · Answer

With Typescript 2 1   use Partial  lt  T   instead of making your interface properties optional   export interface Props       obj  Model      a  boolean     b  boolean    public static defaultProps  Partial lt Props gt          a  true

User · Answer

Functional Component Actually  for functional component the best practice is like below  I create a sample Spinner component  import React from  react   import   ActivityIndicator   from  react-native   import   colors   from  helpers theme   import type   FC   from  types    interface SpinnerProps     color   string    size    small     large    1   0    animating   boolean    hidesWhenStopped   boolean     const Spinner  FC lt SpinnerProps gt         color    size    animating    hidesWhenStopped       gt       lt ActivityIndicator     color  color      size  size      animating  animating      hidesWhenStopped  hidesWhenStopped      gt      Spinner defaultProps       animating  true    color  colors primary    hidesWhenStopped  true    size   small       export default Spinner

User · Answer

With Typescript 3 0 there is a new solution to this issue   export interface Props       name  string     export class Greet extends React Component lt Props gt        render             const   name     this props          return  lt div gt Hello   name toUpperCase     lt  div gt             static defaultProps     name   world          Type-checks  No type assertions needed  let el    lt Greet   gt    Note that for this to work you need a newer version of  types react than 16 4 6  It works with 16 4 11

User · Answer

Default props with class component  Using static defaultProps is correct  You should also be using interfaces  not classes  for the props and state    Update 2018 12 1  TypeScript has improved the type-checking related to defaultProps over time  Read on for latest and greatest usage down to older usages and issues   For TypeScript 3 0 and up  TypeScript specifically added support for defaultProps to make type-checking work how you d expect  Example   interface PageProps     foo  string    bar  string     export class PageComponent extends React Component lt PageProps     gt        public static defaultProps             foo   default              public render    JSX Element           return                lt span gt Hello    this props foo toUpperCase     lt  span gt                       Which can be rendered and compile without passing a foo attribute    lt PageComponent bar    hello      gt    Note that    foo is not marked optional  ie foo   string  even though it s not required as a JSX attribute  Marking as optional would mean that it could be undefined  but in fact it never will be undefined because defaultProps provides a default value  Think of it similar to how you can mark a function parameter optional  or with a default value  but not both  yet both mean the call doesn t need to specify a value  TypeScript 3 0  treats defaultProps in a similar way  which is really cool for React users  The defaultProps has no explicit type annotation  Its type is inferred and used by the compiler to determine which JSX attributes are required  You could use defaultProps  Pick lt PageProps   foo  gt  to ensure defaultProps matches a sub-set of PageProps  More on this caveat is explained here  This requires  types react version 16 4 11 to work properly    For TypeScript 2 1 until 3 0  Before TypeScript 3 0 implemented compiler support for defaultProps you could still make use of it  and it worked 100  with React at runtime  but since TypeScript only considered props when checking for JSX attributes you d have to mark props that have defaults as optional with    Example   interface PageProps       foo   string      bar  number     export class PageComponent extends React Component lt PageProps     gt        public static defaultProps  Partial lt PageProps gt              foo   default              public render    JSX Element           return                lt span gt Hello  world lt  span gt                       Note that    It s a good idea to annotate defaultProps with Partial lt  gt  so that it type-checks against your props  but you don t have to supply every required property with a default value  which makes no sense since required properties should never need a default  When using strictNullChecks the value of this props foo will be possibly undefined and require a non-null assertion  ie this props foo   or type-guard  ie if  this props foo       to remove undefined  This is annoying since the default prop value means it actually will never be undefined  but TS didn t understand this flow  That s one of the main reasons TS 3 0 added explicit support for defaultProps    Before TypeScript 2 1  This works the same but you don t have Partial types  so just omit Partial lt  gt  and either supply default values for all required props  even though those defaults will never be used  or omit the explicit type annotation completely   Default props with Functional Components  You can use defaultProps on function components as well  but you have to type your function to the FunctionComponent  StatelessComponent in  types react before version 16 7 2  interface so that TypeScript knows about defaultProps on the function   interface PageProps     foo   string    bar  number     const PageComponent  FunctionComponent lt PageProps gt     props    gt      return        lt span gt Hello   props foo    props bar  lt  span gt           PageComponent defaultProps       foo   default       Note that you don t have to use Partial lt PageProps gt  anywhere because FunctionComponent defaultProps is already specified as a partial in TS 2 1    Another nice alternative  this is what I use  is to destructure your props parameters and assign default values directly   const PageComponent  FunctionComponent lt PageProps gt      foo    default   bar     gt      return        lt span gt Hello   foo    bar  lt  span gt            Then you don t need the defaultProps at all  Be aware that if you do provide defaultProps on a function component it will take precedence over default parameter values  because React will always explicitly pass the defaultProps values  so the parameters are never undefined  thus the default parameter is never used   So you d use one or the other  not both

User · Answer

From a comment by  pamelus on the accepted answer      You either have to make all interface properties optional  bad  or   specify default value also for all required fields  unnecessary   boilerplate  or avoid specifying type on defaultProps    Actually you can use Typescript s interface inheritance  The resulting code is only a little bit more verbose   interface OptionalGoogleAdsProps       format   string      className   string      style   any      scriptSrc   string    interface GoogleAdsProps extends OptionalGoogleAdsProps       client  string      slot  string             Inspired by https   github com wonism react-google-ads blob master src google-ads js     export default class GoogleAds extends React Component lt GoogleAdsProps  void gt        public static defaultProps  OptionalGoogleAdsProps             format   auto           style    display   block             scriptSrc     pagead2 googlesyndication com pagead js adsbygoogle js

User · Answer

For the functional component  I would rather keep the props argument  so here is my solution   interface Props     foo  string    bar   number         IMPORTANT   defaultProps is of type  bar  number  rather than Partial lt Props gt   const defaultProps       bar  1        externalProps is of type Props const FooComponent   exposedProps   gt         props works like type Required lt Props gt  now    const props   Object assign defaultProps  exposedProps      return        FooComponent defaultProps   defaultProps

[reactjs] Default property value in React component using TypeScript

Examples related to reactjs

Examples related to typescript

Examples related to tsx