Speed up TypeScript projects (#5903)

As a lot of [people](https://hackernoon.com/why-i-no-longer-use-typescript-with-react-and-why-you-shouldnt-either-e744d27452b4) is complaining about TypeScript performance in CRA, I decided to enable `async` mode in TypeScript checker.

These changes basically brings the JS compilation times to TS projects. So, recompilation took less than 1 second instead of 3 seconds in medium size project.

The problem with async mode is that type-errors are reported after Webpack ends up recompilation as TypeScript could be slower than Babel. PR allows to emit files compiled by Babel immediately and then wait for TS and show type errors in terminal later. Also, if there was no compilation errors and any type error occurs, we trigger a hot-reload with new errors to show error overlay in browser.

Also, I wanted to start a discussion about `skipLibCheck: false` option in default `tsconfig.json`. This makes recompilations really slow and we should consider to set it to `true` or at least give users a big warning to let them know that it could be really slow.

The following video is showing the updated workflow with a forced 2.5 second delay for type-check to give you an idea how it works.

![nov-26-2018 15-47-01](https://user-images.githubusercontent.com/5549148/49021284-9446fe80-f192-11e8-952b-8f83d77d5fbc.gif)


I'm pretty sure that PR needs some polishing and improvements but it should works as it is. Especially a "hack" with reloading the browser after type-check looks ugly to me.

cc @brunolemos as he is an initiator of an original TypeScript PR.

Should fix https://github.com/facebook/create-react-app/issues/5820
This commit is contained in:
Tomáš Szabo
2019-02-08 04:34:52 +01:00
committed by Ian Schmitz
parent 1deb811c5d
commit 5ce09db2b3
11 changed files with 193 additions and 43 deletions

View File

View File

@@ -0,0 +1,33 @@
const testSetup = require('../__shared__/test-setup');
const puppeteer = require('puppeteer');
const expectedErrorMsg = `Argument of type '123' is not assignable to parameter of type 'string'`;
test('shows error overlay in browser', async () => {
const { port, done } = await testSetup.scripts.start();
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('iframe', { timeout: 5000 });
const overlayMsg = await page.evaluate(() => {
const overlay = document.querySelector('iframe').contentWindow;
return overlay.document.body.innerHTML;
});
expect(overlayMsg).toContain(expectedErrorMsg);
} finally {
browser.close();
done();
}
});
test('shows error in console (dev mode)', async () => {
const { stderr } = await testSetup.scripts.start({ smoke: true });
expect(stderr).toContain(expectedErrorMsg);
});
test('shows error in console (prod mode)', async () => {
const { stderr } = await testSetup.scripts.build();
expect(stderr).toContain(expectedErrorMsg);
});

View File

@@ -0,0 +1,9 @@
{
"dependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "*",
"react-dom": "*",
"typescript": "3.1.3"
}
}

View File

@@ -0,0 +1,13 @@
import * as React from 'react';
class App extends React.Component {
render() {
return <div>{format(123)}</div>;
}
}
function format(value: string) {
return value;
}
export default App;

View File

@@ -0,0 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));