Chức năng gõ tốt hơn để tạo truy vấn phương tiện

Tôi đang theo dõi cùng với bài đăng này: https://medium.com/@samuelresua/easy-media-queries-in-styled-components-690b78f50053

Tôi đã tạo như sau trong Bản mô tả, nhưng đã phải dùng đến cách gõ anynhiều hơn tôi phải chắc chắn:

const breakpoints: ObjectMap<number> = {
  small: 767,
  medium: 992,
  large: 1200,
  extraLarge: 1240
};

export const media = Object.keys(breakpoints).reduce((acc: { [key: string]: (...args: any) => any }, label) => {
  acc[label] = (...args) => css`
     @media (min-width: ${breakpoints[label]}px) {
        ${css(...args as [any])};
     }
  `;
  return acc;
}, {});

Kết quả là, tôi không có trợ giúp trong IDE của mình khi tôi viết các kiểu trong các khối truy vấn phương tiện của mình:

styled.button<Props>`
  background: red; /* this must be a valid style */
  ${({ theme }) => theme.media.large`
      background: blue;
      foo: bar; /* this isn't caught */
   `

Bất cứ ai biết làm thế nào tôi có thể cải thiện mediachức năng của tôi ?

styled-componentscho phép bạn sử dụng các đối tượng cho các thuộc tính CSS cũng như các chuỗi mẫu và các đối tượng được trình biên dịch TypeScript hiểu rõ hơn nhiều. Thử cái này:

const breakpoints: ObjectMap<number> = {
  small: 767,
  medium: 992,
  large: 1200,
  extraLarge: 1240
};

export const media = (size: keyof typeof breakpoints, properties: CSSObject) => ({[`@media (min-width: ${breakpoints[size]})`]: properties});

const MyButton = styled.button<Props>(({ theme }) => ({
  background: red, // this must be a valid style
  ...theme.media('large', {
    background: blue // this is also validated :)
  })
}));

Tôi tin rằng đây không phải là sự cố TypeScript mà là sự cố plugin IntelliSense.

Từ quan điểm của TypeScript, nội dung giữa các backticks là loại TemplateStringsArray. TypeScript không nhận thức được các thuộc tính CSS hợp lệ vì nó thấy một chuỗi các chuỗi.

Tôi tin rằng việc xác thực được thực hiện ở cấp độ plugin bằng kiểu chữ-kiểu chữ-plugin .

Xem https://github.com/styled-components/vscode-styled-components/pull/41

Tôi sẽ gửi một yêu cầu tính năng hoặc báo cáo lỗi ở đây .

Nếu tôi hiểu chính xác, bạn muốn thoát khỏi any.

Đây là cách bạn có thể làm điều đó:

import {
  css,
  CSSObject,
  SimpleInterpolation,
  FlattenSimpleInterpolation,
} from 'styled-components';

type ObjectMap<T> = {[key: string]: T};

const breakpoints: ObjectMap<number> = {
  small: 767,
  medium: 992,
  large: 1200,
  extraLarge: 1240,
};

export const media = Object.keys(breakpoints).reduce(
  (
    acc: {
      [key: string]: (
        first: TemplateStringsArray | CSSObject,
        ...interpolations: SimpleInterpolation[]
      ) => FlattenSimpleInterpolation;
      // ^^^ this is the first implementation of  `BaseThemedCssFunction`
    },
    label
  ) => {
    acc[label] = (...args) => css`
      @media (min-width: ${breakpoints[label]}px) {
        ${css(...args)};
      }
    `;
    return acc;
  },
  {}
);