Javascript TypeScript中的部分函数输入

我想要一个接受部分输入的函数。但是，它包含一个名为

style

的变量，其值只能是

outline

或

fill

等：

export type TrafficSignalStyle = 'outline' | 'fill'
let style: TrafficSignalStyle

但问题是，当我执行

部分

时，它会将

TrafficSignalStyle

转换为

的“大纲”|“填充”|未定义

，这不是我想要的

我想要一个单独的函数，它接受3个输入，即

样式

，

颜色

，

位置

&只更改传递的任何输入。因此，如果我传递

style

like

updateRafficSignal（{style:e.target.value as TrafficSignalStyle}）

，那么它将保持

颜色

和

位置

与以前相同

以下是相关文件的外观：

类型.ts

导出类型TrafficSignalButtons={
关闭：字符串
最小化：字符串
最大化：字符串
}
导出类型TrafficSignalPosition={
结束：点
最小化：点
最大化：点
}
导出类型TrafficSignalStyle='outline'|'fill'
导出类型流量信号={
样式：交通信号样式
颜色：数组
位置：交通信号位置
}
导出接口IFrameItStore{
交通信号：交通信号
UpdaterAfficSignal（交通信号：部分）：无效
}

FrameItStore.ts

从'mobx'导入{action，makeObservable，observable}
从“./types”导入类型{IFrameItStore，TrafficSignal}
导出类FrameItStore实现IFrameItStore{
交通信号：交通信号={
风格：'大纲'，
颜色：[
{
关闭：“#EF4444”，
最小化：“#FBBE25”，
最大化：'#49DE80'，
},
{
关闭：“黑色”，
最小化：“蓝色”，
最大化：“橙色”，
},
],
职位：{
闭合：{x:100+20，y:20}，
最小化：{x:100+2*20，y:20}，
最大化：{x:100+3*20，y:20}，
},
}
构造函数（）{
使可观察到（这个{
交通信号：可观测，
UpdateRafficSignal:action.bound，
})
}
updateTrafficSignal（交通信号：部分）{
if（trafficSignal.style）this.trafficSignal.style=trafficSignal.style
if（trafficSignal.colors）this.trafficSignal.colors=trafficSignal.colors
if（trafficSignal.position）this.trafficSignal.position=trafficSignal.position
}
}

Options.tsx

import*作为来自“React”的React
从“mobx react”导入{observer}
从“/store”导入{useFrameItStore}
从“./types”导入类型{Padding，TrafficSignal，TrafficSignalStyle}
接口IProps{
类名？：字符串
}
导出常量选项=观察者（（道具：IProps）=>{
const frameItStore=useFrameItStore（）
const trafficSignal:trafficSignal=frameItStore.trafficSignal
常量padding:padding=frameItStore.padding
const updaterAfficSignal:（交通信号：部分）=>void=
frameItStore.updateRafficSignal
const updatePadding：（padding:padding）=>void=frameItStore.updatePadding
返回(
交通灯样式：
{
const style=e.target.value作为TrafficSignalStyle
updateRafficSignal（{style}）
}}
>
轮廓
填满
)
})

然而，我得到了一个错误的说法

TS2322:Type'（trafficSignal:trafficSignal）=>void'不可分配给Type'（trafficSignal:Partial）=>void'。

参数“trafficSignal”和“trafficSignal”的类型不兼容。 类型“Partial”不可分配给类型“TrafficSignal”。 属性“样式”的类型不兼容。 类型“outline”|“fill”| undefined”不可分配给类型“TrafficSignalStyle”。 类型“未定义”不可分配给类型“TrafficSignalStyle”

这是有道理的，但是我如何只传递一个参数&只改变那个参数&而不是其他参数

如果我删除

部分

，那么我得到

类型为“{style:TrafficSignalStyle；}”的参数不能分配给类型为“TrafficSignal”的参数。 类型“{style:TrafficSignalStyle；}”缺少类型“TrafficSignal”中的以下属性：颜色、位置

这也是有道理的。但还是不能解决我的问题

我想要一个函数来更改所有3个参数&一次只传递1个参数

我该怎么做呢？

如上所述，TypeScript中没有这样的功能，所以我在不分解结构的情况下传递了参数，并将其设置为可选的，这样就可以了

以下是我所做的更改：

类型.ts

导出接口IFrameItStore{
UpdaterAfficSignal(
样式？：交通信号样式，
颜色？：数组，
位置？：交通信号位置
)：无效
}

FrameItStore.ts

从'mobx'导入{action，makeObservable，observable}
导入类型{
IFrameItStore，
交通信号，
交通信号按钮，
交通信号位置，
交通信号样式，
}来自“./类型”
导出类FrameItStore实现IFrameItStore{
交通信号：交通信号={
风格：'大纲'，
颜色：[
{
关闭：“#EF4444”，
最小化：“#FBBE25”，
最大化：'#49DE80'，
},
{
关闭：“黑色”，
最小化：“蓝色”，
最大化：“橙色”，
},
],
职位：{
闭合：{x:100+20，y:20}，
最小化：{x:100+2*20，y:20}，
最大化：{x:100+3*20，y:20}，
},
}
构造函数（）{
使可观察到（这个{
交通信号：可观测，
UpdateRafficSignal:action.bound，
})
}
UpdaterAfficSignal(
样式？：交通信号样式，
颜色？：数组，
位置？：交通信号位置
) {
如果（样式）this.trafficSignal.style=样式
if（colors）this.trafficSignal.colors=颜色
if（位置）this.trafficSignal.position=位置
}
}

