diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index e7fc0c8c409..04b2b32a5c7 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -117,6 +117,11 @@ module.exports = function(api, opts, env) { // in practice some other transforms (such as object-rest-spread) // don't work without it: https://github.com/babel/babel/issues/7215 require('@babel/plugin-transform-destructuring').default, + // Turn on legacy decorators for TypeScript files + isTypeScriptEnabled && [ + require('@babel/plugin-proposal-decorators').default, + false, + ], // class { handleClick = () => { } } // Enable loose mode to use assignment instead of defineProperty // See discussion in https://github.com/facebook/create-react-app/issues/4263 @@ -166,5 +171,16 @@ module.exports = function(api, opts, env) { // Transform dynamic import to require require('babel-plugin-dynamic-import-node'), ].filter(Boolean), + overrides: [ + isTypeScriptEnabled && { + test: /\.tsx?$/, + plugins: [ + [ + require('@babel/plugin-proposal-decorators').default, + { legacy: true }, + ], + ], + }, + ].filter(Boolean), }; }; diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 03e5c8ae680..0c0368a375c 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -19,6 +19,7 @@ "dependencies": { "@babel/core": "7.1.0", "@babel/plugin-proposal-class-properties": "7.1.0", + "@babel/plugin-proposal-decorators": "7.1.2", "@babel/plugin-proposal-object-rest-spread": "7.0.0", "@babel/plugin-syntax-dynamic-import": "7.0.0", "@babel/plugin-transform-classes": "7.1.0", diff --git a/test/fixtures/typescript/src/App.ts b/test/fixtures/typescript/src/App.ts index 92dc792a3ea..f3c31414c74 100644 --- a/test/fixtures/typescript/src/App.ts +++ b/test/fixtures/typescript/src/App.ts @@ -6,9 +6,14 @@ interface MyType { type MyObject = Pick; +@annotation class App { static foo: MyObject = { bar: true, baz: { n: 123 } }; n = App.foo.baz!.n; } +function annotation(target: any) { + target.annotated = true; +} + export default App; diff --git a/test/fixtures/typescript/tsconfig.json b/test/fixtures/typescript/tsconfig.json new file mode 100644 index 00000000000..504cd646e14 --- /dev/null +++ b/test/fixtures/typescript/tsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "experimentalDecorators": true + } +}