Add support for decorators

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),
   };
 };

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",

test/fixtures/typescript/src/App.ts

@@ -6,9 +6,14 @@ interface MyType {
 
 type MyObject = Pick<MyType, 'bar' | 'baz'>;
 
+@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;

test/fixtures/typescript/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}