TypeScript からの変換¶

Native

目標¶

プラグインの自動変換機能を使用して TypeScript または JavaScript コードを ReScript に移行し、.d.ts 型定義ファイルから ReScript バインディングを生成します。

手順¶

方法 1: ペーストして変換¶

1. Copy TypeScript/JSX code¶

任意の TypeScript、JavaScript、または JSX/TSX コードをクリップボードにコピーします。例:

import React, { useState } from "react";

interface Props {
  name: string;
  count: number;
}

const Greeting: React.FC<Props> = ({ name, count }) => {
  const [visible, setVisible] = useState(true);
  return visible ? <div className="greeting">Hello, {name}!</div> : null;
};

2. Paste into a `.res` file¶

Ctrl+V（macOS では Cmd+V）を押して .res ファイルにペーストします。プラグインが自動的に TypeScript/JavaScript コンテンツを検出し、ReScript に変換します:

// interface Props { ... } — commented out (manual conversion needed)

@react.component
let make = (~name: string, ~count: int) => {
  let (visible, setVisible) = React.useState(() => true)
  visible ? <div className="greeting"> {React.string("Hello, " ++ name ++ "!")} </div> : React.null
}

コンバータは以下を処理します:

JSX パターン --- className、onClick などはそのまま保持されます（ReScript JSX は同じ名前を使用します）
型注釈 --- TypeScript の型は削除されます（ReScript は型を推論します）
interface / enum 宣言 --- 手動変換用のコメント付きでコメントアウトされます
import 文 --- 削除されます（ReScript は代わりに open を使用します）

3. Review and adjust¶

自動変換は出発点です。出力を確認して調整します:

コメントアウトされた interface ブロックを ReScript の type 宣言に置き換える
必要なモジュールの open 文を追加する
コンバータが自動的に処理できなかった構文を修正する

方法 2: `.d.ts` からバインディングを生成する¶

ReScript から呼び出したい TypeScript ライブラリについて、.d.ts ファイルから external バインディングを生成します。

1. Open or select a `.d.ts` file¶

Project パネルで .d.ts ファイル（例: node_modules/some-lib/index.d.ts）を右クリックします。

2. Generate ReScript Binding¶

コンテキストメニューから Generate > ReScript Binding を選択します。プラグインが TypeScript の型定義を解析し、対応する ReScript の external 宣言を生成します:

// Generated from index.d.ts
@module("some-lib")
external createClient: (~apiKey: string, ~options: options=?) => client = "createClient"

type options = {
  timeout?: int,
  retries?: int,
}

type client = {
  fetch: (~url: string) => promise<response>,
}

3. Save and refine¶

生成されたバインディングを .res ファイルに保存し、必要に応じて調整します。ジェネレータは一般的なパターンを処理しますが、複雑な TypeScript ジェネリクスやオーバーロードには調整が必要な場合があります。

期待される結果¶

TypeScript/JSX コードが最小限の手動編集で有効な ReScript に変換される
.d.ts 型定義が使用可能な external バインディングに変換される

ヒント¶

大規模なコードベースでは、一括ではなくファイルごとに変換しましょう
ペーストコンバータは自己完結したコードスニペットで最も効果的に動作します
変換が有用でない場合は、ペースト直後に Ctrl+Z（Cmd+Z）で元に戻せます