自定义主题样式组件的打字稿

Question

我已经根据一些 google 搜索尝试了 2 种不同的方法来做到这一点。我正在尝试为 typescript expo reactive native 项目 中的自定义主题设置类型。我已经设置了一个声明 ts 文件并将其添加到我在 tsconfig 中的包含中。这是我的设置。希望有人遇到过类似的问题并且知道如何解决这个问题。

我有一个包含以下文件的主题文件夹，我导出这些文件然后导入到索引主题文件中。

themes/
  colors
  sizes
  spacing
  index

这是从上述主题文件导入的索引文件。

import { DefaultTheme } from "styled-components/native";
import { colors } from "./colors";
import { sizes } from "./sizes";
import { spacing, lineHeights } from "./spacing";

const theme: DefaultTheme = {
  colors,
  sizes,
  spacing,
  lineHeights,
};

export default theme;

然后我有了我的声明文件，我尝试了两种方法，一种是手动添加所有道具，另一种是使用 typeof。

types/theme.d.ts

import {} from "styled-components";
import theme from "../themes";

declare module "styled-components" {
  type Theme = typeof theme;
  export interface DefaultTheme extends Theme {}
}

// Manually adding the props.
// import { DefaultTheme } from "styled-components/native";

// declare module "styled-components" {
//   export interface DefaultTheme {
//     bg: {
//       primary: string;
//       secondary: string;
//     };
//     sizes: stringp[];
//     lineHeights: {
//       title: string;
//       copy: string;
//     };
//     spacing: string[];
//   }
// }

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "*": ["types/*"]
    },
  },
  "include": ["./src", "./types"],
  "exclude": [
    "node_modules",
    "**/*.test.ts",
    "**/*.test.tsx",
  ]
}

这就是我在 tsx 应用程序文件中使用它的方式。

App.tsx

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { Text, StatusBar } from "react-native";
import theme from "./src/themes";

export default function App() {
  return (
    <ThemeProvider theme={theme}>
        <Container>
          <Text>some text</Text>
          <StatusBar />
        </Container>
    </ThemeProvider>
  );
}

const Container = styled.View`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.bg.primary};
  align-items: center;
  justify-content: center;
`;

Answer 1

不要在 themes/index.ts 中设置 DefaultTheme。它已经被使用过，只是一个空对象。

将您的 themes/index.ts 更新为：

import { colors } from "./colors";
import { sizes } from "./sizes";
import { spacing, lineHeights } from "./spacing";

const theme = {
  colors,
  sizes,
  spacing,
  lineHeights,
};

export default theme;

更新你的 types/theme.d.ts 这个：

import "styled-components"
import theme from "./src/themes";

type ThemeInterface = typeof theme

declare module "styled-components" {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface (this is only necessary if you ur eslint complains. Since it should be and Interface and not a Type.) 
    interface DefaultTheme extends ThemeInterface {}
}

而你应该是 gucci。

自定义主题样式组件的打字稿

typescript for custom theme styled components

typescript

react-native

typescript-typings

styled-components

expo