TypeScript

1. 基础类型

  • 在JavaScript中,Number、String等称之为对应类型的包装类,而string、number等则是TypeScript给我们定义的标识符,提供的对应的基本类型。
TS的基础类型
let foo: number = 0;
let bar: string = "";
let baz: boolean = false;

/* 数组类型 - 两种写法 */
const arr1: string[] = ["abc", "cba"];
const arr2: Array<number> = [1, 2, 3];

/* 函数的类型 */
/* 返回值可以省略,推自动类型推导,复杂的情况需要自己手动配置 */
function sum(num1: number, num2: number): number {
  return num1 + num2;
}

/* 元组类型 */
/* 元组数据结构中可以存放不同的数据类型,取出来的item也是有明确的类型 */
const info: [string, number, number] = ["Mio", 16, 1.58];

/* 在函数中使用元组类型也是最多的(函数的返回值) */
function useState(initalState: number): [number, (newValue: number) => void] {
  let stateValue = initalState;
  function setValue(newValue: number) {
    stateValue = newValue;
  }

  return [stateValue, setValue];
}
  • TypeScript的类型推导
TS的类型推导
/*
  let进行类型推导,推导出来的是通用类型
  const进行类型推导,推导出来的则是字面量类型
*/
let foo = 0;
let bar = true;
const baz = "Mio";

匿名的参数类型

  • 匿名函数是否需要添加类型注解呢?最好不要添加类型注解
匿名函数
const names = ["abc", "cba", "mba"];

names.forEach(function (item, index, arr) {
  console.log(item, index, arr);
});

对象类型的使用

对象类型
const obj: {name: string, age?: number} {
  name: 'Mio'
}
```

```typescript title="对象类型"
type PointType = {
  x: number;
  y: number;
  z?: number;
};

function printCoordinate(point: PointType) {
  console.log("X坐标:", point.x);
  console.log("Y坐标:", point.y);
}

printCoordinate({ x: 20, y: 30 });

export {};

函数类型的定义

函数类型的定义
type FooType = () => void;

const foo: FooType = () => {};

never类型

never使用
/*
  封装框架/工具库的时候可以使用以下never
  其他时候在扩展工具的时候,对于一些没有处理的case,可以直接报错
*/
function handleMessage(message: string | number | boolean) {
  switch (typeof message) {
    case "string":
      console.log(message.length);
      break;
    case "number":
      console.log(message);
      break;
    case "boolean":
      console.log(Number(message));
      break;
    default:
      const check: never = message;
  }
}