ts实战系列五：object类型和函数

最新推荐文章于 2024-06-02 21:54:35 发布

Sunny_媛

最新推荐文章于 2024-06-02 21:54:35 发布

阅读量329

点赞数 1

文章标签： javascript 前端开发语言软件工程系统架构架构性能优化

本文链接：https://blog.csdn.net/m0_68635815/article/details/136121897

版权

本文探讨了接口在JavaScript中的作用，如何作为规范描述对象的属性和方法，以及鸭子类型的概念。通过类的继承和接口的使用，解决了共享特性的复用问题。同时，函数作为第一等公民，被深入解析，包括函数声明、函数表达式和泛型接口的使用示例。

摘要由CSDN通过智能技术生成

5. object类型:

(1). interface接口:

①. 不是一种类型.

②. 更像规范与契约,规定一个对象长成什么样子.

(2). 对对象的shape(形状:属性、方法)进行描述:

①. 对类(class)进行抽象.

②. Duck Typing(鸭子类型):
    a. 当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子,那么这只鸟就可以被称为鸭子.
    b. 并不关心对象是什么类型,到底是不是鸭子,只关心行为.

③. 举例:
    interface IPerson {
        readonly id: number,   // 只读属性,只能在创建时被赋值
        name: string;
        age?: number;          // ?表示可选
    }
    let person: Person = {
        id: 123,
        name: 'david',
        age: 20
    }
    person.id = 234;           // 报错,定义了readonly

(3). 对类的形状进行描述:

①. 解决了什么?
    a. 不同类之间会有共用的特性,不太好用子类继承父类来实现.
    b. 可以把特性提取成接口,用implements来实现.

②. 举例:
    interface Radio {
        switchRadio(type: string): void;
    }
    interface Battery {
        checkBattery();
    }
    interface RadioBattery extends Radio {
        switchRadio(type: string): void;
    }
    // 实现
    class Car implements Radio {
        switchRadio() {}
    }
    class Phone implements Radio, Battery {
        switchRadio() {}
        checkBattery() {}
    }
    class Test implements RadioBattery {
        switchRadio() {}
        checkBattery() {}
    }

6. 函数:

①. 可以做为参数、存入数组、可以被另外一个函数返回,可以赋值给另外一个变量.

②. 函数声明:
    // 直接声明参数和返回值类型
    function add(x: number, z?: number = 10): number {  // 有些不写返回值类型,是因为有类型推断.
        return x;
    }

③. 函数表达式:
    const add = function(x: number, z?: number = 10): number {
        return x;
    }
    const add2 string = add;    // 报错,函数类型是(x: number, z?: number) => number,这里的=>不是箭头函数.

④. 直接声明函数类型:
    export const useMount = (fn: () => void) => {  // () => void,没有参数,什么也不返回
        useEffect(() => {
            fn();
        }, []);
    };
    const isFalsy: (value: any) => boolean = (value) => {
        return value === 0 ? true : !!value;
    };

(1). interface描述如上函数:

interface IPlus {
    (a: number, b: number): number
}
function plus(a: number, b: number): number {
    return a + b;
}
const a: IPlus = plus(1, 2)

(2). interface描述改进为泛型定义:

interface IPlus<T> {
    (a: T, b: T): T
}
function plus(a: number, b: number): number {
    return a + b;
}
const a: IPlus<number> = plus(1, 2)
function con(a: string, b: string): string {
    return a + b;
}
const b: IPlus<string> = plus('a', 'b')      // 传入不同的泛型值,可以适配不同的类型