老师你好：有3-12泛型问题，问题如图；相关代码如图下。

来源：3-14 模块化结合typescript - 泛型改造

幕布斯9304279

2020-12-09

问题描述1: 泛型问题如下图
watch(loadimage.result, () => {
console.log(‘value’, loadimage.result.value)
})
以上代码通过；
但是无法使用 loading.result.value[0].url 有报错如下截图
图片描述

问题2 ： loadimage2.result.value?.message多了一个问号？如何理解？如下图
图片描述

mouse X: {{x}} mouse Y: {{y}}

loading image...

//useLoadImag.ts 代码
import { ref } from 'vue’
import axios from ‘axios’

function useLoadImag(url: string) {
const loading = ref(true)
const loaded = ref(false)
const result = ref<T | null>(null)
const err = ref(null)

axios.get(url).then((rawDate) => {
loading.value = false
loaded.value = true
result.value = rawDate.data
}).catch((e) => {
err.value = e
loading.value = false
})

return { loading, loaded, result, err };

}

export default useLoadImag

写回答

2回答

张轩

2020-12-10

已采纳

同学你好这是ts 在帮助你查找到错误因为我们的 result 可能是 T 或者 null 类型，一开始是 null

const result = ref<T | null>(null)

所以在使用的是它也可能是 null，所以我们要先判断他是否为 null，假如不为 null，那就是 T 类型，这称之为 type guard。

if (loading.result.value) {
 // 这时候再就不会报错了
 loading.result.value[0].url
}

第二个问题和第一个问题是一个意思，是 ts 的一个简写符号。叫做 optional chaining，其实就是一种简写方式等于

let x = foo?.bar.baz(); 

let x = (foo === null || foo === undefined) ?    undefined :
    foo.bar.baz();

文档在这里：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

幕布斯9304279

非常感谢老师！

2020-12-10

共1条回复

幕布斯9304279

提问者

2020-12-09

追加代码部分截图

//img.mukewang.com/szimg/5fd0dd060962c3af25601600.jpg

//img.mukewang.com/szimg/5fd0dd0709ebe61925601600.jpg

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3176 学习 · 2352 问题

查看课程

相似问题

老师你好，用reactive 后我想返回一个对象直接使用但是报错

回答 2

老师您好，我遇到一些问题。

回答 2

关于泛型

回答 1

老师你好，想问一个这里的泛型的问题

回答 1

老师你好！关于类型断言。

回答 2

打开慕课网App查看更多内容

{{count}}

{{double}}

{{greetings}}

mouse X: {{x}} mouse Y: {{y}}

loading image...