【TypeScript】梳理

TypeScript

interface（接口）

主要作用是为类，对象，函数等规定一种契约
只能定义格式，不能包含任何实现
可以继承
定义对象的使用场景：描述数据模型，Api响应格式，配置对象
定义类的契约，规定一个类需要实现哪些属性
自动合并，一般用于扩展第三方库

如何定义类结构

如果类想要遵循ts规范，得使用implements

typescript 复制代码

// 定义一个接口，包含一个方法speak，参数为数字类型，返回值为void
export interface classTypes {
  name: string
  age: number
  speak: (n: number) => void
}

class Person implements classTypes {
  constructor(
    public name: string,
    public age: number,
  ) {}

  speak(n: number) {
    console.log(`${this.name} says: ${n}`)
  }
}
const p1 = new Person('Alice', 30)
p1.speak(42)

如何定义对象

typescript 复制代码

// 定义一个对象类型，包含 name(只读)、age、sex(可选 )和 run 方法
interface ObjectTypes {
  readonly name: string
  age: number
  sex?: string
  run: () => void
}

const user: ObjectTypes = {
  name: '张三',
  age: 18,
  run() {
    console.log('running')
  }
}

如何定义函数

typescript 复制代码

// 定义一个函数类型接口,接收a和b两个参数,返回一个数字类型的结果
interface FunTypes {
  (a: number, b: number): number
}

const add: FunTypes = (a, b) => a + b

如何混合定义，既定义函数，又定义对象

typescript 复制代码

interface FunTypes {
  // 1. 函数签名（让它能调用）
  (a: number, b: number): number

  // 2. 对象属性（让它能当对象用）
  name: string
  version: number
  run(): void
}
// 使用
const fun: FunTypes = (a, b) => a + b

// 像对象一样加属性
fun.name = "加法函数"
fun.version = 1.0
fun.run = () => console.log("运行中")

// 像函数一样调用
console.log(fun(1, 2)) // 3

如何interface继承

typescript 复制代码

// 定义接口之间的继承
interface Person{
  name: string
  age: number
}
interface Employee extends Person{
  sex: string
}
const user: Employee = {
  name: '张三',
  age: 30,
  sex: '男'
}

如何接口自动合并

typescript 复制代码

// 定义接口之间的可合并
interface Person{
  name: string
  age: number
}
interface Person{
  sex: string
}

const user: Person = {
  name: '张三',
  age: 30,
  sex: '男'
}

interface和type的区别

相同点
都可以用于定义对象结构，两者在许多场景中可以互换
不同点
interface，更专注与定义对象和类的结构，支持继承，合并
type,可以定义类型别名，联合类型，交叉类型，但不支持继承和自动合并

泛型

泛型允许使用类型参数来表示未指定的类型，这些参数在具体使用时，才能指定具体的类型
泛型能让同一段代码适用于多种类型，同时仍然保持类型的安全性
类似，如下代码中就是泛型，不一定非叫T，可以叫其它的，

typescript 复制代码

// 当年不知道你的入参是什么类型，所以先用泛型T来表示，等你告诉我了，我再帮你完善这个函数的实现
function getFuns<T>(params: T) {
  console.log(params)
}
// getFuns(1)
// getFuns('乞力马扎罗')
// getFuns({ name: '张三', age: 18 })

getFuns<number>(1)
getFuns<string>('乞力马扎罗')
getFuns<{ name: string; age: number }>({ name: '张三', age: 18 })

// 泛型可以有多个
function getSumFuns<T, U>(params: T, otherParam: U) {
  console.log(params,otherParam)
}
getSumFuns<number, string>(1, 'hello')
getSumFuns<number, boolean>(1, true)

泛型接口

typescript 复制代码

// 当年不知道你的入参是什么类型，所以先用泛型T来表示，等你告诉我了，我再帮你完善这个函数的实现
interface ObjType<T> {
  code: number
  message: string
  data: T
}

let obj: ObjType<string> = {
  code: 0,
  message: 'Success',
  data: 'Hello, World!',
}
let obj2: ObjType<number> = {
  code: 0,
  message: 'Success',
  data: 42,
}
// 泛型也可以是接口
interface JobInfo {
  name: string
  value: string
}
let obj3: ObjType<JobInfo> = {
  code: 0,
  message: 'Success',
  data:{
    name: '前端开发',
    value: 'frontend'
  },
}

类型声明文件

类型声明文件是TypeScript中的一种特殊文件，通常以.d.ts作为扩展名
主要作用是为现有的javaScript代码提供类型信息
使typeScript能够在使用这些js库或者模块的时候进行类型检查和提示

新建demo.js

typescript 复制代码

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

新建demo.d.ts

typescript 复制代码

declare function add(a:number, b:number): number

declare function subtract(a:number, b:number): number

export { add, subtract }

index.ts使用

typescript 复制代码

import { add, subtract } from './demo.js'
const x = add(5, 3) // 8
const y = subtract(5, 3) // 2
console.log(`add(5, 3) = ${x}`)
console.log(`subtract(5, 3) = ${y}`)