TypeScript migration organization

[kroeder]

What is this?

I want to use this issue for organizing the TypeScript migration process.

What is going to be migrated

I started with addon-notes and noticed it depends on channels and addons so I migrated them as well.
I'm not sure if we should migrate every lib but at least those that are used in addons or provide a public api that is used by other apps.

Let's discuss this if someone has other thoughts on this!

General

Package	Task owner	PR	Status
babel-typescript	@kroeder	#5109	MERGED

Apps

Package	Task owner	PR	Status
@storybook/angular	@kroeder	#6570	MERGED
@storybook/ember	@aromanarguello	#9020	MERGED
@storybook/html	@emilio-martinez	#7338	MERGED
@storybook/marko	@gaetanmaisse	#13449	WIP
@storybook/marionette	@gaetanmaisse	#13448	WIP
@storybook/mithril	@hcz	#8320	MERGED
@storybook/polymer	@kroeder	#8102	MERGED
@storybook/preact	@lonyele	#7527	MERGED
@storybook/rax	@gaetanmaisse	#13450	WIP
@storybook/react-native-server	OUTDATED
@storybook/react-native	@benoitdion	#6448	MERGED
@storybook/react	@kroeder	#7054	MERGED
@storybook/riot	@gaetanmaisse	#13447	WIP
@storybook/svelte	@aromanarguello	#8770	MERGED
@storybook/vue	@ndelangen	#7578	MERGED

Libs

Package	Task owner	PR	Status
@storybook/channels	@kroeder	#4977	MERGED
@storybook/channels-websocket	@kroeder	#5046	MERGED
@storybook/channels-postmessage	@dandean	#5154	MERGED
@storybook/addons	@kroeder	#5018	MERGED
@storybook/core-events	@dandean	#5140	MERGED
@storybook/node-logger	@dandean	#5153	MERGED
@storybook/client-logger	@dandean	#5151	MERGED
@storybook/components	@gaetanmaisse	#6095 #6500	MERGED
@storybook/api	@ndelangen	#5402	MERGED
@storybook/core	@gaetanmaisse	#12839	MERGED
@storybook/ui	@ndelangen	#9791	MERGED
@storybook/cli	@gaetanmaisse	#10802	MERGED

Addons

Package	Task owner	PR	Status
@storybook/addon-a11y	@gaetanmaisse	#5738	MERGED
@storybook/addon-actions	@gaetanmaisse	#5459	MERGED
@storybook/addon-backgrounds	@gaetanmaisse	#5535	MERGED
@storybook/addon-centered	@gaetanmaisse	#6772	MERGED
@storybook/addon-cssresources	@gaetanmaisse	#5380	MERGED
@storybook/addon-events	@lonyele	#7190	MERGED
@storybook/addon-google-analytics	@gaetanmaisse	#5307	MERGED
@storybook/addon-graphql	@lonyele	#6935	MERGED
@storybook/addon-info	@gaetanmaisse		Replaced by addons-docs
@storybook/addon-jest	@sairus2k	#6403	MERGED
@storybook/addon-knobs	@emilio-martinez	#7180	MERGED
@storybook/addon-links	@sairus2k	#6246	MERGED
@storybook/addon-notes	@kroeder	#4758	MERGED
@storybook/addon-ondevice-backgrounds	@lonyele	#7736	MERGED
@storybook/addon-ondevice-knobs	@wuweiweiwu		WIP
@storybook/addon-ondevice-notes	@lonyele	#7737	MERGED
@storybook/addon-options	@kroeder	#6428	MERGED
@storybook/addon-storyshots	@gaetanmaisse	#7674	MERGED
@storybook/addon-storysource	will be done in v2		PAUSED
@storybook/addon-viewport	@gaetanmaisse	#7177	MERGED

Deletion of DefinitelyTyped packages

As sources will now be written in TS storybook packages will export their own types definitions so we will be allowed to delete types from DefinitelyTyped (i.e. @types/storybook-XXX).

⚠️ Be sure that addon/lib was merged and publically available with an official release of Storybook before removing any types from DefinitelyTyped.

Package	Task owner	PR	Status
storybook__addon-notes	@gaetanmaisse	#34111	MERGED
storybook__addon-a11y	@gaetanmaisse	#37358	MERGED
storybook__addon-actions	@MichaelDeBoey	#38447	MERGED
storybook__addon-backgrounds	@MichaelDeBoey	#38447	MERGED
storybook__addon-centered	@MichaelDeBoey	#38447	MERGED
storybook__addon-info	-	-	-
storybook__addon-jest	@MichaelDeBoey	#38447	MERGED
storybook__addon-knobs	@MichaelDeBoey	#38447	MERGED
storybook__addon-links	@MichaelDeBoey	#38447	MERGED
storybook__addon-options	@MichaelDeBoey	#38447	MERGED
storybook__addon-storyshots	@gaetanmaisse	#41583	MERGED
storybook__addon-viewport	@MichaelDeBoey	#38447	MERGED
storybook__addons	@MichaelDeBoey	#38447	MERGED
storybook__channels	@MichaelDeBoey	#38447	MERGED
storybook__preact	@MichaelDeBoey	#38447	MERGED
storybook__react	@MichaelDeBoey	#39365	MERGED
storybook__react-native	@MichaelDeBoey	#38447	MERGED
storybook__vue	@MichaelDeBoey	#38447	MERGED

