title: Typescript and react conditional render
body: <p>I am new to typescript and not an expert in FE development. I've encountered issue that seems pretty basic, but I failed to found any solution. Maybe I just don't know how to google it properly.
  In react component I have a button, that is disabled on some condition, which triggers a component's function: </p>
  
  <pre><code>import React, {Component} from 'react';
  
  type DraftCompany = {
      id: null
      name: string,
  };
  
  type Company = Omit&lt;DraftCompany, 'id'&gt; &amp; {
      id: number;
  };
  
  type Props = {
      company: Company | DraftCompany,
      onDeleteCompany: (companyId: number) =&gt; void,
  }
  
  class CompanyRow extends Component &lt;Props&gt; {
      handleDeleteCompany = () =&gt; {
          this.props.onDeleteCompany(this.props.company.id);
      };
  
      render = () =&gt; {
          return (
              &lt;div&gt;
                  &lt;div&gt;{this.props.company.name}&lt;/div&gt;
                  &lt;div&gt;
                      &lt;button disabled={this.props.company.id === null} onClick={this.handleDeleteCompany}/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default CompanyRow;
  </code></pre>
  
  <p>I am getting typescript error on calling <code>this.props.onDeleteCompany(this.props.company.id);</code> that says that there is a chance I will pass <code>null</code> as a parameter. I fully understand why typescript gives me this error, the question is: <strong>what would be the best way to deal with this error?</strong> </p>
  
  <p>I have found 3 ways:</p>
  
  <p>1) Add 'if' guard</p>
  
  <pre><code>handleDeleteCompany = () =&gt; {
          if (this.props.company.id) {
              this.props.onDeleteCompany(this.props.company.id);
          }
      };
  </code></pre>
  
  <p>It works, but I don't like the idea of adding such guards into every function, if someone removes <code>disabled</code> logic, I want to receive console error telling me about it immediately, not to have it be silently swallowed. In my project I have a lot of such code that relies on render, I doubt it is a best practice to add such checks everywhere. Maybe I am wrong. </p>
  
  <p>2) Apply <code>as</code> to field operator:</p>
  
  <pre><code> handleDeleteCompany = () =&gt; {
          this.props.onDeleteCompany(this.props.company.id as number);
      };
  </code></pre>
  
  <p>It works, but looks kinda hacky. </p>
  
  <p>3) Apply <code>as</code> operator to whole object and pass it to function:</p>
  
  <pre><code> &lt;button disabled={this.props.company.id === null} 
           onClick={() =&gt; this.handleDeleteCompany(this.props.company as Company)}/&gt;
  </code></pre>
  
  <pre><code> handleDeleteCompany = (company: Company) =&gt; {
          this.props.onDeleteCompany(company.id as number);
      };
  </code></pre>
  
  <p>It works, but it looks like I am unnecessary passing the value I could have grabbed in function itself from props. I am not sure it is best practice to do such things.</p>
  
  <p>I am sure there should be some pure typescript solution like defining Props type as a union or using conditional types with some combination of <code>any</code> and <code>never</code>. But I haven't figured it out .</p>
  
  <p>Here is a playground: 
  <a href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDeBhCcCAOyWJgF84AzKQuAcilQwYG4BYAKG5gE8wSOABEoKajALgUxPnAC8ubnBVxgAEwBccYgFcANvuWriKEEm0BnGFGDEA5pm4VOPLv0FwpYGXMUB5EGAYAB5RcUlCH1lsBg0GAD44ADIlLlU1LR1dEAAjJChXF25eASEABTowSwU0jLQo321vXzgAHxExCRaY4xUSYSR9JBgkHr5tAAoG6VkASSy9PIKASgUkgDcIDScuChKuNH0USxrxhAgAdzgkAA9R4nUzqJIyeBDKiGqknD64AAsZOphoNhqNxrVJmt5D8-hkYP9gJYAHRgKoogZDEZjRqySYIpGo9HImbRPjIjQrVwZYpuDLMR4FSHQ2HpDKqZgwXRQYhwSZw9kqELqYAbBICwUZYWihI4AkotFfFGk3zI0zmCghAD0IrFEslQt14rZBtNcBCuV0MBgJDgIssKFyw3U8jliIVxJVsgp6gU8kUekMVBIeH0wDQAGtXfLkYDHiCseDcXwKFrjWbBdqjfqpTqZfqVn99nsDndILA7UhqCgDPBzlc2EA" rel="nofollow noreferrer">playground</a></p>