1. TypeScript类型 - any类型

image.png

// 当进行一些类型断言 as any
// 在不想给某些JavaScript添加具体的数据类型时(原生的JavaScript代码是一样)
let message: any = "Hello World";

message = 123;
message = true;
message = {};

// message()
// message.split(" ")

console.log(message);
const arr: any[] = [];
//不推荐，数组里面最好存放确定的数据类型。

2. TypeScript类型 - unknown类型

image.png

这个代码里面不知道result是什么类型，字符串还是数字类型。
使用unknown和any有什么区别呢？
就是unknown类型只能赋值给any和unknown类型。
但是any可以赋值给任意类型。

let result: unknown = "result";
let test: any = "test";

let message: string = result;
console.log(message);
export {};

let message: string = result;这样写message会报错
如果这么写就没有问题

let result: unknown = "result";
let test: any = "test";

let message: string = test;
console.log(message);
export {};

//unknown的作用是防止你拿到一个不确定的类型跑到别的地方乱用。你unknown类型只能赋值给unknown和any，就不能赋值给其他已经有类型的变量了

3. TypeScript类型 - void类型

image.png

function sum(num1: number, num2: number) {
  console.log(num1 + num2);
}

sum(20, 30);
// sum("abc", "cba")
//当一个函数没有返回值的时候，就自动推断出它的返回值类型是void类型。等价于下面，
一般不写。

// function sum(num1: number, num2: number) : void  {
//   console.log(num1 + num2)
// }

4. TypeScript类型 - never类型

image.png

// function foo(): never {
//   // 死循环
//   while(true) {

//   }
// }
//never类型表示这个函数永远没有返回的结果

// function bar(): never {
//   throw new Error()
// }

// 提前
// 封装一个核心函数
function handleMessage(message: string | number) {
  switch (typeof message) {
    case "string":
      console.log("string处理方式处理message");
      break;
    case "number":
      console.log("number处理方式处理message");
      break;
    default:
      const check: never = message;
  }
}

handleMessage("abc");
handleMessage(123);

// 张三
handleMessage(true);

应用场景：
下面的代码

image.png

传入布尔会报错，
修改函数参数后，就是增加布尔类型

function handleMessage(message: string | number | boolean) {
  switch (typeof message) {
    case "string":
      console.log("string处理方式处理message");
      break;
    case "number":
      console.log("number处理方式处理message");
      break;
  }
}

handleMessage("abc");
handleMessage(123);

// 张三
handleMessage(true);
export {};

这个时候就不报错了，但是这个函数就不严谨了，没有布尔值时候的逻辑处理，但是用户也不知道为啥错，如果我们写入never的化，就会报错

image.png

check会报错，因为变量是never的化永远不会有赋值过程。这时候报错，用户就知道不要光修改参数的类型要增加布尔值时候的逻辑处理。

总结：never的应用场景：当用户更改函数的参数类型的时候，内部没有相对于的逻辑处理的时候，给用户报错。

5. TypeScript类型 - tuple类型

image.png

// tuple元组: 多种元素的组合
// "why" 18 1.88

// 1.数组的弊端
// const info: any[] = ["why", 18, 1.88]
// const infoObj = {
//   name: "why",
//   age: 18,
//   height: 1.88
// }

// const name = info[0]
// console.log(name.length)

//弊端就是没办法确定拿到的数组元素是什么类型，后续操作的话有危险
//使用对象的化也可以，但是看起来没有数组简洁，就是想要用数组的方式保存，这个时候数组就要使用元组类型

// 2.元组的特点
//特点是知道数组元素中每个元素的类型
const info: [string, number, number] = ["why", 18, 1.88];
const name = info[0];
console.log(name.length);
const age = info[1];
console.log(age.length); //会报错

export {};

5.1 tuple类型的应用场景

那么tuple在什么地方使用的是最多的呢？
tuple通常可以作为返回的值，在使用的时候会非常的方便；

// hook: useState
// const [counter, setCounter] = {counter: , setCounter:}

function useState(state: any) {
  let currentState = state
  const changeState = (newState: any) => {
    currentState = newState
  }

  const tuple: [any, (newState: any) => void] = [currentState, changeState]
  return tuple
}

const [counter, setCounter] = useState(10);
setCounter(1000)

const [title, setTitle] = useState("abc")

export {}