深入浅出 TypeScript 笔记｜青训营TS是是一种开源编程语言，它是 JavaScript 的超集，支持静态类

TS是什么

TypeScript，是一种开源编程语言，它是 JavaScript 的超集，支持静态类型检查和面向对象编程等特性。

TypeScript 与 JavaScript 的区别

TypeScript	JavaScript
用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	动态弱类型（没有静态）

TypeScript上可以调用任何的JS库、可以在TS中使用原生JS语法
相比于JavaScript ，TS增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发

TS基础

1、常见基础类型

1.1 三大基础类型boolean、number、string

1.2 特有类型：枚举enum

枚举可以有：数字枚举、字符串枚举、异构枚举

1.3 any、unknow、void

在 TypeScript 中，任何类型都可以被归为 any 或 unknow 类型
void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void

1.4 never

表示的是那些永不存在的值的类型

可用于抛出异常，如:

function throwError(m: string): never {
    throw new Error(m)
}

1.3 数组类型 [] 、元组类型 tuple

在 TS 中，元组 是数组 的特殊形式
若一组数据的类型都相同则为数组，反之就是元组
数组的 api 对于元组来讲也是通用的(如push、pop等)，只是类型不同。
泛型定义数组的写法：let 变量名： Array<数据类型> = [值1,值2,值3]

2、类

类的写法和JS差不多，但增加了一些定义
特点：

1、增加了public 、private、protect 修饰符

2、抽象类 ：
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
3、interface约束类，使用implements 关键字

TS泛型

1、泛型的定义

泛型（Generics） 是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。

1.1 官方定义

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

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

1.2 定义方法

泛型的语法是<>里面写类型参数,一般用T表示，如：


function print<T>(arg:T):T{
    console.log(arg)
    return arg
}
print<string>('Hello')//定义T为string类型
print<number>(40)//定义T为number类型
print

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

1、定义要使用的类型

2、通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导

2、基础操作符

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

3、泛型工具类型

多用于泛型接口

Partial<T>:将类型属性变为可选

interface People{
    name:string;
    age:number;
}

const man:Partial<People> ={
    name:'张三'
}；

Required<T>：将类型属性变为必选


 interface People{
      name:string;
      age:number;
  }
  
  const man:Partial<People> ={
      name:'张三'
  }；

Readonly<T>：将类型属性变为只读


   interface People{
    name:string;
    age:number;
}

const man:Readonly<People> ={
    name:'张三',
    age:22
}；

Pick<Type,Key>: 从T中选择一组属性来构造新类型\


interface People {
    name: string;
    age: number;
}
 
type man = Pick<People, 'name'>;
 
const p: man = {
    name: '张三',
    age: 22, // 对象文字可以只指定已知属性，并且“age”不在类型“TP”中
}

Record<Type,Key>:构造一个对象类型，属性键为Keys，属性类型为Type


interface People{
    name:string;
    age:number;
}

//将x,y作为People的key
type man = Record<"x" | "y", People>

const P : man ={
    x:{
        name:'张三',
        age:20,
    },
    y:{
        name:'李四',
        age:21,
    }
}

……

4、泛型约束后端接口类型（课程中TS实战案例）

import axios from 'axios'

interface API {
    '/book/detail': {
        id: number,
    },
    '/book/comment': {
        id: number
        comment: string
    }
}


function request<T extends keyof API>(url: T, obj: API[T]) {
    return axios.post(url, obj)
}


request('/book/detail',{
    id:22,
    comment:'实现'，
})

request的路径和参数需要匹配，即与API中的相对应。

总结

近年来在大型项目中，由于TypeScript能提供更好的代码可维护性和可扩展性，让开发者能够在开发过程中更早地捕捉到潜在的错误，使其逐渐成为首选的开发语言之一。

TS的优势十分显著，但JS所学的支撑着我们能尽快掌握TS。一方面我们确实需要去认识学习TS这一重要的开发语义，另一方面我们也需要明确这些终究是工具，重要的是我们怎么使用。

无论是TypeScript还是JavaScript，只有具备扎实良好的基础和积极进取的学习态度，相信就能运用好工具，做到与时俱进。

深入浅出 TypeScript 笔记 ｜ 青训营