Rork で生成したコードを VS Code で開いた瞬間、赤い波線が画面いっぱいに走っている経験はないでしょうか。そのままプロンプトに「型エラーを直して」と打ち込んでも、AI は別の場所で同じエラーを再発させ、修正と破壊を行ったり来たりすることがあります。
私がいくつかのアプリを Rork で作ってみて気づいたのは、しつこく残る型エラーには共通したパターンがあるということです。AI に丸投げして直らない場合は、人間側で型を一度だけ整えてあげると、その後の生成が驚くほど安定します。今回はそのときに役立つ5つの修正パターンを、実際のコード例とともに紹介します。
パターン1: 暗黙の any（Props の型未定義）
最もよく見るのが、コンポーネントの props に型を付け忘れているパターンです。AI は機能を急いで実装したいので、型定義を後回しにすることがあります。
// ❌ Rork がよく出すコード（暗黙の any）
export function ProductCard({ name, price, onPress }) {
return (
<Pressable onPress={onPress}>
<Text>{name}</Text>
<Text>¥{price.toLocaleString()}</Text>
</Pressable>
);
}
// → strict モードで「Parameter 'name' implicitly has an 'any' type」が無限に出る修正は型エイリアスを切り出して props に付けます。
// ✅ 型を付けて再生成を安定させる
type ProductCardProps = {
name: string;
price: number;
onPress: () => void;
};
export function ProductCard({ name, price, onPress }: ProductCardProps) {
return (
<Pressable onPress={onPress}>
<Text>{name}</Text>
<Text>¥{price.toLocaleString()}</Text>
</Pressable>
);
}このコンポーネントを次に AI に編集させると、型を維持したまま追加実装してくれることが増えます。型は AI への暗黙のドキュメントとして機能します。
パターン2: useState の型推論ミス
useState(null) や useState([]) のような初期値だけだと、TypeScript は null 型や never[] 型と推論してしまい、後で値を入れた時に型エラーが噴出します。
// ❌ never[] と推論されて push できない
const [items, setItems] = useState([]);
setItems([...items, { id: 1, name: "コーヒー" }]); // 型エラー
// ❌ null しか入らないと推論される
const [user, setUser] = useState(null);
setUser({ name: "Masaki" }); // 型エラージェネリクスで「これから何を入れるのか」を明示します。
// ✅ 入れたい型を最初に教える
type Item = { id: number; name: string };
const [items, setItems] = useState<Item[]>([]);
type User = { name: string } | null;
const [user, setUser] = useState<User>(null);ここを直すと、画面遷移後の API レスポンス処理まで一気に型が通ることが多いです。状態関連で「画面が更新されない」という別の問題が出ていたら、Rork で state が更新されない・再描画されない時の対処法 も併せて確認してみてください。
パターン3: ライブラリ型定義の不整合（@types の欠落）
Expo や React Navigation のような大型ライブラリを Rork が組み込んだ時、対応する型定義パッケージが入っていないことがあります。VS Code の Problems パネルに「Could not find a declaration file for module '...'」と出ていたら、これが原因です。
# ❌ よくあるエラー
# Could not find a declaration file for module 'react-native-svg'
# ✅ 型定義をインストール（Expo SDK の管理下なら expo install を優先）
npx expo install react-native-svg
# 公式が型定義を内包していない古めのライブラリの場合
npm install --save-dev @types/lodashRork 上で動かしている場合は、プロンプトで「react-native-svg の型定義を含めて再構成して」と明示的に指示すると、expo install を含む手順を生成してくれます。
パターン4: ナビゲーション param 型の食い違い
React Navigation を使ったコードで一番厄介なのが、画面遷移パラメータの型エラーです。AI は画面ごとにバラバラな型を生成しがちで、navigate の引数で必ずエラーが出ます。
// ❌ 各画面で別々に型を書いていて整合性が取れない
type DetailParams = { productId: number };
navigation.navigate("Detail", { productId: "abc" }); // 数値と文字列でズレるルーター全体の param 型を1か所に集約します。
// ✅ ルートパラメータを単一の型として定義
export type RootStackParamList = {
Home: undefined;
Detail: { productId: number };
Profile: { userId: string };
};
// 各画面はこの型を参照する
type DetailScreenProps = NativeStackScreenProps<RootStackParamList, "Detail">;
export function DetailScreen({ route, navigation }: DetailScreenProps) {
const { productId } = route.params; // 型が一意に決まる
return <Text>{productId}</Text>;
}RootStackParamList を App.tsx の近くに置いておくと、Rork は次回の生成からこの型を参照するようになります。
パターン5: AI が as any でごまかしている時の直し方
最後に注意したいのが、何度も型エラーを直させると AI が as any で黙らせるパターンです。コンパイルは通りますが、本番でクラッシュする原因になります。
// ❌ AI が逃げに使うパターン
const data = (response as any).items.map((x: any) => x.name);検索コマンドで as any の数を可視化して、計画的に削っていきます。
# プロジェクト全体の "as any" を数える
grep -rn "as any" src/ | wc -l
# 一覧で確認
grep -rn "as any" src/代替として、API レスポンスは Zod や TypeScript の型ガードで安全に絞り込みます。
// ✅ Zod で実行時バリデーション + 型推論
import { z } from "zod";
const ItemSchema = z.object({ id: z.number(), name: z.string() });
const ResponseSchema = z.object({ items: z.array(ItemSchema) });
const parsed = ResponseSchema.parse(response);
const names = parsed.items.map((x) => x.name); // 型が string[] に確定AI が再び as any を入れてきたら、プロンプトで「as any を使わずに型ガードで実装して」と明示するのが効きます。Rork の AI が以前のコードを上書きしてしまう挙動が気になる場合は、Rork の AI に既存コードを壊されない指示の出し方 も参考になります。
全体を振り返って — まず1ファイルだけ型を整える
5つのパターンを紹介しましたが、一度に全部直そうとすると挫折しやすいです。私のおすすめは、今いちばんよく触っている1ファイルだけを完璧に型付けすることです。そのファイルが「型のお手本」になり、AI は次の生成からそれに合わせてくれます。
useEffect 関連のエラーが TypeScript エラーと混在している場合は、Rork の useEffect 無限ループを解消するデバッグ手順 で根本原因を切り分けてから型を整えると、より早く安定状態に到達できます。