Activate TS strict mode

Why use TS strict mode?

• strict mode is included in the default tsconfig.json generated by tsc CLI
• Stricter rules help to find bugs faster than ever, for instance I found and fix fix(a11y): fix highlight of selected blindness color filter #9179 by using some of the rules I activated in tsconfig.json
• Some of our users are using TS in strict mode and are expecting that the types we are exposing are working in strict mode (e.g. Storybook 5.2 has issues with TypeScript types #8233)
• noUnusedLocals put in light the fact that some variables were not used for months but still there and still requiring maintenance.

Example on a11y addon: https://github.com/storybookjs/storybook/pull/9180/files

Initial steps for every migration

1. Copy tsconfig.json from e.g. addon-notes into the root of the package
2. Edit package.json of the package (TODO* We need to figure out how to handle tree shaking)
   2.1 Remove jsnext:main
   2.2 Add "types": "dist/%my-entry-point%.d.ts. If you have multiple files that export things, see: "My package has multiple files with exports"
3. Rename
   3.1 .js files to .ts
   3.2 files that use jsx to .tsx

FAQ

How do I compile TypeScript?

Storybook already compiles TypeScript by using yarn dev.
I suggest using yarn dev:ts because you don't want to compile everything but TypeScript right now.

Could not find declaration file for module '...'

This means a package you are importing does not ship declaration files (types) for TypeScript.
This message is caused by noImplicitAny: true https://basarat.gitbooks.io/typescript/docs/options/noImplicitAny.html

Example:

import { WebSocket } from 'global';

For non-storybook packages

Install additional devDeps from @types, if available: @types/package-name
If there's no @types package, see "Write your own declaration"

For storybook packages

If a certain package is not in the list above, please add it.
See "Write your own declaration"

Write your own declaration

Add a typings.d.ts file to your src directory.
At least declare a module for a package that does not contain declarations.

// This makes anything that is importet from 'global' "any" so you don't have any type hints or checks
declare module 'global';

You can provide additional information. Depends on how important and how often a certain package is used.

See https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
Examples: https://www.typescriptlang.org/docs/handbook/declaration-files/templates.html

My package has multiple files with exports

If your package has exports from multiple files you need to create one file that exports all your public api things.

Example:

// file a
export { someFunction, PropertyInterface }

// file b
export { somethingElse, MoreToExport }

1. Create a public_api.ts with

export * from "file-a.ts"
export * from "file-b.ts"

2. Edit package.json
   2.1 Set

  "main": "dist/public_api.js",
  "types": "dist/public_api.d.ts",

My packages has a default export but it can't be imported

This likely means that you use a public_api.ts as mentioned above and another file in your package has a default export.

In @storybook/addons it is solved this way

// index.ts
export const addons = getAddonsStore();

// public_api.ts
import { addons } from '.';
export default addons;

One package can have only one default export and it seems to be that it has to be in your main file of your package.

[gaetanmaisse]

Looks promising! 😄
Can I help on something? Maybe try to migrate an addon to TS after #5018 and #4977 will be merged?

[kroeder]

Of course! I hope to get them finished by tomorrow. Just pick whatever addon you want and open a PR 👍

If you want to start right now you also can just migrate the updates into your branch later on

[gaetanmaisse]

@kroeder you can update your post to set addon-google-analytics and addon-cssresources as migrated.

[kroeder]

@gaetanmaisse done!

[backbone87]

i can offer to do the @storybook/vue migration once the core package is done

[MichaelDeBoey]

@ndelangen I just love to do some OSS work now and then 😉

[shilman]

Great work @MichaelDeBoey @gaetanmaisse 🙌 🙌 🙌

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.9 containing PR #10802 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Thanks for your help and support getting this stable for release!

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.2 containing PR #12839 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[gaetanmaisse]

🥳 It's over! It's done.

🙇🏻 Thanks to all of you @aromanarguello @emilio-martinez @hcz @lonyele @ndelangen @dandean @sairus2k @wuweiweiwu @MichaelDeBoey! You're all part of this!

❤️ And a special big Thank You to @kroeder for having started and led this at the begginning and help me to make my first contributions to Storybook a few years ago.

🎉 🎆

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.14 containing PR #13447 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease