Typescript在自定义CSS样式中的使用

最新推荐文章于 2024-03-18 00:33:23 发布

CherishTaoTao

最新推荐文章于 2024-03-18 00:33:23 发布

阅读量1.4k

点赞数

分类专栏： JS基础知识文章标签： css typescript javascript

本文链接：https://blog.csdn.net/CherishTaoTao/article/details/129498218

版权

JS基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何利用TypeScript的keyof和Record等类型工具，来限制自定义CSS样式对象的结构，确保每个rule的key属于预定义的styleName数组，并且value是CSSStyleDeclaration的Partial类型，以此增强代码的类型安全性和可维护性。

摘要由CSDN通过智能技术生成

文章目录

前言
一、使用情景
二、开始编辑
- 1.创建css的rule的内容范围
- 2.创建每个style sheet的校验
三、完整数据

前言

记录typescript对自定义CSS样式的用法：
参考链接

一、使用情景

以对象的形式书写CSS样式
限制一个style sheet中rule数量以及名称
Partial以及Record使用

二、开始编辑

1.创建css的rule的内容范围

// <const>只读的
const styleName = <const>['form', 'lang', 'action', 'input', 'center'];

2.创建每个style sheet的校验

2.1

限定每个rull中的key的范围，即以styleName的内容作为对象的key
Keys：styleName[0]则表示’form’

//限定每个rull中的key的范围，即以styleName的内容作为对象的key
//Keys：styleName[0]则表示'form'
export type Keys = typeof styleName[number];

2.2

Record表示拥有多个格式相同类似的内容，Partial表示为可选的。
Record<Keys,Partial> 表示Istyle的内容格式为：
以styleName中的某一项为key，CSSStyleDeclaration为value组成的序列对象

//Record表示拥有多个格式相同类似的内容，Partial表示为可选的。
//Record<Keys,Partial<CSSStyleDeclaration>> 表示Istyle的内容格式为：
//以styleName中的某一项为key，CSSStyleDeclaration为value组成的序列对象
export type Istyle = Partial<Record<Keys, Partial<CSSStyleDeclaration>>>;

2.3

//示例
export const logo = {
  form: {
    width: '25%',
    minWidth: '200px',
    maxWidth: '400px',
    margin: 'auto',
  },
  lang: { textAlign: 'right' },
  action: {
    textAlign: 'center',
    marginTop: '60px',
  },
  input: {
    borderRadius: '4px',
    border: '1px solid black',
  },
};

三、完整数据

// export enum StyleName { form = "form", lang = "lang", action = "action", input = "input", }
const styleName = <const>['form', 'lang', 'action', 'input', 'center'];
export type Keys = typeof styleName[number];
export type Istyle = Partial<Record<Keys, Partial<CSSStyleDeclaration>>>;

export const logo = {
  form: {
    width: '25%',
    minWidth: '200px',
    maxWidth: '400px',
    margin: 'auto',
  },
  lang: { textAlign: 'right' },
  action: {
    textAlign: 'center',
    marginTop: '60px',
  },
  input: {
    borderRadius: '4px',
    border: '1px solid black',
  },
};
export const lt: Istyle = {
  form: {
    width: '25%',
    minWidth: '200px',
    maxWidth: '400px',
    margin: 'auto',
    marginTop: '-20px',
  },
  lang: { textAlign: 'right' },
  action: {
    textAlign: 'center',
  },
  input: {
    borderRadius: '4px',
    border: '1px solid #0084c0',
  },
};
export const nologo: Istyle = {
  form: {
    width: '25%',
    minWidth: '200px',
    maxWidth: '400px',
    margin: 'auto',
  },
  lang: { textAlign: 'right' },
  action: {
    textAlign: 'center',
  },
  input: {
    borderRadius: '4px',
    border: '1px solid black',
  },
};

export const allStyle = { logo, lt, nologo };