TypeScript&ReactでES7のシンタックスを使いたい

TypeScript&Reactで新し目のECMAScriptを使いたいのですが、なかなかうまくいきません。
具体的には、bind operatorや、pipeline operatorを使ってみたいです。

いろいろ調べているとbabelを使えばできるっぽいというのを見つけたので入れみました。
【参考】: https://babeljs.io/blog/2015/05/14/function-bind

babelは新しい書き方のjsをブラウザでも対応できるjsにトランスパイルするという認識だったのですが、babel7からTypescriptに対応したみたいで入れてみました。

【参考】: https://babeljs.io/docs/en/babel-preset-typescript

// .babelrc
{
  "presets": [
    [
      "@babel/preset-typescript",
      {
        "isTSX": true,
        "allExtensions": true,
        "jsxPragma": "React"
      }
    ],
    [
      "@babel/preset-react",
      {
        "pragma": "React"
      }
    ]
  ]
}

その後もissueなどを確認しながらいろいろいれてpackage.jsonの一部は以下のようになりました。

json
1// package.json
2  "devDependencies": {
3    "@babel/cli": "^7.1.2",
4    "@babel/core": "^7.1.2",
5    "@babel/preset-react": "^7.0.0",
6    "@babel/preset-typescript": "^7.1.0",
7    "@babel/register": "^7.0.0",
8    "@types/react": "^16.4.18",
9    "@types/react-dom": "^16.0.9",
10    "babel-cli": "^6.26.0",
11    "babel-loader": "^8.0.4",
12    "babel-preset-es2018": "^1.0.0",
13    "babel-preset-react": "^6.24.1",
14    "babel-runtime": "^6.26.0",
15    "react-addons-test-utils": "^15.6.2",
16    "ts-jest": "^23.10.4",
17    "tslint": "^5.11.0",
18    "typescript": "^3.1.3"
19  }

//tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es2018",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "noUnusedLocals": true
  },

こうして、$ babelコマンドでbabelを動かしてみても、tsxファイルは認識せず、jsファイルしかトランスパイルしてくれないので、おかしいと思いながらも以下のように対応しました。

srcディレクトリ: tsxのreactのコンポーネントファイル
build/distディレクトリ: typescriptコンパイラでsrcからjsにコンパイル
libディレクトリ: 'build/dist`のjsファイルをbabelでjsファイルにトランスパイル

で、libを見るようにして、一応起動はしたのですが、結局目的だったpipeline operatorなどは使えませんでした。

そもそもこれは解決する方法はあるのでしょうか。
また、できる場合、一度の編集で2度もコードを変換するのはスマートではないように感じます。

どなたかご存知の方がいらっしゃればご教示願えませんでしょうか。
よろしくおねがいします。