Возможно ли использовать JSX компоненты в TypeScript (TSX)?

303

06 ноября 2017, 23:53

Для различных библиотек JavaScript предумотрены Types Definitions что бы эти библиотеки можно было использовать в TypeScript. А если я хочу использовать пакет к которому нету Types (*.d.ts) файлов? Могу ли я это сделать? Пока пробуя использовать такую библиотеку страница выдаёт:

ERROR in [at-loader] ./ClientApp/components/Test.tsx:5:36 TS7016: Could not find a declaration file for module 'react-router-role-authorization'. '.../node_modules/react-router-role-authorization/dist/index.js' implicitly has an 'any' type. Try npm install @types/react-router-role-authorization if it exists or add a new declaration (.d.ts) file containing declare module 'react-router-role-authorization'; ERROR in [at-loader] ./ClientApp/routes.tsx:62:12

Итого: Возможно ли использовать библиотеки без d.ts, и если да, то как? Если вообще стоит ли это делать, если это возможно?

Работаю на VisualStudio 2017. В tsconfig.json стоит "allowJs": true и "jsx": "react".

Добавлено: После ответа @Daniel Khoroshko эта ошибка исчезла, теперь есть другая

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
const { RoleAwareComponent } = require('react-router-role-authorization');
export class Test extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return <div><Test2 /></div>;
    }
}
export class Test2 extends RoleAwareComponent  {
    allowedRoles: string[];
    userRoles: string[];
    constructor() {
        super();
        this.allowedRoles = ['user'];
        this.userRoles = ['user','super-user'];
    }
    public render() {
        return <div style={{ backgroundColor: "red" }}>
            Test!
        </div>;
    }
}

Выдаёт ошибку:

ERROR in [at-loader] ./ClientApp/components/Test.tsx:11:21 TS2605: JSX element type 'Test2' is not a constructor function for JSX elements. Property 'setState' is missing in type 'Test2'.

Answer 1

Проблема в том, что вы видимо импортируете компонент используя import from или import =´.

А с библиотеками без типов надо так:

const { AuthorizedComponent } = require('react-router-role-authorization');
class Test extends AuthorizedComponent {
  render() {
    return null;
  }
}

webpack: Compiled successfully.