Hacker News Reader

Comment by gryzzly | Hacker News Reader

Anyone got a link on how to transition existing large webpack/React/babel project to using Typescript? Googling I only found https://medium.com/@clayallsopp/incrementally-migrating-java... but it doesn’t use ts-loader and doesn’t go into details on how to use typings. I tried following ts-loader docs, but things broke at `import flatten from 'lodash/flatten'` and adding typings for `lodash ` didn’t help. Would be interesting what strategies people use to get it working in existing project.

View on HN

ES2015/commonjs interop currently sucks with TS. This is how you only import flatten:

  import flatten = require('lodash/flatten')

TS expects any modules imported using ES2015 import to have the shape of a ES2015 module. This is an issue for many UMD/commonjs modules. In the case of lodash, it's effectively doing this:

  module.exports = flatten

And then you're importing it like so:

  import flatten from 'lodash/flatten'

and that is being transpiled to something like:

  var flatten = require('lodash/flatten').default

Note the default.

I haven't migrated to webpack 2, but some brief experiments suggest all modules get massaged in to ES2015 format.

I've been using `allowSyntheticDefaultImports` which does some magic behind the scenes for you to be able to use `import flatten from 'lodash/flatten'` making it really easy to use modules that don't define default exports.

So far (a bit unexpectedly) I didn't really run into any nasty side-effects or things that went wrong with it.

See https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in... for a (short) explanation.

Reply on news.ycombinator.com