前端基础技术回顾和巡礼

TypeScript 基础和进阶

安装

npm install -g typescript

编译

tsc helloworld.ts

数据类型

最新的 ECMAScript 标准定义了 8 中数据类型：

1. 原始类型
   1. Boolean
   2. Null
   3. Undefined
   4. Number
   5. Bigint
   6. String
   7. Symbol
2. Object

类型定义

let a: any = 123 // 所有类型都可以
let b: boolean = false
let n: null = null
let u: undefined = undefined
let num: number = 10
let big: bigint = 10
let s: string = 'text'
let sym: symbol = Symbol()

let numbers: number[] = [1, 2, 3]
let tuple: [string, number] = ['str', 10]

function add1(x: number, y: number, z?: number): number {
    return x + y
}

const add2 = (x: number, y: number): number => {
    return x + y
}

const add3: (x: number, y: number) => number = add2

interface

interface | duck typing , 即只要满足它的条件，不管你是什么类型都可以复合条件，详情请看 LikeArray 和 FunctionWithProps

interface Person {
    readonly id: number; // 不可变
    name: string;
    age?: number;
}

let viking: Person = {
    id: 1,
    name: 'UOrb',
    age: 20
}


interface ISum {
    (x: number, y: number): number
}

const sum = (x: number, y: number): number {
    return x + y
}

cosnt sum2: ISum = sum


interface RandomMap {
    [propName: string]: string;
}

const test: RandomMap = {
    a: 'hello',
    b: 'test',
    c: 'word'
}


interface LikeArray {
    [index: number]: string
}

// 可以使用数组赋值和通过下标获取值，但是无法访问方法例如：push 等
const likeArray: LikeArray = ['1', '2', '3'] 


interface FunctionWithProps {
    (x: number): number;
    name: string;
}

const a: FunctionWithProps = (x: number) => {
    return x
}
a.name = 'abc'

类和接口

// 类的基本定义
class Animal {
    // 修饰符三种：public: 公共的; private: 私有的(子类不能访问); protected: 私有的(子类可以访问);
    public name: string;
    // private _name: string;
    // protected __name: string;
    constructor(name: string) {
        this.name = name
    }

    run() {
        return `${this.name} is running`
    }
}

const snake = new Animal('lily')
snake.run()

// 继承
class dog extends Animal {
    bark() {
        return `${this.name} is barking`
    }
}


// 类是合约绑定的效果，类必须要提供实现(implements)的 interface 的属性和方法
// 可以灵活的约定没有联系类之间有共同方法和属性时候的实现
interface ClockInterface {
    currentTime: number;
    alert(): void;
}

// class 有两种类型，一种是 静态类型 一种是 实例类型
// 通过 implements 约定是实例类型
// 想要约定 静态类型 ，需要进行组合约定，如下
interface ClockStatic {
    new (h: number, m: number): void;
    time: number;
}


interface GameInterface {
    play(): void;
}

const clock:ClockStatic = class Clock implements ClockInterface {
    constructor(h: number, m: number): void {}
    static time = 12
    currentTime: number = 123
    alert() {}
}

class CellPhone implements ClockInterface, GameInterface {
    currentTime: number = 123
    alert() {}
    play() {}
}

泛型

function echo<T>(arg: T): T {
    return arg
}

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]]
}

interface GithubResp {
    name: string;
    count: number;
}

interface CountryResp {
    name: string;
    area: number;
    population: number;
}

function withAPI<T>(url: string): Promise<T> {
    return fetch(url).then(resp => resp.json())
}

withAPI<GithubResp>('github.user').then(resp => { })
withAPI<CountryResp>('country.resp').then(resp => { })


type keys = keyof CountryResp
type NameType = CountryResp['name']
type Test = {
    [key in keys]: any
}
type Test = {
    [p in keys]?: CountryResp[p]
}

// 泛型约束，约束传入的 T 必须要有 length 这个属性
interface IWithLength {
    length: number
}

function echoWithArr<T extends IWithLength>(arg: T): T {
    return arg.length
}

type NnoType<T> = T extends null | undefined ? never : T


declare var jQuery: (selector: string) => any


type HTTPMethod = 'GET' | 'POST'
declare function myFetch<T = any> (url: string, method: HTTPMethod, data?: any): Promise<T>
declare namespace myFetch {
    const get: <T = any>(url: string) => Promise<T>;
    const post: <T = any>(url: string, data: any) => Promise<T>;
}

export = myFetch

Vue3 新特性的巡礼

新特性：

1. 支持按需引用，大大的减少了打包的体积，以及优化 vnode 的算法减少了计算时间和内存占用。
2. 有了 Composition API 可以对代码的可读性和复用性大大的提高了

作业 clipboard.js 库写类型文件

type Selector = string | Element 
type OnStatus = 'success' | 'error'
interface OnEvent {
    action: string
    text: string
    trigger: Element
    clearSlection(): void
}
interface Options {
    target?: (trigger: Element): Element
    text?: (trigger: Element): string
    container?: Element
}
declare class ClipboardJS {
    constructor(selector： Selector, options?: Options)
    on(status: OnStatus, hander: (e: OnEvent ) => void): this
    destroy(): void
}