TypeScript reuse object's props All In One

export {};

const log = console.log;

// type CSSProps = { [prop: string]: CSSProps };
// type CSSProps = CSSProps[];
type CSSProps = number | string | { [prop: string]: CSSProps } | CSSProps[];

type CSSStyle = Record<string, CSSProps>
// type CSSStyle = {
//   [x: string]: CSSProps;
// }


const cssStyleObject1: CSSProps = {
  color: "#0f0",
  background: "#000",
  width: 100,
  arr: [
    "red",
    "green",
    "blue",
  ],
  obj: {
    "font-size": "12px",
    "font-weight": 600,
  },
}

const cssStyleObject2 = {
  color: "#0f0",
  background: "#000",
  width: 100,
  arr: [
    "red",
    "green",
    "blue",
  ],
  obj: {
    "font-size": "12px",
    "font-weight": 600,
  },
} satisfies CSSProps;

// ✅ 正确的属性，有智能提示
log(cssStyleObject2.arr)
// (property) arr: string[]

export {};

const log = console.log;

// type CSSProps = { [prop: string]: CSSProps };
// type CSSProps = CSSProps[];
type CSSProps = number | string | { [prop: string]: CSSProps } | CSSProps[];

type CSSStyle = Record<string, CSSProps>
// type CSSStyle = {
//   [x: string]: CSSProps;
// }


const cssStyleObject1: CSSProps = {
  color: "#0f0",
  background: "#000",
  width: 100,
  arr: [
    "red",
    "green",
    "blue",
  ],
  obj: {
    "font-size": "12px",
    "font-weight": 600,
  },
}


const cssStyleObject2 = {
  ...cssStyleObject1,
} satisfies CSSProps;

// ❌ 不好使，无智能提示
log(cssStyleObject2.arr)
// CSSProps

https://www.typescriptlang.org/play

(

标签：CSSProps,arr,TypeScript,const,reuse,object,font,type,string
From： https://www.cnblogs.com/xgqfrms/p/17067470.html