每日学习（2023-10-5）

一. 关于对象的规则设置

1.对象冻结：

使用Object.freeze(obj)来对接obj对象。这时的obj为只读，不可修改，添加，删除属性。

使用Object.isFrozen(obj)来检测这个对象是否为冻结对象。

2.对象密封：

使用Object.seal(obj)来密封对象obj。这时的obj，只可修改属性，不可添加，删除，劫持属性。

使用Object.isSeal(obj)来检测这个对象是否为密封对象。

3.不可拓展

使用Object.preventExtensions(obj)来使对象obj不可拓展。这时的obj，只可修改，删除，劫持属性，不可添加属性。

使用Object.isEXtensible(obj)来检测这个对象是否为不可拓展 对象。

二.react 渲染劫持

什么是渲染劫持：控制组件从另一个组件输出的能力。

通常为高阶组件（HOC）通过包装，注入额外的道具或进行其它更改，导致渲染逻辑的更改;也就是说高阶组件控制了一个组件的渲染结果。

三.为React开发者提供的7种Typescript实用类型

为React开发者提供的7种Typescript实用类型 - 掘金 (juejin.cn)

类型脚本。对React最有用的五种实用类型 - 掘金 (juejin.cn)

DRY 原则 - 简书 (jianshu.com)

泛型 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

1.Pick:在现有的对象类型或接口的基础上构建一个新的对象类型，它接受两个参数，现有的对象类型或接口，以及你需要的属性。

如图

声明a接口，使用Pick，根据a接口构建新的类型b，b中只有选择的a1，a3，a6，

interface a {
  a1:number;
  a2:number;
  a3:string;
  a4:string;
  a5:boolean;
  a6:boolean;
}
type b = Pick<a, 'a1'|'a3'|'a6'>
const c : b = {
  a1:123,
  a3:"string",
  a6:false,
}

控制台输出

TypeScript 实用工具类型之 Pick 类型_typescript pick-CSDN博客

2.Omit

与Pick的功能基本相反，在现有的原对象类型或接口上，删除一些属性构建一个新的对象类型。

如图。

声明a接口，使用Omit，根据a接口构建新的类型d，d中没有属性a2，a4。

interface a {
    a1:number;
    a2:number;
    a3:string;
    a4:string;
    a5:boolean;
    a6:boolean;
}
type d = Omit<a, 'a2'|'a4'>
const e :d={
    a1: 0,
    a3: "",
    a5: false,
    a6: false
}

控制台输出

3.Partial

根据原对象类型或接口构建一个新的对象类型，新的对象类型的属性中的所有属性都被设置为可选。

如图

声明a接口，使用Partial，根据a接口构建新的类型d，d具有a的所有属性，但是所有属性全部设置为可选属性。

interface a {
    a1:number;
    a2:number;
    a3:string;
    a4:string;
    a5:boolean;
    a6:boolean;
}
type f = Partial<a>
const g :f={}

4.NonNullable

根据原对象类型和接口，构建一个没有null和undefined的新类型。

如图

声明Number类型，使用NonNullable，根据Number类型构建新的类型d，d的属性不含有null，undefined。

type Number = "int"|"double"|undefined|number|0

/**
 * realNumber = "int"|"double"|0
 */
type realNumber = NonNullable<Number>

5.React.ComponentProps

用于提取组件类的Props类型

如图

利用React.ComponentProps将PropsDemo的props类型提取出来，构建了propsOne类型。

const PropsDemo = ({
                       numberOne,
                       numberTwo,
                       stringOne,
                       stringTwo,
                   }: {
    numberOne: number,
    numberTwo: number,
    stringOne: string,
    stringTwo: string,
}) =>(
    <p style={{
        textAlign:"center"
    }}>
        numberOne : {numberOne}
        <br/>
        numberTwo : {numberTwo}
        <br/>
        stringOne : {stringOne}
        <br/>
        stringTwo : {stringTwo}
    </p>
)


type propsOne = React.ComponentProps<typeof PropsDemo>

6.React.MouseEventHandler

TS_React:类型化EventHandler - 掘金 (juejin.cn)

MouseEventHandler一般用于函数声明，新手在声明事件时，通常会把event直接声明为any。

如下图，一个点击事件的props通常声明为any。

const onClickCount = (event:any) =>{
        console.log(event)
    }

但是我们可以通过MouseEventHandler来函数声明这时的event就不需要声明类型。

也可以为props声明对应的Event事件对象类型 例如 onChangeState的event。

    const onClickCount:MouseEventHandler = (event) =>{
        console.log(event)
    }
    const onChangeCount:ChangeEventHandler = (event) =>{
        console.log(event)
    }
    const onChangeState = (event:ChangeEvent<HTMLInputElement>) =>{
        console.log(event)
    }

Event 事件对象类型

事件类型	解释
ClipboardEvent<T = Element>	剪切板事件对象
DragEvent<T =Element>	拖拽事件对象
ChangeEvent<T = Element>	Change事件对象
KeyboardEvent<T = Element>	键盘事件对象
MouseEvent<T = Element>	鼠标事件对象
TouchEvent<T = Element>	触摸事件对象
WheelEvent<T = Element>	滚轮时间对象
AnimationEvent<T = Element>	动画事件对象
TransitionEvent<T = Element>	过渡事件对象

7.React.PropsWithChildren

在开发中我们通常需要在外部给组件传递一个组件，我们通常需要去声明一个children?:React.ReactNode.

但是我们可以通过React.PropsWithChildren来构建一个自带children?:React.ReactNode属性的类型

如图