隐式类型推断 | 类型断言

• 隐式类型推断： 当变量初始化的时候，ts 会根据赋值判断这个变量的类型，声明但没有初始化的时候会被判断为 any 类型。
• 类型断言：明确告知 ts 某个变量的类型

// 1。使用 as 进行断言，推荐
const num1 = res as number
// 2。使用 <> 进行断言，在 jsx 中使用会产生冲突，不推荐
const num2 = <number>res

接口 (Interfaces)

接口就是用来约束对象的结构

interface Post {
  title: string
  content: string
  subtitle?: string           // 可选成员
  readonly summary: string    // 只读成员
  // []表示任意string类型的键
  [prop: string]: string      // 动态成员
}
const post1: Post = {title: 'lily', content: 'Hello', summary: 'Hello,Lily'}
post1.dynamic1 = 'value1'
post1.dynamic2 = 'value2'

类 (Classes)

类就是用来描述一类具体事物的抽象特征，描述一类对象的抽象成员
ts 在 es 的基础上又增加了新的特性

// 类还可以实现接口，用 implements 关键字
// 推荐一个接口中定义一个方法,类实现接口的时候实现多个接口
interface Eat {
  eat (food: string): void
}
interface Run {
  run (distance: number): void
}
// 类
class Person implements Eat,Run {
  name: string  // = 'init name' 赋初始值
  /** 访问修饰符
   1. private(私有的,外部不可访问) 
   2. public(公有的,默认为public,建议加上) 
   3. protected(受保护的，允许继承，只有子类可以访问)
  **/
  private age: number 
  // 只读属性 readonly
  protected readonly gender: boolean
  
  constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }
  
  sayHi (msg: string): void{
    console.log(`I am ${this.name}, ${msg}`)
  }
  
  // 实现接口中的方法
  eat (food: string): void {
    console.log('进餐：' + ${food})
  }
  run (distance: number): void {
    console.log('行走：' + ${distance})
  }
}

// 子类
class Student extends Person {
  // 构造函数也可以通过访问修饰符修饰，private 表示u可以在外部创建实例
  private constructor(name:string, age: number) {
    super(name: sting, age:number)
  }
  // 在内部用静态方法创建实例对象
  static create (name: string, age: number){
    return new Student(name, age)
  }
}

抽象类

abstract class Animal {
  eat (foo: string): void{
    console.log(`呼噜呼噜的吃：${food}`)
  }
  // 抽象方法
  abstract run(distance: number): void
}

泛型

指的是在声明的时候不去定义明确的类型，等到调用的时候才传递具体的类型。这样可以极大程度的复用我们的代码。

function createNumberArray (length: number, value: number): number[] {
   const arr = Array<number>(length).fill(value)
   return arr
}
const a = createNumberArray(3, 100) // [100, 100, 100]
// 不知道传入的类型，用泛型将类型当作参数传入
function createArray<T> (length: number, value: T): T[] {
   const arr = Array<T>(length).fill(value)
   return arr
}
// 传入参数类型 string
const b = createArray<string>(3, 'foo')

类型声明

在 ts 使用第三方模块，如果这个模块中不包含所对应的类型声明文件，就可以尝试去安装一个对应的类型声明模块（一般为 @types/模块名）。如果没有对应的类型声明模块，那只能使用 declare 语句去声明所需的模块类型。

学习自拉钩教育前端视频