TypeScript与JavaScript的区别

• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，增加了类型系统和其他面向对象的特性。
• TypeScript 是静态类型语言，可以在编译时进行类型检查，而 JavaScript 是动态类型语言，类型检查是在运行时进行的。
• TypeScript 支持面向对象编程的特性，如类、接口、继承等，而 JavaScript 是一种基于原型的语言。

总结： 建议多使用ts，虽然写起来相对js麻烦，但是相较于稳定性和可维护性，ts的优势是显而易见的。

TypeScript 的类型系统

相比JavaScript，TypeScript 增加了很多类型系统，如：基本类型、联合类型、交叉类型、类型别名、接口、枚举、泛型等。

1.基本类型

let str: string = "hello";
let num: number = 123;
let bool: boolean = true;
let u: undefined = undefined;
let n: null = null;
let sym: symbol = Symbol("sym");
let big: bigint = 123;

2.联合类型

let a: string | number = 123;
a = "hello";

3.交叉类型

interface A {
  name: string;
}
interface B {
  age: number;
}
let c: A & B = { name: "hello", age: 123 };

4.类型别名

type A = string | number;
let b: A = 123;

5.接口

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

let b: A = { name: "hello", age: 123 };

6.枚举

enum A {
  a,
  b,
  c,
}
let b: A = A.a;

7.泛型

function A<T>(a: T): T {
  return a;
}

let b = A<string>("hello");

TypeScript 中关键字

keyof 使用

• 获取一个类型的所有键，返回一个联合类型

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

type B = keyof A; // 'name' | 'age'

typeof 使用

• 获取一个变量的类型

let a = "hello";
let b: typeof a = "hello";

in 使用

type A = "name" | "age";
type B = {
  [key in A]: number;
};

let c: B = { name: 123, age: 123 };

extends 使用

• 用于泛型约束

type A = "name" | "age";
type B = {
  [key in A]: number;
};

type C<T> = T extends "name" ? string : number;

let d: C<"name"> = "hello";
let e: C<"age"> = 123;

Omit 使用

• 剔除类型中的某些属性

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

type B = Omit<A, "age">;

let c: B = { name: "hello" };

Partial 使用

• 将类型中的所有属性变为可选

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

type B = Partial<A>;

let c: B = { name: "hello" };

Record 使用

• 将一个类型的所有属性变为另一个类型

type A = "name" | "age";
type B = Record<A, number>;

let c: B = { name: 123, age: 123 };

Pick 使用

• 从一个类型中选取一些属性

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

type B = Pick<A, "name">;

let c: B = { name: "hello" };

Exclude 使用

• 从一个类型中排除一些属性

type A = "name" | "age" | "gender";
type B = Exclude<A, "age">;

let c: B = "name" | "gender";

ReturnType 使用

• 获取函数的返回类型

function A() {
  return "hello";
}

type B = ReturnType<typeof A>;

let c: B = "hello";

InstanceType 使用

• 获取构造函数的实例类型

class A {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

type B = InstanceType<typeof A>;

let c: B = new A("hello");

NonNullable 使用

• 从一个类型中排除 null 和 undefined

type A = string | number | null | undefined;
type B = NonNullable<A>;

let c: B = "hello";

Parameters 使用

• 获取函数的参数类型

function A(a: string, b: number) {
  return a + b;
}

type B = Parameters<typeof A>;

let c: B = ["hello", 123];

Required 使用

• 将类型中的所有属性变为必选

interface A {
  name?: string;
  age?: number;
}

type B = Required<A>;

let c: B = { name: "hello", age: 123 };

TypeScript 的类型断言

类型断言用于告诉编译器变量的类型，从而避免类型检查错误。

// 第一种写法
let a: any = "hello";
let b: string = a as string;
// 第二种写法
let a: any = "hello";
let b: string = <string>a;