Use `.ts` for pure TypeScript files.

Use `.tsx` for files which contain JSX.

For example, a React component would be `.tsx`, but a file containing helper functions would be `.ts`.

.tsx extension is used when we want to embed JSX elements inside the files while .ts is used for plain Typescript files and do not support adding JSX Elements.

All of the above answers are correct. 

&gt; .ts files contains only pure TypeScript

&gt; .tsx have included JSX also.

On another point of view, you can copy everything from a `.ts` file and paste on `.tsx` file, and you don&#39;t need to modify anything. But if you&#39;re copying from a `.tsx` file you need to refactor it by removing the `JSX` elements.

when you use .tsx you can use JSX in that particular file while .ts gives you error.

Python 3.8.0 is out, but I haven&#39;t been able to find any post on how to update to python 3.8 using conda - maybe they will wait for the official release? Any suggestions?



Upgrade to python 3.8 using conda

I&#39;ve recently come across this unusual (to me) Java syntax...here&#39;s an example of it:

    List list = new &lt;String, Long&gt;ArrayList();

Notice the positioning of the `&lt;String, Long&gt;` type arguments...it&#39;s not after the type as normal but before. I don&#39;t mind admitting I&#39;ve never seen this syntax before. Also note there are 2 type arguments when `ArrayList` only has 1.

Does the positioning of the type arguments have the same meaning as putting them after the type? If not, what does the different positioning mean?

Why is it legal to have 2 type arguments when `ArrayList` only has 1?

I&#39;ve searched the usual places, eg. Angelika Langer and on here but can&#39;t find any mention of this syntax anywhere apart from the grammar rules in the Java grammar file on the ANTLR project.

What do constructor type arguments mean when placed *before* the type?

I am new to react and I am working on a project. I come across both `.ts` and `.tsx` extensions. I don&#39;t understand where should I use `.ts` and `.tsx`. Any help on this is much appreciated. Thank you!

What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?

<p>I am new to react and I am working on a project. I come across both <code>.ts</code> and <code>.tsx</code> extensions. I don't understand where should I use <code>.ts</code> and <code>.tsx</code>. Any help on this is much appreciated. Thank you!</p>


What is the main difference between `useCallback`, `useMemo` and `useEffect`?

Give examples of when to use each of them.

When to use useCallback, useMemo and useEffect?

I have a button component. I simply pass it just one `onClick` prop out of many optional props I&#39;ve defined:

```typescript
const Button = (props: ButtonProps) =&gt; {
    const handleClick: React.MouseEventHandler&lt;HTMLButtonElement | HTMLAnchorElement&gt; = e =&gt; {
        props.onClick(e);
    }
    return (
        &lt;StyledButton onClick={handleClick}&gt;
            {props.children}
        &lt;/StyledButton&gt;
    );
};
```

Then I&#39;m using it like this:


```typescript
&lt;Button onClick={(e) =&gt; {
    console.log(e);
}}&gt;Click me!&lt;/Button&gt;
```

Now how can as per the error mentioned in question, object be possibly undefined? I&#39;m clearly passing the function to it and that too as per the type definition. So, I&#39;m passing an object to it. Simple enough!

```typescript
...
onClick?: React.MouseEventHandler&lt;HTMLElement&gt;
...
```

I&#39;ve added a few more strict checks in this project recently and relevant one&#39;s are:

```typescript
&quot;strictFunctionTypes&quot;: true,
&quot;strictNullChecks&quot;: true
```

`strict:true` being already present, this error never occurred.


What&#39;s the issue here?


**Update - Types added**


