package.json: Add modules for type checking

[martinpitt]

@types/node fixes type checking errors like

node_modules/sass/types/legacy/render.d.ts:26:8 - error TS2580: Cannot find name 'Buffer'.

postcss-modules is apparently an undeclared dependency of esbuild-sass-plugin:

node_modules/esbuild-sass-plugin/lib/utils.d.ts:3:34 - error TS2307:
Cannot find module 'postcss-modules' or its corresponding type declarations.

Also pin down the typescript version, the ^ slipped in there inadvertently.

---

Right now, if test/static-code fails on any type check, it spews out a bunch of errors which are not ours: all except for the last one (which triggers printing all of this).

# node_modules/@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggleCheckbox.d.ts:4:18 - error TS2430: Interface 'MenuToggleCheckboxProps' incorrectly extends interface 'Omit<HTMLProps<HTMLInputElement>, "disabled" | "type" | "onChange" | "checked">'.
#   Types of property 'defaultChecked' are incompatible.
#     Type 'boolean | null' is not assignable to type 'boolean | undefined'.
#       Type 'null' is not assignable to type 'boolean | undefined'.
#
# 4 export interface MenuToggleCheckboxProps extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
#                    ~~~~~~~~~~~~~~~~~~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/NotificationDrawer/NotificationDrawerListItemHeader.d.ts:4:35 - error TS2304: Cannot find name 'SVGIconProps'.
#
# 4     success: React.ComponentClass<SVGIconProps, any>;
#                                     ~~~~~~~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/NotificationDrawer/NotificationDrawerListItemHeader.d.ts:5:34 - error TS2304: Cannot find name 'SVGIconProps'.
#
# 5     danger: React.ComponentClass<SVGIconProps, any>;
#                                    ~~~~~~~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/NotificationDrawer/NotificationDrawerListItemHeader.d.ts:6:35 - error TS2304: Cannot find name 'SVGIconProps'.
#
# 6     warning: React.ComponentClass<SVGIconProps, any>;
#                                     ~~~~~~~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/NotificationDrawer/NotificationDrawerListItemHeader.d.ts:7:32 - error TS2304: Cannot find name 'SVGIconProps'.
#
# 7     info: React.ComponentClass<SVGIconProps, any>;
#                                  ~~~~~~~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/NotificationDrawer/NotificationDrawerListItemHeader.d.ts:8:34 - error TS2304: Cannot find name 'SVGIconProps'.
#
# 8     custom: React.ComponentClass<SVGIconProps, any>;
#                                    ~~~~~~~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/Tabs/Tabs.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.
#
# 1 /// <reference types="node" />
#                         ~~~~
#
# node_modules/@patternfly/react-core/dist/esm/components/Tabs/Tabs.d.ts:127:20 - error TS2503: Cannot find namespace 'NodeJS'.
#
# 127     scrollTimeout: NodeJS.Timeout;
#                        ~~~~~~
#
# node_modules/@patternfly/react-core/dist/esm/helpers/Popper/thirdparty/popper-core/types.d.ts:118:34 - error TS2344: Type 'Options' does not satisfy the constraint 'Obj'.
#
# 118     fn: (arg0: ModifierArguments<Options>) => State | void;
#                                      ~~~~~~~
#
#   node_modules/@patternfly/react-core/dist/esm/helpers/Popper/thirdparty/popper-core/types.d.ts:112:33
#     112 export interface Modifier<Name, Options> {
#                                         ~~~~~~~
#     This type parameter might need an `extends Obj` constraint.
#
# node_modules/@patternfly/react-core/dist/esm/helpers/Popper/thirdparty/popper-core/types.d.ts:119:39 - error TS2344: Type 'Options' does not satisfy the constraint 'Obj'.
#
# 119     effect?: (arg0: ModifierArguments<Options>) => () => void | void;
#                                           ~~~~~~~
#
#   node_modules/@patternfly/react-core/dist/esm/helpers/Popper/thirdparty/popper-core/types.d.ts:112:33
#     112 export interface Modifier<Name, Options> {
#                                         ~~~~~~~
#     This type parameter might need an `extends Obj` constraint.
#
# node_modules/esbuild-sass-plugin/lib/utils.d.ts:3:34 - error TS2307: Cannot find module 'postcss-modules' or its corresponding type declarations.
#
# 3 import PostcssModulesPlugin from 'postcss-modules';
#                                    ~~~~~~~~~~~~~~~~~
#
# node_modules/sass/types/legacy/render.d.ts:26:8 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.
#
# 26   css: Buffer;
#           ~~~~~~
#
# node_modules/sass/types/legacy/render.d.ts:56:9 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.
#
# 56   map?: Buffer;
#            ~~~~~~
#
# pkg/playground/remote.tsx:55:13 - error TS2339: Property 'translate' does not exist on type 'typeof import("cockpit")'.
#
# 55     cockpit.translate();
#                ~~~~~~~~~
#
#
# Found 14 errors in 7 files.
#
# Errors  Files
#      1  node_modules/@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggleCheckbox.d.ts:4
#      5  node_modules/@patternfly/react-core/dist/esm/components/NotificationDrawer/NotificationDrawerListItemHeader.d.ts:4
#      2  node_modules/@patternfly/react-core/dist/esm/components/Tabs/Tabs.d.ts:1
#      2  node_modules/@patternfly/react-core/dist/esm/helpers/Popper/thirdparty/popper-core/types.d.ts:118
#      1  node_modules/esbuild-sass-plugin/lib/utils.d.ts:3
#      2  node_modules/sass/types/legacy/render.d.ts:26
#      1  pkg/playground/remote.tsx:55

After this PR, it's down to "9 errors in 4 files", and they are all in PF.

[martinpitt]

Let's not do this, this is nonsense. It aggravates our dependabot noise, and papers over bugs which aren't ours. Really, our test/static-code shouldn't show these errors at all.

[allisonkarlitskaya]

@martinpitt see also

• react-core type declarations contain bugs patternfly/patternfly-react#10695
• Broken type annotations (missing @types/node and postcss-modules in dependencies) glromeo/esbuild-sass-plugin#183

[allisonkarlitskaya]

About esbuild-sass-plugin: I'm a bit more likely to cut them some slack on account of the fact that applying typechecking to your esbuild setup is not something that most normal humans probably do. In fact, the only reason we do it is that we request typechecking of everything in pkg/ and we have our esbuild plugins inside of pkg/lib mixed in together with our "web" code, which is sort weird on our part.

So if you wanted to fix the esbuild-sass-plugin thing I'd recommend doing it by moving the esbuild-plugin bits out to a separate directory (outside of pkg) that we don't tell tsc to look at. If that's too much (and thinking about subprojects and everything, it is), we could exclude those files...

[martinpitt]

So if you wanted to fix the esbuild-sass-plugin thing I'd recommend doing it by moving the esbuild-plugin bits out to a separate directory (outside of pkg)

I really want them to be in pkg/lib/ -- otherwise other projects have import/sync yet another directory.

[allisonkarlitskaya]

→ #20730