typescript: namespace import + specific import

Question

the problem I try to solve

import * as React from 'react'; import {Component} from 'react';

I dont like it being two lines - to be frank it is not even allowed by my linter settings.

But writing the following import * as React from 'react'; const Component = React.Component; import * as React from 'react'; const Component = React.Component; doesnt look fine to me as welll - as I willl have llines of imports and than const delarations - which are actually imports

in a non TS syntax the above lines could have been

import React, {Component} from 'react';

and this is what I am looking for, but

import * as React, {Component} from 'react'; is not a valid syntax.

The question

how can I acchieve a one liner with namespace import and partial import

Answer 1

Starting from TypeScript 2.7, you can enable esModuleInterop in your tsconfig.json to enable import React, { component } from 'react'

There is a specific meaning for import * as React from 'react' , which is getting the module namespace object of the module react . As it gets everything in the module, it is more natural to use React.component then extracting component using the import { component } from 'react' in addition.