Typescript - 如何避免在类型数组上重复相同的属性？

问题描述

在下面的示例中，我有一组 ShadowStyle -> 表示为类型 ShadowGroup，其项目都是 ShadowStyle 的实例（style 属性已设置继承外部库的 ShadowEffect 类型）。

问题是，ShadowStyle.style 中有一些属性总是相同的（标记如下）。

我的问题是：如何避免为数组中的每个项目重写相同的属性/值？

interface ShadowStyle {
    name: string;
    style: ShadowEffect; // type inherited from lib
}

type ShadowGroup = Array<MotifShadowStyle>;

const MyShadowGroup: ShadowGroup = [
    {
        name: 'Large',style: {
            type: 'DROP_SHADOW',// same for all items
            visible: true,// same for all items
            blendMode: 'norMAL',// same for all items
            color: {
                r: 0,g: 0,b: 0,a: 0.14,},offset: {
                x: 0,y: 8,radius: 10,spread: 1,{
        name: 'Medium',//...
    }
];

解决方法

定义一个通用样式变量，然后通过扩展运算符重用它：

const commonDefaultStyles = {
  type: 'DROP_SHADOW',// same for all items
  visible: true,// same for all items
  blendMode: 'NORMAL' // same for all items
}


const MyShadowGroup: ShadowGroup = [
    {
        name: 'Large',style: {
            ... commonDefaultStyles,color: {
                r: 0,g: 0,b: 0,a: 0.14,},offset: {
                x: 0,y: 8,radius: 10,spread: 1,{
        name: 'Medium',//...
    }
];

对扩展运算符的引用：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax