从0到1学习typescript（更新版）

前言

JavaScript有的typescript都有，js的代码在ts环境下可以运行；

typescript弥补了javaScript的弱类型不足；

JavaScript属于动态类型的编程语言；代码在运行阶段才能发现错误；

typeScript属于静态类型的编程语言，代码在编写阶段就可以发现类型错误，需要先编译，再执行，不能直接执行，需要编译成js才能执行

1、常用ts基本命令

（1）下载

npm install typescript -g

（2）检查ts版本

tsc -v

（3）将ts编译为js

tsc index.ts

2、定义变量

首先要明确一个概念，ts中确定了类型之后，就不能再修改类型

let str = "3"; // 根据初始赋值来推导出变量的类型，以后的str的类型就是字符串
// str = 2; // 报错，原因：变量在定义的时候，类型已经确定下来了，不能修改

let a:number;
a = 1;
a = '1'; // 报错，原因：变量在定义的时候，类型已经确定下来了，不能修改

let b:10; // 相当于b是常量了
b = '1'; // 报错，常量不能被修改

const num = 1; // 类型为1，常量不能被修改，所以它的值就是它的类型

const num2 = 2; // 类型为2

const str1 = '123'; // 类型为'123'

// ts中，let和const的区别：let的类型由它定义的值的类型来确定，而const的类型就是它值的类型

3、定义响应式数据

3-1、ref

（1）ref的参数一般是基本数据类型，也可以是对象类型

（2）如果参数是对象类型，底层的本质还是reactive，系统会自动将ref转换为reactive

例如：ref(1) === reactive( { value: 1 } )

（3）访问ref中的数据，需要.value

（4）ref底层原理是Proxy

<template>
  <button @click="increment">
    {{ count }} <!-- 无需 .value -->
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
 
const count = ref(0)
 
const increment => () {
  count.value++
}
</script>
 

3-2、reactive

（1）reactive的参数一般是对象或者数据，他能将复杂数据类型变为响应式数据

（2）reactive的响应式是深层次的，底层本质是将传入的数据转为Proxy对象

<template>
  <h2>名称：{{name.title}}</h2>
  <h2>主要爱好：{{job.hobby[0].type}}</h2>
  <button @click="changeName">修改姓名和爱好</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
 
 let name = ref({ // ref定义对象类型响应式变量
      title:'小明'
    })

  let job = reactive({ // reactive定义对象类型响应式变量
      type:'演员',
      hobby:[
        {
          type:'演戏',
          degree: 5
        },
        {
          type:'看书',
          degree: 4
        }
      ],
    })
 
function changeName () {
      name.value.title = '小红' // 对ref定义的响应式数据进行操作，需要使用.value
      console.log('job',job.hobby[0])
      job.hobby[0].type = '运动' 
// 对reactive定义的响应式数据进行操作，无需使用.value，且是深层次响应 
    }
 

3-3、区别

（1）数据定义

ref用来定义基本数据类型，reactive定义对象或者数组数据类型；

ref也可以用来定义对象或数组类型数据，它内部会自动通过reactive转为代理对象

（2）原理

ref通过Object.defineProperty()的get和set来实现响应式；

reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

（3）使用角度

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value；

reactive定义的数据：操作数据与读取数据均不需要.value

（4）赋值

<script setup lang="ts">
import { ref, reactive } from 'vue'
const data = [1, 2, 3, 4, 5]; // 假设data是接口返回数据

// ref
const list = ref([])
ref.value = data

// reactive
const list = reactive([])

// 方法1 失败，直接赋值丢失了响应性
// list = res;

// 方法2 这样也是失败
// list.concat(data);

// 方法3 可以，但是很麻烦
data.forEach(e => {
  list.push(e);
});

// reactive数据被重新赋值后，原来数据的代理函数和最新的代理函数不是同一个，无法被触发

// 正确赋值方式
const list = reactive(
 {
    arr: []
 }
)
list.arr = data

</script>
 

4、toRef和toRefs

toRef 和 toRefs都是Vue3 中的响应式转换工具函数；toRef 和 toRefs 都是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象

<script setup lang='ts'>
  import { reactive } from 'vue';
  let info = reactive({
    name: '小明',
    age: 26,
    gender: '男',
  })
  // 这样解构会丢失响应式效果
  let { name, age, gender } = info;
</script>

4-1、toRef

• toRef 函数可以将一个响应式对象的属性转换为一个独立的 ref 对象。
• 返回的是一个指向源对象属性的 ref 引用，任何对该引用的修改都会同步到源对象属性上。
• 使用 toRef 时需要传入源对象和属性名作为参数。

<template>
  <div id="app">
    <p>info对象中的age：{{ info.age }}</p>
    <button @click="updateInfoObjAge">更新info对象中的 age</button>
    <br />
    <p>使用toRef函数转换后的age：{{ age }}</p>
    <button @click="updateAge">更新 age</button>
  </div>
</template>

<script setup lang='ts'>
  import { reactive } from 'vue';
  let info = reactive({
    name: '小明',
    age: 26,
    gender: '男',
  })
  
  let age = toRef(info, 'age');

  const updateInfoObjAge = () => {
    info.age++;
  }
  const updateAge = () => {
    age.value++;
  }
</script>

不管是更新info对象中的 age，还是更新age，info.age和解构出来的age都会同步修改

4-2、toRefs

• toRefs 函数可以将一个响应式对象转换为一个普通的对象，该对象的每个属性都是独立的 ref 对象。
• 返回的对象可以进行解构，每个属性都可以像普通的 ref 对象一样访问和修改，而且会保持响应式的关联。
• toRefs 的使用场景主要是在将响应式对象作为属性传递给子组件时，确保子组件可以正确地访问和更新这些属性。

<template>
  <div id="app">
    <p>info对象中的age：{{ info.age }}</p>
    <button @click="updateInfoObjAge">更新info对象中的 age</button>
    <br />
    <p>使用toRef函数转换后的age：{{ age }}</p>
    <button @click="updateAge">更新 age</button>
  </div>
</template>

<script setup lang='ts'>
  import { reactive } from 'vue';
  let info = reactive({
    name: '小明',
    age: 26,
    gender: '男',
  })
  
  let { name, age, gender } = toRefs(info);

  const update = () => {
    name.value = '小红';
    age.value = 33;
    gender.value = '女';
  }
</script>

触发 update 函数，在 update 函数中，通过修改响应式引用对象的 value 属性来更新数据的值

4-3、相同点

• toRef 和 toRefs 都用于将响应式对象的属性转换为 ref 对象。
• 转换后的属性仍然保持响应式，对属性的修改会反映到源对象上。
• 不管是使用 toRef 还是 toRefs 将响应式对象转成普通对象，在 script 中修改和访问其值都需要通过 .value 进行。

4-4、不同点

• toRef 修改的是对象的某个属性，生成一个单独的 ref 对象。
• toRefs 修改的是整个对象，生成多个独立的 ref 对象集合。
• toRefs 适用于在组件传递属性或解构时使用，更加方便灵活，而 toRef 更适合提取单个属性进行操作。