```typescript
export interface IBaseButtonProps {
    type?: ButtonType;
    disabled?: boolean;
    size?: ButtonSize;
    block?: boolean;
    loading?: boolean | { delay?: number };
    icon?: string;
    className?: string;
    prefixCls?: string;
    children?: React.ReactNode;
}

export type AnchorButtonProps = {
    href: string,
    target?: string,
    onClick: React.MouseEventHandler&lt;HTMLElement&gt;
} &amp; IBaseButtonProps &amp; Omit&lt;React.AnchorHTMLAttributes&lt;any&gt;, &#39;type&#39; | &#39;onClick&#39;&gt;;


export type NativeButtonProps = {
    onClick: React.MouseEventHandler&lt;HTMLElement&gt;,
    htmlType?: ButtonHTMLType
} &amp; IBaseButtonProps &amp; Omit&lt;React.ButtonHTMLAttributes&lt;any&gt;, &#39;type&#39; | &#39;onClick&#39;&gt;;

export type ButtonProps = Partial&lt;AnchorButtonProps &amp; NativeButtonProps&gt;
```

Notes:

The possible solution is to either destructure the props and add the default prop. Or use `defaultProps` from React. But not sure if I should require that really with Typescript.


Cannot invoke an object which is possibly &#39;undefined&#39;.ts(2722)

I cannot understand why the following `useImperativeHandle`, `useLayoutEffect`, and `useDebugValue` hooks are needed, can you give examples when they can be used, but not examples from the documentation please.

When to use useImperativeHandle, useLayoutEffect, and useDebugValue

I&#39;ve been learning React and I read that the function returned from `useEffect` is meant to do cleanup and React performs the cleanup when the component unmounts.

So I experimented with it a bit but found in the following example that the function was called every time the component re-renders as opposed to only the time it got unmounted from the DOM, i.e. it `console.log(&quot;unmount&quot;);` every time the component re-renders.

Why is that?
 

```
function Something({ setShow }) {
  const [array, setArray] = useState([]);
  const myRef = useRef(null);

  useEffect(() =&gt; {
    const id = setInterval(() =&gt; {
      setArray(array.concat(&quot;hello&quot;));
    }, 3000);
    myRef.current = id;
    return () =&gt; {
      console.log(&quot;unmount&quot;);
      clearInterval(myRef.current);
    };
  }, [array]);

  const unmount = () =&gt; {
    setShow(false);
  };

  return (
    &lt;div&gt;
      {array.map((item, index) =&gt; {
        return (
          &lt;p key={index}&gt;
            {Array(index + 1)
              .fill(item)
              .join(&quot;&quot;)}
          &lt;/p&gt;
        );
      })}
      &lt;button onClick={() =&gt; unmount()}&gt;close&lt;/button&gt;
    &lt;/div&gt;
  );
}

function App() {
  const [show, setShow] = useState(true);

  return show ? &lt;Something setShow={setShow} /&gt; : null;
}
```

Live example: https://codesandbox.io/s/vigilant-leavitt-z1jd2



Why is the cleanup function from `useEffect` called on every render?

With react router I have done this up update the url:

    this.props.history.push({
                pathname: `/product/${this.props.product.id}`,
            });

However this causes a re-render/navigation change. Is there a way to update the url without doing that?

My use case is I have a list of products and when I click on one I show a Modal and want to update the url to something like example.com/product/1 so that the link is sharable.

react-router: How do I update the url without causing a navigation/reload?

Trying out TypeScript for a React project and I&#39;m stuck on this error:

```
Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }&#39;.
  No index signature with a parameter of type &#39;string&#39; was found on type &#39;{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }&#39;
```
Which appears when I try to filter the array in my component
```
.filter(({ name }) =&gt; plotOptions[name]);
```

So far I looked at the article &quot;Indexing objects in TypeScript&quot; (https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi) since it had a similar error, but I tried to add the index signature to type `plotTypes` and I still get the same error.

My component code:

