Convert to TypeScript

[mxstbr]

Based on the discussions around #121 and the test we just merged in #662, we are going to convert theme-ui to TypeScript! 🎉 The plan is to go package-by-package and gradually move all .js files to .ts files.

As you can see there is a fair amount of packages to convert, so we would love your help! 💪

Here is how to convert a package (take a look at #662 for an example):

1. Add the --tsconfig tsconfig.json option to the "prepare" and "watch" commands in the package.json and copy the tsconfig.json from the core package.
2. Add "types": "dist/index.d.ts" and "source": "src/index.ts" to the package.json
3. Go file-by-file, rename them from .js to .ts and fix all type errors and any types in the generated typedef (dist/index.d.ts).
4. Submit a PR and tag me as a reviewer!

To avoid duplicate work please comment which package you want to work on (as long as nobody else is also working on it) so we can mark it as taken.

Packages that still need to be converted:

• chrome (feat(chrome): update chrome to typescript #909)
• color (Adopt TS in theme-ui/color #672)
• color-modes (claimed)
• components (Convert components package to TS #692)
• core (Spike out potential TypeScript conversion #662)
• css (Adopt TS in theme-ui/color #672)
• custom-properties (fix(@theme-ui/custom-properties): TS conversion #671)
• editor (Convert editor to TypeScript #900)
• match-media (@theme-ui/match-media : TypeScript conversion #696)
• mdx (feat(@theme-ui/mdx): add TypeScript support #703)
• preset-base (converted preset-base from .js to .ts #675)
• preset-bootstrap (Convert all presets to TypeScript #694)
• preset-bulma (Convert all presets to TypeScript #694)
• preset-dark (Convert all presets to TypeScript #694)
• preset-deep (Convert all presets to TypeScript #694)
• preset-funk (Convert all presets to TypeScript #694)
• preset-future (Convert all presets to TypeScript #694)
• preset-polaris (Convert all presets to TypeScript #694)
• preset-roboto (Convert all presets to TypeScript #694)
• preset-swiss (Convert all presets to TypeScript #694)
• preset-system (Convert all presets to TypeScript #694)
• preset-tailwind (Convert all presets to TypeScript #694)
• preset-tosh (Convert all presets to TypeScript #694)
• presets (Convert all presets to TypeScript #694)
• prism (feat(@theme-ui/prism): convert to typescript #805)
• sidenav (feat(sidenav): update sidenav to typescript #917)
• style-guide
• tachyons (Convert tachyons package to TS #691)
• tailwind (Convert tailwind package to TypeScript #686)
• theme-provider (Convert @theme-ui/theme-provider to TypeScript #708)
• theme-ui (refactor(theme-ui): add typescript to the root package #724)
• typography (@theme-ui/typography => Typescript #890)

These packages will be handled separately (see #950)

• gatsby-plugin-theme-ui (WIP: refactor(gatsby-plugin-theme-ui): add typescript #705)
• gatsby-theme-code-recipes (refactor(gatsby-theme-code-recipes): convert to typescript #709)
• gatsby-theme-style-guide
• gatsby-theme-ui-blog ( Convert gatsby-theme-ui-blog to TypeScript #711)
• gatsby-theme-ui-layout (Convert gatsby-theme-ui-layout to TypeScript #710)

[jxnblk]

Awesome work on this so far! For the preset packages, I wonder if it'd make sense to make a generic theme interface that most of these could follow, or at least use as a base interface

[hasparus]

For every package which is typed in DT, we’ll have to clean up and remove it from DT after merge to master. This would be components and theme-ui.

I’m gonna take color (#672).

I'll add strict: true to its tsconfig if you don't have anything against it.

http://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks

--strict	boolean	false	Enable all strict type checking options. Enabling --strict enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.

[LekoArts]

I'm gonna take:

• custom-properties (fix(@theme-ui/custom-properties): TS conversion #671)
• match-media (@theme-ui/match-media : TypeScript conversion #696)

[hasparus]

I'm thinking about taking a stab at typing @theme-ui/css.
Am I right that the css function is wrongly typed in DT?

import { Interpolation, SerializedStyles } from '@emotion/serialize';
import { SystemStyleObject } from '@styled-system/css';

// ...

/**
 * A utility from @styled-system/css for theming styles to be passed to Emotion's
 * css prop.
 *
 * Refer:
 * 1. https://styled-system.com/css/
 * 2. https://emotion.sh/docs/object-styles#with-css
 */
export function css(styleObject: Interpolation): (theme: Theme) => SerializedStyles;

/**
 * The `sx` prop accepts a `SxStyleProp` object and properties that are part of
 * the `Theme` will be transformed to their corresponding values. Other valid
 * CSS properties are also allowed.
 */
export type SxStyleProp = SystemStyleObject;

However the docs say:

So styleObject should be annotated as SystemStyleObject.

[Zolwiastyl]

I want to work on "preset-base" package.

[jxnblk]

@hasparus I'm not 100% sure, but I suspect the DT typings might be a little outdated -- I think the typings for this should be completely contained within the theme-ui repo and not rely on Styled System, since that was part of the older implementation. It now uses @theme-ui/css (@styled-system/css will be deprecated in favor of @theme-ui/css at some point)

[joestrouth1]

I'd like to take tailwind and tachyons since they're pretty similar.

How should we handle updating tests to TS?