TS学习笔记

// 类型注解
let price: number = 3
type StudentType = { name: string, age: number }
let stuObj: StudentType = { name: "wangwu", age: 23 }

// 类型推导
let count = 3;
let custObj = { name: "wangwu", age: 23 }

unref()

如果参数是一个 ref 则返回它的 value，否则返回参数本身。

unref()：是 val = isRef(val) ? val.value : val 的语法糖。

isref()

检查一个值是否为一个 ref 对象。

toRefs()

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

<script setup>
import { reactive, toRefs, toRef } from 'vue';
const person = reactive({ name: "SunWuKong", age: 18 })
// 使用ES6进行解构,toRefs会将响应式对象的左右的属性变为响应式
let { name, age } = toRefs(person) // 结构出来的变量直接是就是响应式的ref
let refName = toRef(person, "name")
let refage = person.age

const changeName = () => person.name += "~"
const changeAge = () => person.age += 1

</script>

<template>
    <h2>toRefs</h2>
    <div>姓名:{{ name }},年龄:{{ age }}</div>
    <h2>toRef</h2>
    <!-- 当前的age就是非响应式的age，他不会变 -->
    <div>姓名:{{ refName }},年龄:{{ refage }}</div>
    <section>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </section>
</template>

1.数组

let ids: number[] = [1, 2, 3, 4, 5]; // 只能包含 number
let names: string[] = ['ConardLi', 'Tom', 'Jerry']; // 只能包含 string
// let options: boolean[] = [true, false, false]; 只能包含 true false
let books: object[] = [
  { name: 'Tom', animal: 'cat' },
  { name: 'Jerry', animal: 'mouse' },
]; // 只能包含对象
let arr: any[] = ['hello', 1, true]; // 啥都行，回到了 JS

// 数组可以包含多个类型
let person: (string | number | boolean)[] = ['ConardLi', 1, true];

// 如果数组有默认值，ts也会进行类型推断

let persona:[string,number,boolean]=['conaeadli',1,true]
// persona[0]=17  //Error - Value at index 0 can only be a string

let arr2 : Array<number> = [5,6,7,8] //泛型定义数组

//元组类型就是在定义数组的时候，类型和数据的个数一开始就已经限定好了。(固定长度，固定类型)
//使用的时候，数据的类型的位置和数据的个数，需要和在定义元组的时候的数据类型和位置一致
let arr : [ string ,number,boolean ] = [ ‘东方不败’ , 100 , true ]

//可以对元组内的值进行更改
let arr3 : [string,number,boolean] = ['东方不败',100.123,true]
console.log(arr3[1].toFixed(2));  // 保留两位小数
// 打印 100.12

2.对象

在定义对象的类型时，我们通常会使用 interface(接口)。如果我们需要检查多个对象是否具有相同的特定属性和值类型时，是很有用的

interface Person {
  name: string;
  age: number;
  isProgrammer: boolean;
}

let person1: Person = {
  name: 'DUDU',
  age: 17,
  isProgrammer: true,
};

let person2: Person = {
  name: 'Hope',
  age: 3,
  isProgrammer: false,
};

3.函数

//方法默认的返回值为 void

const circle = (diam: number): string => {
  return '圆的周长为：' + Math.PI * diam;
};
//我们可以在参数后添加一个?，表示它为可选参数；
//另外参数的类型也可以是一个联合类型：
const add = (a: number, b: number, c?: number | string) => {
  return a + b;
};

console.log(add(5, 4, '可以是 number、string，也可以为空'));

用了 any 就相当于完全丢失了类型检查，所以尽量少用 any ，对于未知类型可以用 unknown

4.类型断言

1） 非空类型断言：!（不推荐使用非空类型断言。）表示确定某个标识符是有值的

console.log(value!.length) //加上 ! 的意思是确保value一定是有值的

2） 可选链操作符：? （标识可选参数，可不传递此参数）

其作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行。
函数的参数后加 ? 标识可选参数，即表示允许undefined。
x?: string 等价于 x: string | undefined。

3） !! 和 ??

!! 将一个其他类型转换成boolean类型，类似于Boolean()。
?? 空值合并操作符，当操作符的左侧是null或者undefined时，返回其右侧操作数，否则返回左侧操作数。

 let ss: string | null | undefined = undefined
 console.log(ss ?? '你好') 
//如果 ss有值而且不是null和undefined时，ss就是上面赋给的值
//如果是null或者undefined，ss的值就是默认值'你好'