```
import React, { Component } from &quot;react&quot;;
import createPlotlyComponent from &quot;react-plotly.js/factory&quot;;
import Plotly from &quot;plotly.js-basic-dist&quot;;
const Plot = createPlotlyComponent(Plotly);

interface IProps {
  data: any;
}

interface IState {
  [key: string]: plotTypes;
  plotOptions: plotTypes;
}

type plotTypes = {
  [key: string]: boolean;
  train_1: boolean;
  train_2: boolean;
  train_3: boolean;
  train_4: boolean;
};

interface trainInfo {
  name: string;
  x: Array&lt;number&gt;;
  y: Array&lt;number&gt;;
  type: string;
  mode: string;
}

class FiltrationPlots extends Component&lt;IProps, IState&gt; {
  readonly state = {
    plotOptions: {
      train_1: true,
      train_2: true,
      train_3: true,
      train_4: true
    }
  };
  render() {
    const { data } = this.props;
    const { plotOptions } = this.state;

    if (data.filtrationData) {
      const plotData: Array&lt;trainInfo&gt; = [
        {
          name: &quot;train_1&quot;,
          x: data.filtrationData.map((i: any) =&gt; i[&quot;1-CumVol&quot;]),
          y: data.filtrationData.map((i: any) =&gt; i[&quot;1-PressureA&quot;]),
          type: &quot;scatter&quot;,
          mode: &quot;lines&quot;
        },
        {
          name: &quot;train_2&quot;,
          x: data.filtrationData.map((i: any) =&gt; i[&quot;2-CumVol&quot;]),
          y: data.filtrationData.map((i: any) =&gt; i[&quot;2-PressureA&quot;]),
          type: &quot;scatter&quot;,
          mode: &quot;lines&quot;
        },
        {
          name: &quot;train_3&quot;,
          x: data.filtrationData.map((i: any) =&gt; i[&quot;3-CumVol&quot;]),
          y: data.filtrationData.map((i: any) =&gt; i[&quot;3-PressureA&quot;]),
          type: &quot;scatter&quot;,
          mode: &quot;lines&quot;
        },
        {
          name: &quot;train_4&quot;,
          x: data.filtrationData.map((i: any) =&gt; i[&quot;4-CumVol&quot;]),
          y: data.filtrationData.map((i: any) =&gt; i[&quot;4-PressureA&quot;]),
          type: &quot;scatter&quot;,
          mode: &quot;lines&quot;
        }
      ].filter(({ name }) =&gt; plotOptions[name]);
      return (
        &lt;Plot
          data={plotData}
          layout={{ width: 1000, height: 1000, title: &quot;A Fancy Plot&quot; }}
        /&gt;
      );
    } else {
      return &lt;h1&gt;No Data Loaded&lt;/h1&gt;;
    }
  }
}

export default FiltrationPlots;

```

Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index

In JavaScript, it&#39;s commonly seen as best practice to use `===` instead of `==`, for obvious and well-known reasons.

In TypeScript, which is one to be preferred? Is there even one which is preferable to the other one?

IMHO, using `===` in TypeScript doesn&#39;t make sense, since comparison already only works on equal types, hence you won&#39;t have the (more or less funny) coercion game as in plain JavaScript. If you take aside compatibility to JavaScript for a minute, TypeScript could even get rid of `===`, couldn&#39;t it?

Why use triple-equal (===) in TypeScript?

I would like to store my NodeJS config in the global scope.

I tried to follow this =&gt; https://stackoverflow.com/questions/35074713/extending-typescript-global-object-in-node-js and other solution on stackoverflow, 

I made a file called global.d.ts where I have the following code 

    declare global {
        namespace NodeJS {
          interface Global {
              config: MyConfigType
          }
        }
      }

&gt; Augmentations for the global scope can only be directly nested in
&gt; external modules or ambient module declarations.ts(2669)

but doing this works fine =&gt;

    declare module NodeJS  {
        interface Global {
            config: MyConfigType
        }
    }

the problem is, I need to import the file `MyConfigType` to type the config, but the second option do not allow that.




Augmentations for the global scope can only be directly nested in external modules or ambient module declarations(2669)

I&#39;m getting the following error when I do npm run build:

&gt; The Angular Compiler requires TypeScript &gt;=3.4.0 and &lt;3.5.0 but 3.5.3
&gt; was found instead.

I&#39;ve tried following things separately:

