为什么要学习TS？

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，可以在任何支持JavaScript的地方使用。TypeScript添加了静态类型和面向对象的特性，使得代码更加健壮、可维护和可读。

为什么要学习TypeScript？

静态类型检查：TypeScript引入了静态类型检查，可以在编译时发现类型错误，减少运行时错误。这有助于提高代码质量和可靠性。
更好的IDE支持：TypeScript提供了更好的IDE支持，包括代码补全、类型推断等功能，提高开发效率。
代码可读性和可维护性：TypeScript的静态类型和面向对象特性使得代码更加可读和可维护。它可以提供更好的代码结构和抽象，减少重复代码。
渐进式学习：TypeScript与JavaScript兼容，你可以逐步将现有的JavaScript代码转换为TypeScript，而不必一次性重写整个项目。

TS 带来了什么

类型安全
下一代 JS 特性
完善的工具链

不仅仅是一门语言，更是生产力工具。

TS 推荐

Awesome Typescript：TS 开源教程及应用
ByteTech：TS&React：React + TypeScript 开发模式介绍
Typescript Playground：TS 到 JS 在线编译

TS基础

基础类型

boolean、number、string
枚举 enum
any、unknown、void
never
数组类型 []
元组类型 tuple

函数类型

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

 function sum(x: number[]): number;

interface

定义：接口是为了定义对象类型
特点：
- 可选属性：?
- 只读属性：readonly
- 可以描述函数类型
- 可以描述自定义属性
总结：接口非常灵活 duck typing


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

类

定义：写法和 JS 差不多，增加了一些定义
特点：
- 增加了 public、private、protected 修饰符
  
  public：公有的（所有的都可以用）
  
  private：私有的（只有自身可以用）
  
  protected：受保护的（只有自身和子类可以用）
- 抽象类：
  - 只能被继承，不能被实例化
  - 作为基类，抽象方法必须被子类实现
- interface 约束类，使用 implements 关键字

 class Person {
    public constructor(name: string) {
     this.name = name;
     this.sex = 'female';
   }
   protected name: string;
   private sex: string;
 }

TS进阶

高级类型

基础操作符

typeof：获取实例类型

 interface Person {
   name: string;
   age: number;
 }
 const person: Person = { name: 'asd', age: 22 };
 type Person1 = typeof person;
 // 等价于
 type Person1 = Person;

keyof：获取所有键

 interface Person {
   name: string;
   age: number;
 }
 type K1 = keyof Person; // "name" | "age"
 type K2 = keyof Person[]; // "length" | "toString" | "pop" | "push" | "concat" | "join"

in：遍历枚举类型

 type Keys = "a" | "b" | "c";
 type Obj = {
   [k in Keys]: any;
 } // -> { a: any, b: any, c: any }

T[K]：索引访问

 interface Person {
   name: string;
   age: number;
 }
 let type1: Person['name']; // string
 let type2: Person['age']; // number

extends：泛型约束

 interface Person {
   name: string;
 }
 function Person1<T extends Person>(arg: T): T {
   return arg;
 }
 Person1({ name: 'asd' });
 Person1({ age: 22 }); // 报错

常用工具类型

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

// 原理
type Partial<T> = {
  [t in keyof T]?: T[t];
};

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

// 原理
type Required<T> = {
  [t in keyof T]-?: T[t];
};

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

// 原理
type Readonly<T> = {
  readonly [t in keyof T]: T[t];
};

Pick、Record...

实战&工程向

声明文件

declare：三方库需要类型声明文件
.d.ts：声明文件定义
@types：三方库 TS 类型包
tsconfig.json：定义 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/comment', {
  id: 1,
  comment: 'asdasd'
})

总结

TypeScript是JavaScript的一个超集，由Microsoft开发和维护。它为JavaScript添加了静态类型和其他编程功能，以增强代码的可维护性、可读性和可扩展性。以下是TypeScript的一些主要用途：

静态类型：TypeScript引入了静态类型系统，允许开发人员在编码过程中指定变量、函数和类的类型。这可以帮助捕获在编译时期的类型错误，提前发现潜在的bug，提高代码质量和可靠性。
代码提示和自动完成：TypeScript提供更丰富的代码提示和自动完成功能，因为编辑器可以根据已知的类型信息推断出可能的属性和方法。
更好的开发工具支持：由于TypeScript具有静态类型信息，所以IDE和代码编辑器能够提供更好的自动完成、代码重构和错误检测等功能，从而提高开发效率。
代码维护性：TypeScript的类型系统和面向对象特性使得代码更易于维护。大型项目中，随着代码的增长，TypeScript可以帮助开发团队更好地组织和管理代码。
ECMAScript最新特性支持：TypeScript通常支持最新的ECMAScript标准，并且允许开发者在较旧的JavaScript环境中使用新的语言特性，通过编译器将其转换成向后兼容的代码。
渐进增强：TypeScript是渐进式的，这意味着可以将它逐渐引入到现有的JavaScript项目中，无需一次性重写所有代码。
社区支持和生态系统：由于TypeScript由Microsoft支持并且越来越受欢迎，因此有一个庞大的开发者社区和丰富的第三方库支持。

深入浅出TypeScript | 青训营笔记