五分钟快速熟悉TypeScript介绍，基本类型，特殊类型以及使用场景

一.TypeScript介绍

  对于TypeScript介绍，我会遵循star法则从四个方面阐述(情景，任务，行动，结果)。

TypeScript的出现主要解决在大型项目开发过程中遇到的一些问题，因为js是一门弱类型语言，对变量没有多加约束，所以才会导致更多的bug发生率，这么说你或许不太理解，举例了一些代码帮你理解。

没有使用TypeScript，出现类型错误，在一些大型项目中这种错误会难易追踪

let age; // 弱类型声明，没有指定类型

// 假设我们打算存储一个年龄，但不小心存储了一个字符串
age = "thirty two";

// 稍后在某处我们尝试使用这个值进行数学运算
let totalYears = age * 10; // 这里会进行字符串拼接，而不是数学乘法

console.log(totalYears); // 输出 "thirty two10" 而不是预期的 320

而如果我使用了TypeScript

let age: number; // 显式类型声明为number

// 尝试给一个number类型的变量赋一个字符串值会导致编译错误
age = "thirty two"; // TypeScript编译错误：Type 'string' is not assignable to type 'number'.

// 如果我们正确地为age赋一个数字值，那么接下来的数学运算将按预期进行
age = 32;
let totalYears = age * 10; // 正确执行数学乘法，输出 320

console.log(totalYears); // 输出 320

TypeScript在开发过程中是经过编译成js之后才会执行，会让程序在执行前便就会发生错误

二.TypeScript基本类型

       1. 任意值类型：any类型，声明为any的变量可以赋予任何类型的值，它允许你在编译时绕过类型检查。

let value: any;
value = "Hello, World!"; // OK
value = 42; // OK
value = true; // OK
value = { key: "value" }; // OK

        2.数字类型：number双精度 64 位浮点值。它可以用来表示整数和分数

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

        3.字符串类型：string一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

        4.布尔类型：boolean表示逻辑值：true 和 false。

let flag: boolean = true;

        5.数组类型：

//1.数组中存在单个或者同类型的数组
const arrA: number[] = [1, 2, 4];
const arrC: boolean[] = [true, false]
const arrD: string[] = ['1', '3']
const arrE: void[] = [undefined, null, null]
const arrF: undefined[] = [undefined, undefined]

//2.如果说数组中可能会出现不同类型
const arrG: (number | string | number[] | boolean)[] = [1, '4', true, [1, 2, 4]]

//3.ts中元祖的使用：如果数组中的元素时不同类型，并且必须规定顺序，那么这样的数组应该应用中元组类型定义

const arrH: [string, boolean, number] = ['666', true, 666]
const arrI: [string, boolean, number][] = [['666', true, 666]]

//4.数组中同类型对象不同属性类型该如何定义呢
type typeA = { unname: string, age: number }
const arrTypeA: typeA[] = [{ unname: '小刘', age: 24 }]

        6.元组：Tuple元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。和上述数组类型第三点一样

let x: [string, number];

        7.枚举enum：

//先来看看什么是枚举类型
enum Country {
  China,
  USA，
  Russia
}
//上述定义了一个枚举类型，如果不做修改的话Country.China的值为0,1,2
//如果我们定义了
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; //2
let d: Color = Color [2];//Green
//关于这个枚举这个类型，我查阅了大部分资料得出结论，没有太大的实用价值，对于js对象区别来说不大，可能语意化更好吧

        8.void用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}

        9.null：表示对象值缺失。

        10.undefined：用于初始化变量为一个未定义的值。

        11.never：never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

三.TypeScript特殊类型声明

        1.接口：（Interface）是一种定义对象结构的方式，它指定了一个对象必须具有的形状（shape），即对象的属性和方法。

interface Person {
  readonly id: number; // 只读属性
  name: string;
  age?: number; // 可选属性
  greet(message: string): void; // 方法
}

//类实现上述接口 implements表示一个类实现某个接口，意味着该类必须得提供该接口的所有属性和方法
class Employee implements Person {
  id: number;
  name: string;
  age?: number; // 可选属性在类实现时也是可选的

  constructor(id: number, name: string, age?: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }

  greet(message: string): void {
    console.log(`${this.name} says: ${message}`);
  }
}

        2.类型断言：类型断言在于告诉编译器，我们比他更确定某个值的类型。

//两种写法，在 tsx 语法中必须使用 值 as 类型。因为形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode，在 ts 中除了表示类型断言之外，也可能是表示一个泛型。
1.值 as 类型
2.<类型>值

let foo: any = 'hello';
let bar = <string>foo; 
let res = foo as String;

 联合类型断言

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

//使用类型别名
type Shape = Circle | Rectangle;

function draw(shape: Shape) {
  // ... 根据 shape 的类型执行不同的绘制逻辑
}

        3.联合类型：可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

        4.泛型：允许在定义函数、类、接口等时使用占位符来表示类型，而不是具体的类型。

//假设我们用一个函数，它可接受一个 number 参数并返回一个number 参数，如下写法：
function returnItem (para: number): number {
    return para
}
function returnItem (para: string): string {
    return para
}
//上述两种编写方式，存在最明显的问题就是代码重复度高
//虽然可以使用 any类型去替代，但这也并不是很好的方案，因为我们的目的是接收什么类型的参数返回什么类型的参数，即在运行时传入参数我们才能确定类型
//这样的情况下，我们就可以使用泛型

function returnItem<T>(para: T): T {
    return para
}

//定义多个参数泛型
function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}
 
swap([7, 'seven']); // ['seven', 7]

//与联合类型合用
function processArray<T extends string | number>(arr: T[]): void {
  // 遍历数组并处理每个元素
  for (const item of arr) {
    // 由于T是string或number的联合类型，我们需要进行类型守卫来安全地处理每个元素
    if (typeof item === 'string') {
      // 处理字符串
      console.log(`String item: ${item}`);
    } else if (typeof item === 'number') {
      // 处理数字
      console.log(`Number item: ${item}`);
    }
  }
}