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