5.any 和 unknown的区别：

        都是顶级类型，但是 unknown 更加严格，不像 any 那样不做类型检查，反而 unknown 因为未知性质，不允许访问属性，不允许赋值给其他有明确类型的变量

        在联合类型中，unknown 类型会吸收任何类型。这就意味着如果任一组成类型是 unknown，联合类型也会相当于 unknown，但是至少一种组成类型是 any，联合类型会相当于 any

6.rest参数

剩余参数，ES6中，可以使用…rest的方式获取函数中的剩余参数（rest参数）：
function push(array,...items){
    items.forEach(function(item){
         array.push(item)
    })
}
let a=[];
push(a,1,2,3,4,5)

事实上，items是一个数组，我们可以用数组的类型来定义它：

function push(array:any[],...items:any[]){
    items.forEach(function(item){
          array.push(item)
    })
}
let a=[];
push(a,1,2,3,4,5,'6','7',true)

7.使用 BigInt

方法1：

第一步：修改 tsconfig.json 选项——"lib": ["DOM","ES2020"]

第二步：let max = BigInt(Number.MAX_SAFE_INTEGER);

const max1 = max + BigInt(15)

const max2 = max + BigInt(5)

console.log("max1:", max1)// 9007199254740992n

console.log("max2:", max2)

console.log(max1 === max2) // false

方法2：

第一步：修改 tsconfig.json 选项——"lib": ["DOM","ES2020"] + "target": "es2020"

第二步：

let max = BigInt(Number.MAX_SAFE_INTEGER);

const max1 = max + 15n

const max2 = max + 5n

console.log("max1:", max1)// 9007199254740992n

console.log("max2:", max2)

console.log(max1 === max2) // false

8.枚举

// 字符串枚举
enum EnumAuditStatus {
  MANAGER_ADUIT_FAIL = "项目经理审核失败"
  NO_ADUIT = "没有审核"
  MANAGER_ADUIT_SUCCESS = "项目经理审核成功"
  FINAL_ADUIT_SUCCESS = "财务审核成功"
}

//  字符串枚举
enum WeekEnd {
  Monday = "Monday",
  Tuesday = "Tuesday",
  Wensday = "Wensday",
  ThirsDay = "ThirsDay",
  Friday = "Friday",
  Sarturday = "Sarturday",
  Sunday = "Sunday"
}


// 数字枚举
enum EnumAuditStatus {
  MANAGER_ADUIT_FAIL = -1,//第一个常量值设置为-1
  NO_ADUIT, // 第二个常量值自动递增1 就为0
  MANAGER_ADUIT_SUCCESS,// // // 第二个常量值自动递增2 就为1
  FINAL_ADUIT_SUCCESS // // // 第二个常量值自动递增3 就为2
}

// 数字枚举
enum Week {
  Monday = 1,
  Tuesday,
  Wensday,
  ThirsDay,
  Friday,
  Sarturday,
  Sunday
}

//3. 枚举取值方式

export enum EnumAuditStatus {
  MANAGER_ADUIT_FAIL = -1,//第一个常量值设置为-1
  NO_ADUIT, // 第二个常量值自动递增1 就为0
  MANAGER_ADUIT_SUCCESS,// // // 第二个常量值自动递增2 就为1
  FINAL_ADUIT_SUCCESS // // // 第二个常量值自动递增3 就为2
}

// 取值方式1：枚举反向取值 根据枚举中常量值来取出常量名
console.log("EnumAuditStatus[0]", EnumAuditStatus[0]);
console.log("EnumAuditStatus[1]", EnumAuditStatus[1]);
// 取值方式2：枚举取值 根据枚举中常量名来取出常量值
console.log("EnumAuditStatus.FINAL_ADUIT_SUCCESS",
  EnumAuditStatus.FINAL_ADUIT_SUCCESS);	

9.泛型

        泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

function test <T> (arg:T):T{
  console.log(arg);
  return arg;
}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true


// 注意，这里写法是定义的方法哦
interface Search {
  <T,Y>(name:T,age:Y):T
}

let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);//编译器会自动识别传入的参数，将传入的参数的类型认为是泛型指定的类型

partial<T>的作用就是将某个类型中的属性全部变为可选项(?)

//Promise的泛型T代表promise变成成功态之后resolve的值，resolve(value)
interface AxiosInstance {
  <T = any>(value: T): Promise<T>
}

type FormSchema = {
  // 唯一值
  field: string
  // 标题
  label?: string
  // 远程加载下拉项
  api?: <T = any>() => AxiosPromise<T>
}

// schema 是个数组，数组内的值 按照 FormSchema格式
const schema = reactive<FormSchema[]>([
  {
    field: 'title',
    colProps: {
      span: 24
    }
  },
  {
    field: 'username',
    label: t('login.username'),
  },
  {
    field: 'password',
  }
])