Support React + TypeScript

[jasonjoh]

Proposal: Make components React + TS compatible

Description

Currently you cannot use the various components in React with Typescript. For example, this code (modified from the default create-react-app testproject --typescript output):

import React, { Component } from 'react';
import { MgtLogin } from 'microsoft-graph-toolkit';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <MgtLogin/>
      </div>
    );
  }
}

export default App;

Gives the error:

TypeScript error: JSX element type 'MgtLogin' is not a constructor function for JSX elements.
  Type 'MgtLogin' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.  TS2605

You cannot add it as the custom <mgt-login> element, that gives the error:

Property 'mgt-login' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

Rationale

You're using Fabric already, which is a "React-first" library, and the source for these components is TypeScript, it seems reasonable to expect this to work.

[nmetulev]

I just ran into this issue myself. This is a known issue with custom elements and TSX. The workaround that seems to work right now is to define the custom element globally in your code:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "mgt-login": any;
    }
  }
}

You can then use it in TSX as <mgt-login></mgt-login>. We should investigate if we can include this declaration as part of the toolkit type definition files

[nmetulev]

Added docs here to document it. @jasonjoh, have you had any luck with this?

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[jasonjoh]

Hey sorry @nmetulev I've been neglecting my GitHub mentions :). I decided to just stay in ES6 land and not do TypeScript, so I haven't revisited this.

[siljemda]

Any progress on this?

[nmetulev]

Yes, we created a new package specific for react that's in preview: https://www.npmjs.com/package/@microsoft/mgt-react

[nmetulev]

Closing issue as this is addressed by the new package