Support type only imports in TypeScript 3.8

[kevinbarabash]

TypeScript 3.8 release notes: https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/

[aminya]

Yes, this would be very nice. Currently, import type is replaced with import.

[Pike]

Would this effectively undo #117?

[kevinbarabash]

@Pike in this case it appears that would work. That's not always the case though since some of the AST nodes are different between Flow and TS trees. In this case they're the same. We'd probably want to add tests to verify that import type is being passed through as expected.

[kevinbarabash]

I dropped the "Add option to" from the title. I don't think this needs to be configurable since separating type imports from non-type imports seems like a good practice. Please let me know if there are good reasons to not always do this.

[aminya]

I totally agree! import type makes the code clearer. TypeScript also doesn't need to check to realize if the imported thing is being used as a type or a value, so theoretically it improves the build speed as well.

[kevinbarabash]

This is the v0.2.2 release.

[aminya]

I tried the new package on atom-ide-base, but I get the following errors:

❯ flow-to-ts --write --delete-source --prettier .\nuclide\nuclide-commons\**\*.js

error processing ./nuclide/nuclide-commons/__tests__/nice-test.js
SyntaxError: ',' expected. (13:31)
  11 |  * @emails oncall+nuclide
  12 |  */
> 13 | import typeof { niceSafeSpawn as niceSafeSpawnType } from "../nice";
     |                               ^
  14 | import { uncachedRequire } from "../test-helpers";
  15 | import { Observable } from "rxjs-compat/bundles/rxjs-compat.umd.min.js";
  16 | describe('nice', () => {
    at t (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\parser-typescript.js:1:285)
    at Object.parse (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\parser-typescript.js:14:180461)
    at Object.parse (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:12055:21)
    at coreFormat (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15572:25)
    at format (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15832:75)
    at formatWithCursor (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15848:14)
    at C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:31794:17
    at Object.format (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:31802:14)
    at convert (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\src\convert.js:73:21)
    at cli (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\src\cli.js:99:23) {
  loc: { start: { line: 13, column: 31 } },
  codeFrame: '  11 |  * @emails oncall+nuclide\n' +
    '  12 |  */\n' +
    '> 13 | import typeof { niceSafeSpawn as niceSafeSpawnType } from "../nice";\n' +
    '     |                               ^\n' +
    '  14 | import { uncachedRequire } from "../test-helpers";\n' +
    '  15 | import { Observable } from "rxjs-compat/bundles/rxjs-compat.umd.min.js";\n' +
    "  16 | describe('nice', () => {"
}
error processing ./nuclide/nuclide-commons/__tests__/observable-test.js
SyntaxError: '=' expected. (13:13)
  11 |  * @emails oncall+nuclide
  12 |  */
> 13 | import type { AbortSignal } from "../AbortController";
     |             ^
  14 | import { bufferUntil, cacheWhileSubscribed, completingSwitchMap, mergeUntilAnyComplete, concatLatest, diffSets, fastDebounce, fromAbortablePromise, macrotask, microtask, nextAnimationFrame, poll, reconcileSetDiffs, SingletonExecutor, splitStream, takeUntilAbort, takeWhileInclusive, toAbortablePromise, toggle } from "../observable";
  15 | import nullthrows from "nullthrows";
  16 | import AbortController from "../AbortController";
    at t (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\parser-typescript.js:1:285)
    at Object.parse (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\parser-typescript.js:14:180461)
    at Object.parse (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:12055:21)
    at coreFormat (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15572:25)
    at format (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15832:75)
    at formatWithCursor (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15848:14)
    at C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:31794:17
    at Object.format (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:31802:14)
    at convert (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\src\convert.js:73:21)
    at cli (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\src\cli.js:99:23) {
  loc: { start: { line: 13, column: 13 } },
  codeFrame: '  11 |  * @emails oncall+nuclide\n' +
    '  12 |  */\n' +
    '> 13 | import type { AbortSignal } from "../AbortController";\n' +
    '     |             ^\n' +
    '  14 | import { bufferUntil, cacheWhileSubscribed, completingSwitchMap, mergeUntilAnyComplete, concatLatest, diffSets, fastDebounce, fromAbortablePromise, macrotask, microtask, nextAnimationFrame, poll, reconcileSetDiffs, SingletonExecutor, splitStream, takeUntilAbort, takeWhileInclusive, toAbortablePromise, toggle } from "../observable";\n' +
    '  15 | import nullthrows from "nullthrows";\n' +
    '  16 | import AbortController from "../AbortController";'
}
error processing ./nuclide/nuclide-commons/__tests__/test-helpers-test.js
SyntaxError: Expression expected. (13:15)
  11 |  * @emails oncall+nuclide
  12 |  */
> 13 | import typeof * as TestModuleType from "../__mocks__/fixtures/toBeTested";
     |               ^
  14 | import fs from "fs";
  15 | import glob from "glob";
  16 | import nuclideUri from "../nuclideUri";
    at t (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\parser-typescript.js:1:285)
    at Object.parse (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\parser-typescript.js:14:180461)
    at Object.parse (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:12055:21)
    at coreFormat (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15572:25)
    at format (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15832:75)
    at formatWithCursor (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:15848:14)
    at C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:31794:17
    at Object.format (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\prettier@1.19.1\node_modules\prettier\standalone.js:31802:14)
    at convert (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\src\convert.js:73:21)
    at cli (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\src\cli.js:99:23) {
  loc: { start: { line: 13, column: 15 } },
  codeFrame: '  11 |  * @emails oncall+nuclide\n' +
    '  12 |  */\n' +
    '> 13 | import typeof * as TestModuleType from "../__mocks__/fixtures/toBeTested";\n' +
    '     |               ^\n' +
    '  14 | import fs from "fs";\n' +
    '  15 | import glob from "glob";\n' +
    '  16 | import nuclideUri from "../nuclideUri";'
}

[aminya]

Without using --prettier the errors are less:

❯ flow-to-ts --write --delete-source .\nuclide\nuclide-commons\**\*.js
downgrading * to any
    at convert (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-
ts\src\convert.js:49:61)
    at cli (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacademy\flow-to-ts\s
rc\cli.js:99:23)
    at Object.<anonymous> (C:\Users\aminy\AppData\Roaming\npm\pnpm-global\4\node_modules\.pnpm\@khanacademy\flow-to-ts@0.2.2\node_modules\@khanacade
my\flow-to-ts\src\flow-to-ts.js:4:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
downgrading * to any
downgrading exact object type
downgrading exact object type

[kevinbarabash]

@aminya thanks for the report. I'll look into these issues next week. There were some issues with prettier already so I'm going to look at having all the tests run with prettier enabled. That should help detect issues before I publish. For the error that still remains after disabling prettier, could you narrow down what syntax is causing that issue?

[kevinbarabash]

I think the issue with typeof in the output code is that typeof imports aren't a thing in TypeScript. I can change those to be regular imports for now. #223 will do a better job of handling them in the future.

[aminya]

The issue with prettier is that flow-to-ts is still using Prettier 1 which doesn't support many of the new syntaxes.

[kevinbarabash]

I've published v0.3.0 with the prettier upgrade.