4 ms·

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/inc

by gryzzly 10y ago

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-javascript-to-typescript-565020e49c88 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.

barake 10y ago
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.
- wagi_ch 10y ago
  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-TypeScript#support-for-default-import-interop-with-systemjs https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in... for a (short) explanation.

by gryzzly 10y ago

barake 10y ago

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.

wagi_ch 10y ago
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-TypeScript#support-for-default-import-interop-with-systemjs https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in... for a (short) explanation.