How to transform react import

[vincentbel]

In JavaScript, we often use default import & named import:

import React, { Component } from 'react';

But TypeScript prefer to use namespace import:

import * as React from 'react';

First, we should replace the import with namespace import, then we should replace Component with React.Component. but we should also do this for all other possible named import:

React.Children
React.Component
React.PureComponent
React.Fragment
React.createElement
React.cloneElement
React.createFactory
React.isValidElement

Any idea to do this transform? @mohsen1

[mohsen1]

This is somehow relates to #26

If source is using React.* to access React namespace, moving from default import to namespace import should not cause an issue since React's default export (React) includes all of "react" module exports.

Issue is when you replace named imports such as import { Component } from 'react' with namespace import.

My suggestion is to have two import statements in that case:

import React, { Component, PropTypes } from 'react'

becomes

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

Another option is to not migrate files to namespace import. After all TypeScript agreed to use __esModule hack for making default imports act like namespace imports.

I lean towards the first solution. Mostly because people who use this tool might not have allowSyntheticDefaultImports enabled in their tsconfigs

[dschaller]

Thank you for you contribution to this repository.

Closing this contribution as this repository is being archived.