Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Mitt learns source code to prepare foreword

Vue3 communication recommends using a small library: github.com/developit/m… Line 119 | volume to 200 bytes convenient and practical.

Since it’s so “simple “, I’m a little bit interested in what the source code looks like. Take a look at the source code.

PS: Small, but relatively few lines of code.

Key to learning its design ideas (key! The key! The key!) (Why don’t I have brain circuits? !).

Mitt warehouse

Mitt source repository: github.com/developit/m…

Tiny 200b functional event emitter / pubsub.

SRC /index.ts: mitt(…) {… }, put forward the shorthand as follows, let’s start to learn in detail:

// https://github.com/developit/mitt/src/index.ts
/**
 * Mitt: Tiny (~200b) functional event emitter / pubsub.
 * @name mitt
 * @returns {Mitt}* /
export default function mitt<Events extends Record<EventType.unknown> > (all? : EventHandlerMap
       ) :Emitter<Events> {
  // ...
  return {
    all,
    on(type, handler) {
      // ...
    },
    off(type, handler) {
      // ...
    },
    emit(type, handler) {
      // ...}}Copy the code

2. Mitt source learning pre knowledge check learning preparation: TypeScript

2.1 keyof

type Point = { x: number; y: string }
type P = keyof Point
type UnionType = Point[P] // number | string
Copy the code

2.2 the union type

type UnionType = string[] | number[]
const list1: UnionType = [1.2.3] // OK
const list2: UnionType = ['1'.'2'.'3'] // OK
const list3: UnionType = ['1'.2.3] // ERROR
// TS2322: Type '(string | number)[]' is not assignable to type 'UnionType'.
// Type '(string | number)[]' is not assignable to type 'string[]'.
// Type 'string | number' is not assignable to type 'string'.
// Type 'number' is not assignable to type 'string'.
type UnionType2 = (string | number) []const list4: UnionType2 = ['1'.2.3] // OK
Copy the code

2.3 Record tool functions

Record is often used to map all attribute values of one type to another and create a new type. Is it harder to understand? The code:

Take a look at the source code:

/** * Construct a type with a set of properties K of type T */ 
type Record<K extends keyof any, T> = { [P in K]: T; };
Copy the code

Common format: converts all attribute values in K to type T and returns the new type to proxyKType

type proxyKType = Record<K,T>
Copy the code
type fruitsGroup = 'apple' | 'pear' | 'orange';
interface IFruitInfo {
    color: string.ind: number,}type IFruits = Record<fruitsGroup, IFruitInfo>;

const fruitsInfo:IFruits = {
    apple: {color:'appleColor'.ind:1
    },
    pear: {color:'pearColor'.ind:2
    },
    orange: {color:'arangeColor'.ind:5}}Copy the code

2.4 the utility – types

Drill down into ts essential tool types

2.5 generics

class Person<T.K> {
  private name: T
  private age: K
  constructor(name: T, age: K) {
    this.name = name
    this.age = age
  }
}
const person1 = new Person<string.string> ('person1'.4) // ERROR
const person2 = new Person<string.number> ('person1'.4) // OK
Copy the code

Below: learning source code is not afraid!!

Will learn Mitt source code, because the number of lines is not 119, can be interpreted line by line!! Learning source code is not afraid!!