深入浅出 TypeScript

## TypeScript VS JavaScript

TypeScript

JavaScript 的超集，用于解决大型项目的代码复杂性
强类型，支持静态和动态类型
可以在编译期间发现并纠正错误
不允许改变变量的数据类型支持静态代码检查，支持后端语言的一些特性

JavaScript

一种脚本语言，用于创建动态网页
动态弱类型语言
只能在运行时发现错误
变量可以被赋值成不同类型

动态类型：在JavaScript中，变量的类型是在运行时决定的，而不是在编译时确定的。这意味着您可以在运行时更改变量的类型。例如，您可以将一个变量从一个字符串更改为一个数字，并且JavaScript会自动进行类型转换。
弱类型：JavaScript不要求变量在声明时指定其类型。这意味着您可以在不明确声明变量类型的情况下创建变量。此外，JavaScript还允许对不同类型的值进行操作，而不需要进行显式类型转换。例如，您可以将不同类型的值相加，JavaScript会自动进行类型转换。
静态类型语言是一种编程语言，它要求在编译时就确定变量的类型。在静态类型语言中，变量必须在声明时明确指定其类型，并且在编译时必须符合该类型的规定。如果在编译时发现变量类型不匹配或存在其他类型错误，编译器将会报错。

TS基础

基础类型

boolean、number（包含了整数、浮点数、负数）、string
枚举enum （不仅从成员值到成员名，还从成员名到成员值进行映射） enum用法

enum Fruit {
    apple,  // 0
    orange, // 1
    banana, // 2
}

enum Fruit2 {
    apple2 = 1, // 1
    orange2, // 2
    banana2 = 100, // 100
    watermelon2, // 101
}

any、unknown、void
never
数组类型
元组类型tuple

函数类型

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

函数例子：

function add(x: number[]): number
function add(x: string[]): string
function add(x: any[]):any {
    if (typeof x[0] === 'string') {
        return x.join()
    }
    if (typeof x[0] === 'number') {
        return x.reduce((acc,cur) => acc + cur)
    }
}

Interface

定义:接口是为了定义对象类型
特点:

可选属性: ?
只读属性: readonly
可以描述函数类型
可以描述自定义属性

总结:接口非常灵活duck typing

接口例子：

interface Person {
    name: string
    age: number
}

const p1: Person = {
    name: 'Lin',
    age: 18
}

p1.age
p1.name

interface RandomKey {
    [propName: string]: string
}

const obj: RandomKey = {
    a: 'hello',
    b: 'world',
    c: 'typescript',
}

类

定义:写法和JS差不多，增加了一些定义
特点:

增加了 public、private、protected 修饰符
抽象类:
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
interface约束类，使用implements关键字

在ts的类中 # 是一个私有属性，没法被外界调用

TS进阶

高阶类型

1.联合类型 |

2.交叉类型 &

同名类型会取交集

3.类型断言 as

会减少类型的推断，减少编译器错误抛出

4.类型别名

4.类型别名 (type VS interface)

定义:
```
  给类型起个别名
```

相同点:

  1.都可以定义对象或函数
  2.都允许继承

差异点:

  1.interface是TS用来定义对象，type是用来定义别名方便使用
  2.type可以定义基本类型，interface不行;
  3.interface可以合并重复声明，type不行:

开发中，一般涉及到交叉和组合类型的时候用type
涉及到类比如extends ，implements的时候用interface
在定义一个对象和函数时按通用习惯

泛型

什么时候需要泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型这在创建大型系统时为你提供了十分灵活的功能

基本使用

基本定义:

1.泛型的语法是今里面写类型参数，一般用T表示

2.使用时有两种方法指定类型:

    1.定义要使用的类型
    2.通过TS类型推断，自动推导类型

3.泛型的作用是临时占位，之后通过传来的类型进行推导

function print<T>(arg:T):T {
    console.log(arg)
    return arg
}

print<string>('hello") // 定义 T 为 string
print('hello') // TS 类型推测，自动推导类型为 string

泛型工具类型

基本操作符

typeof：获取类型
keyof：获取所有键
in：遍历枚举类型
T[K]：索引访问
extends：泛型约束

深入浅出TypeScript学习心得 ｜ 青训营笔记