与 React/Vue 结合

TypeScript 教程 · 第 8 章 · 5 次浏览

TS 与框架结合时，主要工作是给组件 props、事件、状态、API 响应标注类型。

React + TS

函数组件：function Card({ title }: { title: string }) 或用 React.FC
useState 泛型：useState<number>(0)
事件类型：React.ChangeEvent<HTMLInputElement>
ref 类型：useRef<HTMLInputElement>(null)

Vue 3 + TS

defineProps 泛型：defineProps<{ title: string }>()；ref 泛型：ref<number>(0)。

代码示例

// React + TS
import { useState, type ChangeEvent } from "react";

interface TodoItem { id: number; text: string; done: boolean; }

function Todo({ item }: { item: TodoItem }) {
    const [checked, setChecked] = useState(item.done);
    return (
        <label>
            <input type="checkbox"
                   checked={checked}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                       setChecked(e.target.checked)} />
            {item.text}
        </label>
    );
}

// Vue 3 + TS
// <script setup lang="ts">
// interface Props { title: string; count?: number }
// const props = defineProps<Props>();
// </script>