概念引入

TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

ts本质上就像是js的优化拓展，ts拓展了js的一些功能，解决了js存在的的一些问题。

TS和JS对比：

TS是JS的超集，TS带来了什么？

但不乏还是有一些缺点的。 TS的缺点：

不能被浏览器理解，需要被编译成JS

像我习惯了写js，上手ts还是需要些时间，ts中有些概念还是有点难，比如泛型。

TypeScript基础

TS基础数据类型：

boolean、number、string。【其中number:包括整数、浮点数和复数。】
枚举enum
any、unkonwn、void
never
数组类型[]
元组类型tuple

函数类型

定义：TypeScript定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数

输出参数：输出可以自动推断，没有返回值时，默认为void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

接口

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

可选属性：可以对属性进行标识
只读属性：readonly
可以描述函数类型
可以描述自定义属性

详细展开：

可选属性（Optional Properties）：使用问号（?）表示属性是可选的，即可以存在也可以不存在。

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

let person1: Person = { name: "Alice" };
let person2: Person = { name: "Bob", age: 25 };

只读属性（Readonly Properties）：使用readonly关键字表示属性只能在创建对象时赋值，后续不能修改。

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

let p: Point = { x: 10, y: 20 };
// p.x = 5; // 编译错误，无法修改只读属性

函数类型（Function Types）：接口不仅可以描述对象类型，还可以描述函数类型。使用箭头函数或函数声明来定义函数类型，并指定参数类型和返回类型。

interface Greeter {
  (name: string): string; // 函数类型
}

let greet: Greeter = function (name: string) {
  return `Hello, ${name}!`;
};

console.log(greet("Alice")); // Hello, Alice!

自定义属性：接口可以包含除了已知属性之外的其他属性，这样可以灵活地添加自定义属性。

interface Book {
  title: string;
  author: string;
  [propName: string]: any; // 允许添加其他属性
}

let book: Book = { title: "TypeScript in Action", author: "Jane Smith", year: 2023 };

接口的灵活性使得它可以更好地适应各种场景，实现duck typing（鸭子类型）的特性。

Class类

定义：写法和JS差不多增加了一些定义。

特点：增加了 public、private、protected 三个修饰符来增强了 JS 中的类。

class Person {
  public name: string;
  private age: number;
  protected gender: string;

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

  public sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

let person = new Person("Alice", 25, "female");
console.log(person.name); // 可以访问 public 属性
// console.log(person.age); // 编译错误，无法访问 private 属性
// console.log(person.gender); // 编译错误，无法访问 protected 属性
person.sayHello(); // Hello, my name is Alice.

抽象类：

只能被继承不能被实例化

作为基类抽象方法必须被子类实现

abstract class Animal {
  abstract makeSound(): void; // 抽象方法

  move(): void {
    console.log("Moving...");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Woof!");
  }
}

let dog = new Dog();
dog.makeSound(); // Woof!
dog.move(); // Moving...

interface约束类：

使用implements关键字实现接口中定义的方法。

interface Vehicle {
  start(): void;
  stop(): void;
}

class Car implements Vehicle {
  start(): void {
    console.log("Car started.");
  }

  stop(): void {
    console.log("Car stopped.");
  }
}

let car = new Car();
car.start(); // Car started.
car.stop(); // Car stopped.

TypeScript进阶

高级类型

联合类型 |

let age: number | string; // age 可以是 number 类型或 string 类型
age = 25;
age = "25";

交叉类型 &

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

interface Employee {
  company: string;
  position: string;
}

type EmployeePerson = Person & Employee; // EmployeePerson 拥有 Person 和 Employee 的特性

let employee: EmployeePerson = {
  name: "Alice",
  age: 25,
  company: "ABC Inc.",
  position: "Engineer"
};

类型断言

let value: any = "Hello, TypeScript!";
let length1: number = (<string>value).length; // 使用尖括号写法
let length2: number = (value as string).length; // 使用as写法

类型别名

相同点：
1. 都可以定义对象或函数
2. 都允许继承
差异点：
1. interface是TS用来定义对象，type是用来定义别名方便使用。
2. type可以定义基本类型，interface不行。
3. interface可以合并重复声明，type不行。

type Age = number; // 类型别名给 number 类型起一个新名字
let age1: Age = 25;

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 25
};

泛型

基本定义：

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

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

定义要使用的类型
通过TypeScript类型推断，自动推导类型

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

基础操作符：

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

常用工具类型：

Partial：将类型属性变为可选
Required：将类型属性变为必选
Readonly：将类型属性变为只读
Pick、Record

声明文件

declare:三方库需要类型声明文件
.d.ts:声明文件定义
@types：三方库TS类型包
tsconfig.json：定义TS的配置

课程总结与思考

总的来说，TypeScript是一门值得学习和探索的语言。它在类型安全、代码维护和开发效率方面带来了许多好处。

深入浅出TypeScript | 青训营