Options.tsx

import*作为来自“React”的React
从“mobx react”导入{observer}
导入{useF
export type TrafficSignalButtons = {
    close: string
    minimize: string
    maximize: string
}

export type TrafficSignalPosition = {
    close: Point
    minimize: Point
    maximize: Point
}

export type TrafficSignalStyle = 'outline' | 'fill'

export type TrafficSignal = {
    style: TrafficSignalStyle
    colors: Array<TrafficSignalButtons>
    position: TrafficSignalPosition
}

export interface IFrameItStore {
    trafficSignal: TrafficSignal
    updateTrafficSignal(trafficSignal: Partial<TrafficSignal>): void
}

import { action, makeObservable, observable } from 'mobx'

import type { IFrameItStore, TrafficSignal } from './types'

export class FrameItStore implements IFrameItStore {
  trafficSignal: TrafficSignal = {
    style: 'outline',
    colors: [
      {
        close: '#EF4444',
        minimize: '#FBBE25',
        maximize: '#49DE80',
      },
      {
        close: 'black',
        minimize: 'blue',
        maximize: 'orange',
      },
    ],
    position: {
      close: { x: 100 + 20, y: 20 },
      minimize: { x: 100 + 2 * 20, y: 20 },
      maximize: { x: 100 + 3 * 20, y: 20 },
    },
  }

  constructor() {
    makeObservable(this, {
      trafficSignal: observable,
      updateTrafficSignal: action.bound,
    })
  }

  updateTrafficSignal(trafficSignal: Partial<TrafficSignal>) {
    if (trafficSignal.style) this.trafficSignal.style = trafficSignal.style
    if (trafficSignal.colors) this.trafficSignal.colors = trafficSignal.colors
    if (trafficSignal.position) this.trafficSignal.position = trafficSignal.position
  }
}

import * as React from 'react'
import { observer } from 'mobx-react'

import { useFrameItStore } from './store'
import type { Padding, TrafficSignal, TrafficSignalStyle } from './types'

interface IProps {
    className?: string
}

export const Options = observer((props: IProps) => {
    const frameItStore = useFrameItStore()

    const trafficSignal: TrafficSignal = frameItStore.trafficSignal
    const padding: Padding = frameItStore.padding

    const updateTrafficSignal: (trafficSignal: Partial<TrafficSignal>) => void =
        frameItStore.updateTrafficSignal
    const updatePadding: (padding: Padding) => void = frameItStore.updatePadding

    return (
        <div>
            <h2>Traffic Signal Style:</h2>
            <select
                value={trafficSignal.style}
                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                    const style = e.target.value as TrafficSignalStyle
                    updateTrafficSignal({ style })
                }}
            >
                <option value="outline">Outline</option>
                <option value="fill">Fill</option>
            </select>
        </div>
    )
})

  TS2322: Type '(trafficSignal: TrafficSignal) => void' is not assignable to type '(trafficSignal: Partial<TrafficSignal>) => void'.

export interface IFrameItStore {
    updateTrafficSignal(
        style?: TrafficSignalStyle,
        colors?: Array<TrafficSignalButtons>,
        position?: TrafficSignalPosition
    ): void
}

import { action, makeObservable, observable } from 'mobx'
import type {
  IFrameItStore,
  TrafficSignal,
  TrafficSignalButtons,
  TrafficSignalPosition,
  TrafficSignalStyle,
} from './types'

export class FrameItStore implements IFrameItStore {
  trafficSignal: TrafficSignal = {
    style: 'outline',
    colors: [
      {
        close: '#EF4444',
        minimize: '#FBBE25',
        maximize: '#49DE80',
      },
      {
        close: 'black',
        minimize: 'blue',
        maximize: 'orange',
      },
    ],
    position: {
      close: { x: 100 + 20, y: 20 },
      minimize: { x: 100 + 2 * 20, y: 20 },
      maximize: { x: 100 + 3 * 20, y: 20 },
    },
  }

  constructor() {
    makeObservable(this, {
      trafficSignal: observable,
      updateTrafficSignal: action.bound,
    })
  }
  updateTrafficSignal(
    style?: TrafficSignalStyle,
    colors?: Array<TrafficSignalButtons>,
    position?: TrafficSignalPosition
  ) {
    if (style) this.trafficSignal.style = style
    if (colors) this.trafficSignal.colors = colors
    if (position) this.trafficSignal.position = position
  }
}

import * as React from 'react'
import { observer } from 'mobx-react'

import { useFrameItStore } from './store'
import type { TrafficSignal, TrafficSignalStyle, IFrameItStore } from './types'

interface IProps {
  className?: string
}

export const Options = observer((props: IProps) => {
  const frameItStore = useFrameItStore()

  const trafficSignal: TrafficSignal = frameItStore.trafficSignal

  const updateTrafficSignal: IFrameItStore['updateTrafficSignal'] =
    frameItStore.updateTrafficSignal

  return (
    <div>
      <h2>Traffic Signal Style:</h2>
      <select
        value={trafficSignal.style}
        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
          const style = e.target.value as TrafficSignalStyle
          updateTrafficSignal(style)
        }}
      >
        <option value="outline">Outline</option>
        <option value="fill">Fill</option>
      </select>
    </div>
  )
})