本文へスキップ
変換ツール

TypeScript → JavaScript 変換｜型注釈を削除・TSX→JSX 対応

TypeScript の型注釈・interface・ジェネリクスを取り除き、JavaScript の出力を確認します。コードをブラウザ内で変換するツールで、型チェックやコードの実行は行いません。

interface を使った関数やジェネリクスが、どのような JavaScript になるか確認する。

コードはサーバーで変換されます。型チェック・コード実行・依存関係のバンドルは行いません。JSX はそのまま残ります。

例を読み込む（現在の入力を置き換えます）

TypeScript

JavaScript

こんなときに使えます

  • interface を使った関数やジェネリクスが、どのような JavaScript になるか確認する。
  • 型を含むサンプルを JavaScript の説明や試作に使う。

使い方

  1. 「interface と関数」「ジェネリクス」「JSX はそのまま残ります」から例を選ぶか、自分のコードを入力します。
  2. 右側の出力を確認します。interface や型注釈は消えますが、実行時に必要なコードは残ります。
  3. コピーしたコードを利用先で確認します。型の整合性は元の TypeScript に対して tsc --noEmit で検証してください。

入力例

interface User { name: string; }
const greet = (user: User): string => "こんにちは、" + user.name;

出力例

const greet = user => "こんにちは、" + user.name;

仕様と注意点

入力はブラウザ内で処理され、サーバーへ送信されません。共有端末では使用後に入力を消去してください。

型注釈を取り除く処理は型チェックではありません。const count: number = "text" のような型の不一致も、JavaScript への変換だけなら成功することがあります。

JSX は JSX のまま残ります。React の要素をブラウザで実行するには、利用先で JSX の変換が必要です。

enum など実行時の値を持つ構文は、対応する JavaScript が生成される場合があります。すべての TypeScript 構文を単純に削除するわけではありません。

複数ファイルのビルド、import 先の解決、依存パッケージのバンドル、古いブラウザ向けの変換は行いません。

入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。

よくある質問

TSX を JSX に変換できますか？

できます。.tsx のコンポーネントを貼り付けると、Props の型や interface が消え、JSX はそのまま残るため .jsx として使えます。JSX を React.createElement の呼び出しへ変換する処理は含みません。

tsc や VS Code でのコンパイルとの違いは？

tsc はプロジェクト全体の型チェックと、指定したバージョン向けの JavaScript 出力を行います。このページは貼り付けたコードから Babel で型だけを取り除き、新しい構文はそのまま残し、型エラーは報告しません。プロジェクト全体は手元の tsc や esbuild で変換してください。

型エラーがあるのに変換できるのはなぜですか？

このページは構文変換を行い、変数の代入や関数呼び出しの型整合性は調べません。プロジェクトの TypeScript コンパイラーで型チェックしてください。

JSX が残るのはエラーですか？

仕様です。JSX 変換や React の実行環境を用意するツールではありません。JSX の例を読み込むと、Props の型が消えて button 要素が残ることを確認できます。

構文エラーが出たときは？

表示された行・列と前後の括弧、型注釈を確認してください。コードを小さくすると原因を絞れます。接続エラーの場合は「再試行」を使えます。

仕様を確認する