uni-app 中用 TypeScript 写页面，props 类型怎么定义才不报错？

A. 毓珂提问于 2026-02-26 13:44:18 阅读 17

移动

我在 uni-app 里用 TypeScript 写组件，想给 props 加类型，但总是提示类型不匹配或者 undefined。明明按照文档写了，但还是不行，是不是写法有问题？

比如下面这段代码，我传了个字符串进去，但控制台一直警告类型错误：

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props.title.toUpperCase()); // 这里 TS 报错说可能是 undefined
  }
});

我来解答赞 4 收藏

反馈

1 条解答

爱学习的文阁 Lv1

你这问题我太熟悉了，uni-app + ts 写 props 类型报错，基本就是没按 Vue 3 的组合式 API 正确写法来，关键点有两个：一是 props 要用 defineProps 来定义，二是不能混用 defineComponent 和手动 props 声明，容易类型错乱。

直接用这个写法就稳了：

import { defineComponent } from 'vue'



export default defineComponent({

  props: {

    title: {

      type: String,

      required: true

    }

  },

  setup(props) {

    // 这里 props.title 是 String 类型，不会 undefined

    console.log(props.title.toUpperCase())

  }

})

但更推荐用 Vue 3 的 defineProps 写法，更简洁也更 ts 友好，注意必须在 <script setup> 里用：

<script setup lang="ts">

const props = defineProps<{

  title: string

}>()



// 这里 props.title 明确是 string，不会 undefined

console.log(props.title.toUpperCase())

</script>

如果你非要写 <script> 不用 setup，那得用 defineComponent + PropType：

import { defineComponent, PropType } from 'vue'



export default defineComponent({

  props: {

    title: {

      type: String as PropType,

      required: true

    }

  },

  setup(props) {

    // 类型正确，不会报 undefined

    console.log(props.title.toUpperCase())

  }

})

记住：别用 type: String + required: true 这种老写法混 ts，它只在运行时校验，ts 编译阶段还是可能报错。要么全用 defineProps 泛型，要么加 PropType 显式断言。

2026-02-26 14:00