{"id":488,"date":"2025-12-05T10:40:12","date_gmt":"2025-12-05T02:40:12","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=488"},"modified":"2025-12-05T10:40:12","modified_gmt":"2025-12-05T02:40:12","slug":"vue-3-typescript-%e6%8e%a5%e5%8f%a3interface%e4%bd%bf%e7%94%a8%e7%a4%ba%e4%be%8b%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue-3-typescript-%e6%8e%a5%e5%8f%a3interface%e4%bd%bf%e7%94%a8%e7%a4%ba%e4%be%8b%e8%af%a6%e8%a7%a3\/","title":{"rendered":"Vue\u00a03\u00a0TypeScript\u00a0\u63a5\u53e3Interface\u4f7f\u7528\u793a\u4f8b\u8be6\u89e3"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd Vue 3 + TypeScript \u4e0b\u63a5\u53e3 (interface<\/code>) \u4f7f\u7528\u7684\u8be6\u89e3\u793a\u4f8b<\/strong>\uff0c\u4ece\u57fa\u7840\u5230\u8fdb\u9636\uff0c\u6db5\u76d6\u7ec4\u4ef6 props\u3001\u54cd\u5e94\u5f0f\u6570\u636e\u3001\u51fd\u6570\u7c7b\u578b\u3001\u6cdb\u578b\u4ee5\u53ca\u4e0e Vue \u7ec4\u5408\u5f0f API \u7684\u7ed3\u5408\u5b9e\u8df5\u3002<\/p>\n\n\n\n

\n\n\n\n

1\ufe0f\u20e3 \u57fa\u7840\u63a5\u53e3\u4f7f\u7528<\/h1>\n\n\n
\n\/\/ \u5b9a\u4e49\u4e00\u4e2a\u63a5\u53e3\ninterface User {\n  id: number\n  name: string\n  age?: number \/\/ \u53ef\u9009\u5c5e\u6027\n}\n\n\/\/ \u4f7f\u7528\u63a5\u53e3\u58f0\u660e\u53d8\u91cf\nconst user1: User = {\n  id: 1,\n  name: 'Alice',\n}\n\n\/\/ \u9519\u8bef\u793a\u8303\uff1a\u7f3a\u5c11 id\n\/\/ const user2: User = { name: 'Bob' } \/\/ \u274c TS \u4f1a\u62a5\u9519\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
2\ufe0f\u20e3 \u63a5\u53e3\u4e0e\u51fd\u6570\u7c7b\u578b<\/h1>\n\n\n
\ninterface Greeter {\n  (name: string): string\n}\n\nconst greet: Greeter = (name) => {\n  return `Hello, ${name}!`\n}\n\nconsole.log(greet('Alice')) \/\/ Hello, Alice!\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
3\ufe0f\u20e3 \u63a5\u53e3\u7ee7\u627f\uff08Extends\uff09<\/h1>\n\n\n
\ninterface Person {\n  name: string\n  age: number\n}\n\ninterface Employee extends Person {\n  employeeId: string\n}\n\nconst emp: Employee = {\n  name: 'Tom',\n  age: 25,\n  employeeId: 'E1001'\n}\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
4\ufe0f\u20e3 Vue 3 + TypeScript \u4f7f\u7528\u63a5\u53e3\u793a\u4f8b<\/h1>\n\n\n\n
4.1 \u5b9a\u4e49 Props \u63a5\u53e3<\/h2>\n\n\n
\n\/\/ UserCard.vue\n&lt;script lang="ts" setup>\nimport { defineProps } from 'vue'\n\n\/\/ \u5b9a\u4e49\u63a5\u53e3\ninterface User {\n  id: number\n  name: string\n  age?: number\n}\n\n\/\/ \u4f7f\u7528\u63a5\u53e3\u5b9a\u4e49 props\nconst props = defineProps&lt;{\n  user: User\n  showAge?: boolean\n}>()\n&lt;\/script>\n\n&lt;template>\n  &lt;div>\n    &lt;p>\u540d\u5b57: {{ props.user.name }}&lt;\/p>\n    &lt;p v-if="props.showAge">\u5e74\u9f84: {{ props.user.age }}&lt;\/p>\n  &lt;\/div>\n&lt;\/template>\n\n<\/pre><\/div>\n\n\n
\n
\u2705 \u597d\u5904\uff1a<\/p>\n\n\n\n
    \n
  1. props \u6709\u7c7b\u578b\u7ea6\u675f<\/li>\n\n\n\n
  2. \u652f\u6301\u53ef\u9009\u5c5e\u6027<\/li>\n\n\n\n
  3. \u7f16\u8f91\u5668\u63d0\u793a\u5f3a\u5927<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n
    \n\n\n\n
    4.2 \u5b9a\u4e49\u54cd\u5e94\u5f0f\u5bf9\u8c61<\/h2>\n\n\n
    \n&lt;script lang="ts" setup>\nimport { reactive } from 'vue'\n\ninterface Product {\n  id: number\n  name: string\n  price: number\n}\n\nconst product = reactive&lt;Product>({\n  id: 1,\n  name: 'MacBook Pro',\n  price: 1999\n})\n\n\/\/ \u4fee\u6539\u5c5e\u6027\nproduct.price = 1899\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    4.3 \u63a5\u53e3\u5b9a\u4e49\u51fd\u6570\u53c2\u6570<\/h2>\n\n\n
    \ninterface Calculator {\n  (a: number, b: number): number\n}\n\nconst add: Calculator = (a, b) => a + b\nconst multiply: Calculator = (a, b) => a * b\n\n<\/pre><\/div>\n\n\n
    \u5728 Vue \u4e8b\u4ef6\u4e2d\u4f7f\u7528\uff1a<\/p>\n\n\n
    \nconst handleClick = (fn: Calculator) => {\n  console.log(fn(2, 3))\n}\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    5\ufe0f\u20e3 \u63a5\u53e3\u4e0e\u6cdb\u578b\u7ed3\u5408<\/h1>\n\n\n
    \ninterface ApiResponse&lt;T> {\n  code: number\n  data: T\n  message: string\n}\n\n\/\/ \u793a\u4f8b\u63a5\u53e3\u8fd4\u56de User \u6570\u636e\nconst res: ApiResponse&lt;User> = {\n  code: 200,\n  data: { id: 1, name: 'Alice' },\n  message: 'ok'\n}\n\n<\/pre><\/div>\n\n\n
    \u5728 Vue \u7ec4\u4ef6\u4e2d\u53ef\u76f4\u63a5\u4f7f\u7528\u6cdb\u578b\uff1a<\/p>\n\n\n
    \nimport { ref } from 'vue'\n\nconst response = ref&lt;ApiResponse&lt;User>>({\n  code: 0,\n  data: { id: 0, name: '' },\n  message: ''\n})\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    6\ufe0f\u20e3 \u9ad8\u7ea7\u63a5\u53e3\uff1a\u7d22\u5f15\u7b7e\u540d & \u4ea4\u53c9\u7c7b\u578b<\/h1>\n\n\n\n
    6.1 \u7d22\u5f15\u7b7e\u540d<\/h2>\n\n\n
    \ninterface StringMap {\n  [key: string]: string\n}\n\nconst obj: StringMap = {\n  name: 'Alice',\n  city: 'Beijing'\n}\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    6.2 \u4ea4\u53c9\u7c7b\u578b\uff08\u7ec4\u5408\u591a\u4e2a\u63a5\u53e3\uff09<\/h2>\n\n\n
    \ninterface A { a: number }\ninterface B { b: string }\n\ntype C = A &amp; B\n\nconst objC: C = { a: 10, b: 'Hello' }\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    7\ufe0f\u20e3 Vue 3 \u7ec4\u5408\u5f0f API \u7efc\u5408\u793a\u4f8b<\/h1>\n\n\n
    \n&lt;script lang="ts" setup>\nimport { reactive, ref } from 'vue'\n\ninterface Todo {\n  id: number\n  title: string\n  done: boolean\n}\n\nconst todos = reactive&lt;Todo[]>([\n  { id: 1, title: 'Learn Vue 3', done: false },\n  { id: 2, title: 'Learn TypeScript', done: true }\n])\n\nconst newTodo = ref&lt;Todo>({ id: 3, title: 'Write demo', done: false })\n\nconst addTodo = () => {\n  todos.push({ ...newTodo.value })\n  newTodo.value.title = ''\n}\n\nconst toggleTodo = (todo: Todo) => {\n  todo.done = !todo.done\n}\n&lt;\/script>\n\n&lt;template>\n  &lt;div>\n    &lt;ul>\n      &lt;li v-for="todo in todos" :key="todo.id">\n        &lt;input type="checkbox" v-model="todo.done" @change="toggleTodo(todo)" \/>\n        {{ todo.title }} - {{ todo.done ? '\u5b8c\u6210' : '\u672a\u5b8c\u6210' }}\n      &lt;\/li>\n    &lt;\/ul>\n\n    &lt;input v-model="newTodo.title" placeholder="\u65b0\u4efb\u52a1" \/>\n    &lt;button @click="addTodo">\u6dfb\u52a0&lt;\/button>\n  &lt;\/div>\n&lt;\/template>\n\n<\/pre><\/div>\n\n\n
    \n
    \u2705 \u7279\u70b9\uff1a<\/p>\n\n\n\n
      \n
    1. todo \u7c7b\u578b\u5f3a\u7ea6\u675f<\/li>\n\n\n\n
    2. \u65b0\u589e\u3001\u4fee\u6539\u90fd\u81ea\u52a8\u63d0\u793a\u7c7b\u578b<\/li>\n\n\n\n
    3. Vue \u54cd\u5e94\u5f0f\u548c TS \u7c7b\u578b\u7ed3\u5408\u5b8c\u7f8e<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n
      \n\n\n\n
      8\ufe0f\u20e3 \u603b\u7ed3<\/h1>\n\n\n\n
        \n
      1. interface vs type<\/strong>\uff1a\n