关于vue中ref的类型声明

Question

老师，我观察到element-plus的源码中，他会这样声明变量
比如 const name = ref(null)
按理说null是无法转换成string的呀，请问老师他是做了什么配置吗

Answer 1

keviny79 2021-11-17 14:47:48

1.

const name = ref(null) 这里写的 是 js 版本，转换为TS版本  const name:Ref = ref(null) 

Ref 默认泛型为any 可以接受任意数据类型的值

interface Ref<T=any>{

   value:T

}  

2.使用场景还用：当我们在运行后才确定 ref.value的值，就可以这样使用

例如：获取组件上的Dom元素

//  通过ref来获取真实的DOM元素节点【查询顾客中的表单】,ref不带参数或null

let custListRef: Ref = ref(null) 或

let custListRef: Ref = ref() 或

let custListRef: Ref = ref(undefined) 或

custListRef.value.model;

提交答案系统出现了滞后，发重了一次，忽略

• 提问者 有没有没被占用的昵称 #1

  老师，element-plus就是ts写的
  他是这样 const name = ref<string>(null)，感觉这样肯定会报错啊，但是他那儿就没事儿

• keviny79 回复 提问者 有没有没被占用的昵称 #2

  唯一原因就是 它的对应的tsconfig.json文件 配置的缘故：
  关闭了"strict": true   和  "strictNullChecks": true    ，下面的都能编译通过！
  let str: string = null
  let str2: number = null;
  let str3: boolean = null;
  let str4: object = null;
  let str5: unknown = null;
  let str6: any = null;
  let str7: void = null;

• 提问者 有没有没被占用的昵称 #3

  非常感谢！

Answer 2

keviny79 2021-11-17 16:07:55

唯一原因就是 它的对应的tsconfig.json文件 配置的缘故：

关闭了"strict": true   和  "strictNullChecks": true    ，下面的都能编译通过！

Answer 3

keviny79 2021-11-17 14:47:58

1.

const name = ref(null) 这里写的 是 js 版本，转换为TS版本  const name:Ref = ref(null) 

Ref 默认泛型为any 可以接受任意数据类型的值

interface Ref<T=any>{

   value:T

}  

2.使用场景：当我们在运行后由系统确定 ref.value的值时，就可以这样使用

例如：获取组件上的Dom元素

//  通过ref来获取真实的DOM元素节点【查询顾客中的表单】,ref不带参数或null

let custListRef: Ref = ref(null) 或

let custListRef: Ref = ref() 或

let custListRef: Ref = ref(undefined) 

custListRef.value.model;// 调用model数据

Answer 4

keviny79 2021-11-17 14:47:51

1.

const name = ref(null) 这里写的 是 js 版本，转换为TS版本  const name:Ref = ref(null) 

Ref 默认泛型为any 可以接受任意数据类型的值

interface Ref<T=any>{

   value:T

}  

2.使用场景：当我们在运行后才确定 ref.value的值，就可以这样使用

例如：获取组件上的Dom元素

//  通过ref来获取真实的DOM元素节点【查询顾客中的表单】,ref不带参数或null

let custListRef: Ref = ref(null) 或

let custListRef: Ref = ref() 或

let custListRef: Ref = ref(undefined) 或

custListRef.value.model;