TypeScript satisfies Operator All In One

TypeScript satisfies Operator All In One

TypeScript 4.9 with the satisfies Operator

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2023-01-23
 * @modified
 *
 * @description TypeScript satisfies Operator All In One
 * @difficulty Easy
 * @ime_complexity O(n)
 * @space_complexity O(n)
 * @augments
 * @example
 * @link https://www.cnblogs.com/xgqfrms/p/17065138.html
 * @solutions
 *
 * @best_solutions
 *
 */

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 = {
  //
}

const cssStyleObject2 = {
  //
} satisfies CSSProps;

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;

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



// ✅ 正确的属性，无智能提示
log(cssStyleObject1.color)
// (index) __type[string]: CSSProps

// ❌ 不存在的属性，无错误提示 ❌
log(cssStyleObject1.notExsit)
// (index) __type[string]: CSSProps

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

// ❌ 不存在的属性，有错误提示
log(cssStyleObject2.notExsit)
// Property 'notExsit' does not exist on type '{ color: string; background: string; width: number; arr: string[]; obj: { "font-size": string; "font-weight": number; }; }'.(2339)

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html

AI & Coding

javascript

https://beta.openai.com/codex-javascript-sandbox

https://github.com/features/copilot

https://www.useblackbox.io/

https://www.deepcode.ai/

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://www.builder.io/blog/satisfies-operator

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---