diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 04b2b32a5c7..0c29c97d7ca 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -108,8 +108,13 @@ module.exports = function(api, opts, env) { // Strip flow types before any other transform, emulating the behavior // order as-if the browser supported all of the succeeding features // https://github.com/facebook/create-react-app/pull/5182 - isFlowEnabled && + // We will conditionally enable this plugin below in overrides as it clashes with + // @babel/plugin-proposal-decorators when using TypeScript. + // https://github.com/facebook/create-react-app/issues/5741 + isFlowEnabled && [ require('@babel/plugin-transform-flow-strip-types').default, + false, + ], // Experimental macros support. Will be documented after it's had some time // in the wild. require('babel-plugin-macros'), @@ -172,6 +177,10 @@ module.exports = function(api, opts, env) { require('babel-plugin-dynamic-import-node'), ].filter(Boolean), overrides: [ + isFlowEnabled && { + exclude: /\.tsx?$/, + plugins: [require('@babel/plugin-transform-flow-strip-types').default], + }, isTypeScriptEnabled && { test: /\.tsx?$/, plugins: [ diff --git a/test/fixtures/typescript/src/App.test.ts b/test/fixtures/typescript/src/App.test.ts index cef45f281d3..fb0a9509592 100644 --- a/test/fixtures/typescript/src/App.test.ts +++ b/test/fixtures/typescript/src/App.test.ts @@ -6,3 +6,9 @@ it('reads a typescript file with no syntax error', () => { expect(App.foo.baz!.n).toBe(123); expect(app.n).toBe(123); }); + +it('supports decorators', () => { + const app = new App(); + expect((app as any).annotated).toBe(true); + expect(app.decorated).toBe(42); +}); diff --git a/test/fixtures/typescript/src/App.ts b/test/fixtures/typescript/src/App.ts index f3c31414c74..da5cc719a36 100644 --- a/test/fixtures/typescript/src/App.ts +++ b/test/fixtures/typescript/src/App.ts @@ -10,10 +10,23 @@ type MyObject = Pick; class App { static foo: MyObject = { bar: true, baz: { n: 123 } }; n = App.foo.baz!.n; + @propertyDecorator + decorated; } function annotation(target: any) { target.annotated = true; } +function propertyDecorator(target: any, key: string) { + if (delete target[key]) { + Object.defineProperty(target, key, { + get() { + return 42; + }, + enumerable: true, + }); + } +} + export default App;