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 & 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?