در اینجا نحوه تایپ ویژگی ها و مقادیر CSS خود را مشاهده می کنید.

در این مقاله ، شما می آموزید که چگونه می توان از CSSTYPE برای تایپ ویژگی ها و مقادیر CSS خود استفاده کرد.

من پیدا کردم csstype وابستگی را در بسته Inferno.Json تایپ کنید.

"dependencies": {
    "csstype": "^3.1.3",
    "inferno-vnode-flags": "9.0.3",
    "opencollective-postinstall": "^2.0.3"
}

من این بسته را در NPM جستجو کردم و این بسته CSSTYPE را پیدا کردم.

تعاریف TypeScript و Flow برای CSS ، تولید شده توسط داده های MDN. این امکان را فراهم می کند که ویژگی ها و مقادیر CSS را بررسی کنید.

نمونه

import type * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};

MDN/Data مخزن است که حاوی داده های کلی برای فن آوری های وب است.

در زیر یادداشتی از https://github.com/mdn/data readme.md انتخاب شده است

توجه: ما در حال استهلاک هستیم mdn/data بسته بندی به نفع w3c/webrefبشر اگر به این پروژه وابسته هستید ، در بحث های GitHub در جامعه ما به ما اطلاع دهید. ممنون

من CSSTYPE را در پایگاه Code Inferno جستجو کردم و نتایج جستجوی زیر را پیدا کردم.

csstype فقط در 3 مکان یافت می شود.

1. بسته

2. Core/Types.ts

3. تست/styles.spec.tsx

من علاقه مند به یادگیری بیشتر نحوه استفاده از CSSTYPE در Core/Types.ts هستم.

در زیر در Core/Types.ts در L9 وارد شده است:

import type { PropertiesHyphen } from 'csstype';

و از این Propertieshyphen به عنوان نوعی در رابط به نام HTMlatTributes همانطور که در زیر آمده است استفاده می شود:

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
  ...
  style?: PropertiesHyphen | string | null | undefined | CssVariables;
}

اطلاعات زیر را از CSSTYPE در مورد PropertiesHyphen پیدا کردم:

خواص Hyphen Cased (Kebab Cased) در ارائه شده است CSS.PropertiesHyphen وت CSS.PropertiesHyphenFallbackبشر نیست نه به طور پیش فرض در CSS.Propertiesبشر برای اجازه هر دوی آنها ، می توانید به سادگی با آن گسترش دهید CSS.PropertiesHyphen /و CSS.PropertiesHyphenFallbackبشر

import type * as CSS from 'csstype';

interface Style extends CSS.Properties, CSS.PropertiesHyphen {}

const style: Style = {
  'flex-grow': 1,
  'flex-shrink': 0,
  'font-weight': 'normal',
  backgroundColor: 'white',
};

سلام ، نام من رامو ناراسینگا است. من پروژه های بزرگ منبع باز را مطالعه می کنم و در مورد معماری پایگاه کد آنها و بهترین شیوه ها مطالب ایجاد می کنم و آن را از طریق مقاله ، فیلم به اشتراک می گذارم.

ویژگی هایی مانند Changesets ، احراز هویت supabase را در پروژه بعدی خود با استفاده از آن پیکربندی کنید فکر کنبشر

ایمیل – ramu@thinkthroo.com

GitHub من-https://github.com/ramu-narasinga

وب سایت من – https://ramunarasinga.com

کانال یوتیوب من-https://www.youtube.com/@ramu-narasinga

پلت فرم یادگیری – https://thinkthroo.com

معماری پایگاه کد – https://app.thinkthroo.com/architecture

بهترین روشها-https://app.thinkthroo.com/best-practices

پروژه های درجه تولید-https://app.thinkthroo.com/production-prade-projects

1. https://www.npmjs.com/package/csstype

2. https://github.com/infernojs/inferno/blob/master/packages/inferno/package.json#l77

3. https://github.com/mdn/data