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

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

移动

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

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

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

我来解答赞 7 收藏

反馈

2 条解答

书生シ秋梓 Lv1

在 uni-app 中用 TypeScript 写组件时，props 的类型定义确实需要注意一下。你遇到的问题是因为 TypeScript 无法自动推断出 props 是必填的，即使你在 Vue 组件选项中设置了 required: true。你需要手动告诉 TypeScript 这个 prop 是必填的。

你可以通过给 defineComponent 的 props 参数添加类型注解来解决这个问题。具体来说，可以这样做：

import { defineComponent, PropType } from 'vue';



export default defineComponent({

  props: {

    title: {

      type: String as PropType<string>,

      required: true

    }

  },

  setup(props) {

    console.log(props.title.toUpperCase()); // 这样就不会报错了

  }

});

注意这里的 type: String as PropType，这样就明确告诉 TypeScript title 是一个字符串类型的 prop，并且是必填的。这样应该就能解决你遇到的问题了。记得导入 PropType 从 vue 模块中。

2026-03-24 16:20

爱学习的文阁 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