&gt; npm install typescript@&quot;&gt;=3.4.0 &lt;3.5.0&quot;. Then deleted node_modules and package.json. Run npm install

&gt; npm update --force. 
&gt; Then deleted node_modules and package.json. Run npm install

I&#39;m still getting the error:

My package.json contains following dependencies:

      &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;8.1.0&quot;,
        &quot;@angular/cdk&quot;: &quot;^8.0.2&quot;,
        &quot;@angular/cli&quot;: &quot;^8.1.0&quot;,
        &quot;@angular/common&quot;: &quot;8.1.0&quot;,
        &quot;@angular/compiler&quot;: &quot;8.1.0&quot;,
        &quot;@angular/core&quot;: &quot;8.1.0&quot;,
        &quot;@angular/forms&quot;: &quot;8.1.0&quot;,
        &quot;@angular/http&quot;: &quot;7.2.15&quot;,
        &quot;@angular/material&quot;: &quot;^8.0.2&quot;,
        &quot;@angular/platform-browser&quot;: &quot;8.1.0&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;8.1.0&quot;,
        &quot;@angular/router&quot;: &quot;8.1.0&quot;,
        &quot;@ngx-translate/core&quot;: &quot;^11.0.1&quot;,
        &quot;@ngx-translate/http-loader&quot;: &quot;^4.0.0&quot;,
        &quot;angular-user-idle&quot;: &quot;^2.1.2&quot;,
        &quot;angular2-cookie&quot;: &quot;^1.2.6&quot;,
        &quot;core-js&quot;: &quot;^2.6.7&quot;,
        &quot;rxjs&quot;: &quot;6.5.2&quot;,
        &quot;rxjs-tslint&quot;: &quot;^0.1.5&quot;,
        &quot;stream&quot;: &quot;0.0.2&quot;,
      },
      &quot;devDependencies&quot;: {
        &quot;@angular-devkit/build-angular&quot;: &quot;^0.801.0&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;8.1.0&quot;,
        &quot;@angular/language-service&quot;: &quot;8.1.0&quot;,
        &quot;@types/jasmine&quot;: &quot;~3.3.13&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.6&quot;,
        &quot;@types/node&quot;: &quot;~12.6.1&quot;,
        &quot;jasmine-core&quot;: &quot;~3.4.0&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
        &quot;protractor&quot;: &quot;~5.4.2&quot;,
        &quot;ts-node&quot;: &quot;~8.3.0&quot;,
        &quot;tslint&quot;: &quot;~5.18.0&quot;,
        &quot;typescript&quot;: &quot;^3.4.5&quot;
      }

ng --version gives following output:

    Angular CLI: 8.1.2
    Node: 10.16.0
    OS: win32 x64
    Angular: 8.1.0
    ... animations, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    
    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.801.2
    @angular-devkit/build-angular     0.801.2
    @angular-devkit/build-optimizer   0.801.2
    @angular-devkit/build-webpack     0.801.2
    @angular-devkit/core              8.1.2
    @angular-devkit/schematics        8.1.2
    @angular/cdk                      8.1.1
    @angular/cli                      8.1.2
    @angular/http                     7.2.15
    @angular/material                 8.1.1
    @ngtools/webpack                  8.1.2
    @schematics/angular               8.1.2
    @schematics/update                0.801.2
    rxjs                              6.5.2
    typescript                        3.5.3
    webpack                           4.35.2

What could be going wrong here?

Content Type	Original Author	Original Content on Stackoverflow
Question	Hafsa Mushtaq	View Question on Stackoverflow
Solution 1 - Reactjs	liamgbs	View Answer on Stackoverflow
Solution 2 - Reactjs	Sachin	View Answer on Stackoverflow
Solution 3 - Reactjs	Manoj Perumarath	View Answer on Stackoverflow
Solution 4 - Reactjs	Rahul	View Answer on Stackoverflow

What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

Solution 4 - Reactjs

What do constructor type arguments mean when placed before the type?

Upgrade to python 3.8 using conda

Attributions