pr05 Typescript #1: Set up TS dependencies

[clairep94]

pr05 Typescript Migration: Set up TS dependencies:

Context:

• Set up TS dependencies & developer tooling associated with node v.16.14.2 & react v.16

  • typescript: ^5.8.3 -- stable with node v18

  • @typescript-eslint/parser: ^5.62.0

  • @typescript-eslint/eslint-plugin: ^5.62.0

  • @babel/preset-typescript: ^7.27.1

  • @types/node: ^16.18.126

  • @types/react: ^16.14.0

  • @types/react-dom: ^16.9.25

  • @types/jest: 29.5.14

• Add tsconfig and update developer tooling config for typescript

Changes:

• Set up typescript (latest version):

  • Install typescript: ^5.8.3
  • Install @types/node: ^16.18.126
  • Install @types/react: ^16.14.0
  • Install @types/react-dom: ^16.9.25
  • Set up ts config -- root, baseconfig & client & client build (autogen with tsc --build from root)
  • Set up package.json command for typecheck & typecheck:client

• Update babel (match to ts version):

  • Install @babel/preset-typescript: ^7.27.1
  • Update .babelrc to add typescript preset

• Update eslint (match to ts version):

  • Install @typescript-eslint/parser: ^5.62.0
  • Install @typescript-eslint/eslint-plugin: ^5.62.0
  • Update eslint to add override for ts and tsx files with ts parser & plugins
  • Update lint-staged, lint and lint-fix scripts to lint and fix ts and tsx files -- manually tested and confirmed that this works
    • Added a test.ts file in the client folder, which was missing ; and spaces, and confirmed these were caught in lint and auto-fixed in lint-fix

• Update storybook to include tsx files

• Updated webpack config files to include ts and tsx files

  • webpack/config.dev.ts
  • webpack/config.examples.js
  • webpack/config.prod.js
  • webpack/config.server.js

Notes:

• Manually tested automatic import resolves with js file using ts modules -- this doesn't work yet, but will try to resolve in the next PR to migrate getConfig

  • Not resolving this would result in needing to add .ts or .tsx to any files using migrated modules/components

• Prettier seems to be auto-formatting js files (eg. adding ; at the end of lines), but doesn't seem to do so for ts files

  • However I confirmed that lint-fix works, so this might not be an issue.

• Added jest types, but I have not manually tested migrating jest files yet. Will confirm in next PR to migrate getConfig if this is necessary/sufficient

• Added react types, but will confirm if this is sufficient on a following PR to migrate an instance of a React component.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[clairep94]

@khanniie
@raclim

[khanniie]

Thanks so much for putting this together!! I did some testing and changing a file from .js to .ts did work great, with the caveat that we need to change the import, as you already noted : D

Forgive me for the basic questions, I'm a bit new to setting up this kind of build tooling haha but I glanced through some TS migration docs and had a few questions:

• it looks like we want to keep using webpack / babel to compile our code, and we've adjusted the babel config to take in ts files too. I'm totally down for that, but wanted to check in on the tradeoffs between doing that and tsc? I was reading the guide here: https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html and it looks like both are options available to us. If we use babel, they had some suggested configurations for the tsconfig that i noticed we're missing, i was wondering if adding those might resolve some of the typescheck errors you had mentioned to me earlier!
• it also looks like having multiple tsconfigs is the modern approach, so I'm glad we're doing that, but noticed that most setups that use multiple tsconfig files tend to extend from the base one -- i was wondering if that was something we'd add later?

[clairep94]

@khanniie Thanks so much for reviewing!

I made the following updates following our catchup last week and the PR review comments above:

• Ignoring .tsbuildinfo files:

  • remove the autogen .tsbuildinfo from committed files
  • update gitignore to ignore *.tsbuildinfo

• Update the structure of the tsconfigs so that the tsconfig in client & server extend off a base tsconfig:

  • add a root/tsconfig.base.json -- contains shared rules between the client tsconfig & future server tsconfig
  • update client tsconfig to extend from the root
  • simplify root/tsconfig.json -- this just coordinates builds & does not contain any configurations

• Update to root/tsconfig.base.json to add the config options specified in the TS docs you linked for using both babel & tsc

  • I thought it would be good to keep the babel & tsc combination as we still use babel to compile all the js files that haven't been migrated, but potentially once the migration is done babel will no longer be necessary!
  • I tested this manually by changing utils/formatDate to a TS file, and it caught all the missing errors we looked at in the catchup last week! Thanks so much for this :))

• Update package.json scripts & pre-commit hook:
  • typecheck -- this looks funny right now, but is intended to be updated in the future to be npm typecheck:server && typecheck:client
  • Add npm typecheck to run in the husky pre-commit script -- manually tested that this works by changing utils/formatDate to a TS file without adding types
    • I wanted originally to have this only run on staged files, but I got the error below. Running on staged files only would be ideal but maybe this is not blocking?

[khanniie]

should this be mdx?

[khanniie]

This looks great! thanks so much, Claire! and thanks for the formatting fixes as well : D

[raclim]

Thanks so much @clairep94 and @khanniie! I think this looks good to go! Will give a second to double check the next PR before getting that one in too!