[深入理解typescript｜青训营笔记]

前言
记录青训营前端专场的学习过程，有不足的地方还请大佬指正。
由于本人基础比较薄弱，所以笔记尽可能的详细。

该文章开始的版本将以简述课程知识点为主，等后面实践有自己的理解后会编辑添加自己的理解

Typescript vs javascript

tpescript	javascript
jvascript的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网站
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间，发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值不同类型

TS基础数据类型

• boolean、number、string
• undefined、null
• any、unknown、void
• never
• 数组类型[]
• 元祖类型tuple

TS函数类型

• 定义：TS函数定义时要定义输入参数类型和输出参数类型
• 输入参数：参数支持可选参数和默认参数
• 输出参数：输出可以自行推断，没有返回值，默认为void类型
• 函数重载：名称相同但参数不同，可以通过重载支持多种数据类型

//函数重载
function add(x: number[]) : number
function add(x: string[]) : string

TS的interface类型

定义：接口是为了定义对象的类型

• 可选属性

interface Person {
  name: string;
  age?: number; // 可选属性
}

const person1: Person = {
  name: "Alice"
};

const person2: Person = {
  name: "Bob",
  age: 25
};

• 只读属性

interface Point {
  readonly x: number; // 只读属性
  readonly y: number;
}

const point: Point = {
  x: 10,
  y: 20
};

point.x = 5; // Error: 无法分配到 "x" ，因为它是只读属性。

• 可以描述函数类型

interface MathFunction {
  (x: number, y: number): number; // 函数类型
}

const add: MathFunction = (x, y) => {
  return x + y;
};

const subtract: MathFunction = (x, y) => {
  return x - y;
};

• 可以描述定义属性

interface Book {
  title: string;
  author: string;
  pages: number;
}

const book: Book = {
  title: "The TypeScript Handbook",
  author: "John Doe",
  pages: 200
};

typescript高阶

联合类型

联合类型允许一个值具有多种可能的类型。通过使用竖线 | 将多个类型列在一起，表示一个值可以是这些类型中的任意一个。

function printId(id: number | string) {
  console.log(id);
}

printId(123); // 输出：123
printId("abc"); // 输出："abc"

交叉类型

交叉类型允许一个值同时具有多个类型的特性。通过使用 & 运算符将多个类型合并在一起，表示一个值具有这些类型的联合。

type Point = { x: number; y: number };
type Color = { color: string };

function draw(point: Point & Color) {
  console.log(`Drawing at (${point.x}, ${point.y}) with color ${point.color}`);
}

draw({ x: 10, y: 20, color: 'red' }); // 输出：Drawing at (10, 20) with color red

类型断言

类型断言允许开发者手动指定一个值的类型，即告诉编译器某个值的实际类型，类似于类型转换。可以使用尖括号语法 <Type> 或者 as 关键字进行类型断言。

let value: any = "Hello TypeScript";

// 尖括号语法
let length1: number = (<string>value).length;

// as 关键字
let length2: number = (value as string).length;

console.log(length1); // 输出：17
console.log(length2); // 输出：17

类型别名

类型别名允许为现有类型创建一个新名称，可以使用类型别名来提高代码的可读性和重用性。示例代码如下：

type ID = number | string;
type Point = { x: number; y: number };
type Coordinate = [number, number];

function printId(id: ID) {
  console.log(id);
}

function draw(point: Point) {
  console.log(`Drawing at (${point.x}, ${point.y})`);
}

function move(coordinate: Coordinate) {
  console.log(`Moving to (${coordinate[0]}, ${coordinate[1]})`);
}

printId(123); // 输出：123
draw({ x: 10, y: 20 }); // 输出：Drawing at (10, 20)
move([30, 40]); // 输出：Moving to (30, 40)