Skip to content

Fix Typescript errors in build process

When building the library via npm run build we're getting a handful of TypeScript errors, which we should fix. This could be a nice occasion, to read some TypeScript documentation and understand more about the existing components ;)

[vite:dts] Start generate declaration files...
src/components/Carousel.tsx:152:50 - error TS2339: Property 'textColor' does not exist on type 'INewsCard'.
  Property 'textColor' does not exist on type 'NewsCardBaseProps & { customColor?: Color | undefined; customTextColor?: "dark" | "light" | undefined; }'.

152               customTextColor={textColor || item.textColor}
                                                     ~~~~~~~~~
src/components/Carousel.tsx:182:51 - error TS2345: Argument of type '(INews | INewsCard)[]' is not assignable to parameter of type 'INewsCard[]'.
  Type 'INews | INewsCard' is not assignable to type 'INewsCard'.
    Type 'INews' is not assignable to type 'INewsCard'.
      Type 'INews' is not assignable to type 'NewsCardBaseProps & { customColor?: undefined; customTextColor?: undefined; }'.
        Type 'INews' is not assignable to type '{ customColor?: undefined; customTextColor?: undefined; }'.
          Types of property 'customColor' are incompatible.
            Type 'string | undefined' is not assignable to type 'undefined'.
              Type 'string' is not assignable to type 'undefined'.

182                 {items && renderChildrenFromProps(items)}
                                                      ~~~~~
src/components/Header/Header.tsx:23:3 - error TS2339: Property 'light' does not exist on type 'IHeader'.

23   light,
     ~~~~~
src/components/Header/Header.tsx:56:11 - error TS2322: Type '{ light: any; href: string; isMobileOpen: boolean; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'light' does not exist on type 'IntrinsicAttributes & Props'.

56           light={light}
             ~~~~~
src/components/Header/Header.tsx:65:15 - error TS2322: Type '{ isMobileOpen: boolean; mobileMode: true; onChangeLanguage: ((newLanguage: string) => void) | undefined; selectedLanguage: string | undefined; languages: string[]; light: any; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'mobileMode' does not exist on type 'IntrinsicAttributes & Props'.

65               mobileMode
                 ~~~~~~~~~~
src/components/HorizontalCardListView.tsx:52:19 - error TS2322: Type '{ target?: string | undefined; title: string; }[] | undefined' is not assignable to type '{ target?: string | undefined; title: string; }[]'.
  Type 'undefined' is not assignable to type '{ target?: string | undefined; title: string; }[]'.

52                   tags={tags}
                     ~~~~

  src/components/TagCloud.tsx:8:3
    8   tags: Array<{ target?: string; title: string }>;
        ~~~~
    The expected type comes from property 'tags' which is declared here on type 'IntrinsicAttributes & Props'
src/components/HorizontalNewsCard.tsx:78:55 - error TS2538: Type 'undefined' cannot be used as an index type.

78               ? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]][
                                                         ~~~~~~~~~~~~~~~
src/components/HorizontalNewsCard.tsx:93:55 - error TS2538: Type 'undefined' cannot be used as an index type.

93               ? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]]["event"]
                                                         ~~~~~~~~~~~~~~~
src/components/HorizontalNewsCard.tsx:150:57 - error TS2538: Type 'undefined' cannot be used as an index type.

150                 ? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]][
                                                            ~~~~~~~~~~~~~~~
src/components/HorizontalNewsCard.tsx:164:57 - error TS2538: Type 'undefined' cannot be used as an index type.

164                 ? PILL_COLOR_MAPPING[TEXT_COLOR_MAPPING[customTextColor]]
                                                            ~~~~~~~~~~~~~~~
src/components/VerticalNewsCard.tsx:78:55 - error TS2304: Cannot find name 'textColor'.

78               ? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[textColor]]["paragraph"]
                                                         ~~~~~~~~~
src/components/VerticalNewsCard.tsx:91:55 - error TS2304: Cannot find name 'textColor'.

91               ? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[textColor]]["event"]
                                                         ~~~~~~~~~
src/components/VerticalNewsCard.tsx:142:59 - error TS2538: Type 'undefined' cannot be used as an index type.

142                   ? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]][
                                                              ~~~~~~~~~~~~~~~
src/components/VerticalNewsCard.tsx:156:59 - error TS2538: Type 'undefined' cannot be used as an index type.

156                   ? PILL_COLOR_MAPPING[TEXT_COLOR_MAPPING[customTextColor]]
Edited by Moritz Stückler