Draft PR for show case the typescript issue that we need to solve for #5854 step 1

[t83714]

What this PR does

This is a draft PR for show case the typescript issue that we need to solve for:

• [EPIC] Better NPM package Bundle Layout with typescript definition bundle (.d.ts)  #5854 step 1.

Changes I Made so far

• I only set "declaration" = true to make typescript output types (i.e. .d.tsfile).
• Commit yarn.lock so you can replicate my result.

Problem We Have:

checkout commit: 8f8349d (See my updates my latest commits updated tsconfig.json for some improvement)

• yarn install
• yarn tsc -b tsconfig.json

You will see error e.g.:

lib/Styled/AnimatedSpinnerIcon.tsx:5:7 - error TS4023: Exported variable 'AnimatedSpinnerIcon' has or is using name 'IStyledIconProps' from external module "/Users/jia047/development/terriajs/lib/Styled/Icon" but cannot be named.

5 const AnimatedSpinnerIcon = styled(StyledIcon).attrs({
        ~~~~~~~~~~~~~~~~~~~

lib/Styled/AnimatedSpinnerIcon.tsx:5:7 - error TS4023: Exported variable 'AnimatedSpinnerIcon' has or is using name 'IconProps' from external module "/Users/jia047/development/terriajs/lib/Styled/Icon" but cannot be named.

5 const AnimatedSpinnerIcon = styled(StyledIcon).attrs({
        ~~~~~~~~~~~~~~~~~~~

lib/Styled/ButtonAsLabel.tsx:9:7 - error TS4023: Exported variable 'ButtonAsLabel' has or is using name 'IBoxPropsBase' from external module "/Users/jia047/development/terriajs/lib/Styled/Box" but cannot be named.

9 const ButtonAsLabel = styled(Box).attrs({

• Those error are normally causes by required types not found by typescript --- explicit type annotation could be one solution but we need to look at the source code one by one. See here also.
• Other config options in tsconfig.json might also impact this. mainly, typeRoots, types, include
  • We probably should find a way to remove typeRoots & types and set include to ./lib
  • Please note, setting typeRoots will cause issue of locating any type packages in node_moduels/@types/xx

What's next

I will keep trying (from time to time) on this PR to see if I can solve this problem and post back any of my findings here.
Please let me know if you have better ideas or solutions.

Update on 29th Sept 2021

Made the following changes:

• Remove "use strict" from source code
• Remove typeRoots & types and set include to ./lib
• Add paths to fix terriajs-cesium types bundling issue.

There are now 133 errors left. Mainly in the following categories:

• Declaration emit errors. It's a JS files and requires explicit type annotation may unblock declaration emit.
  • We need convert the .js file to .ts file and add types
• error TS4094: Property 'xxxx' of exported class expression may not be private or protected.
  • Might related to this. i.e. exported anonymous classes can't have private or protected members, because there's no way to represent that in a .d.ts file.
• error TS9006: Declaration emit for this file requires using private name 'xxxx' from module. related issue

Here is a full list of error in google docs. We probably need to solve it one by one:
https://docs.google.com/spreadsheets/d/12lDW0jfA-2x6A4LE9J9BSXXaWNpClk1Ypm4_E8kB0bo

I've promote ticket #5854 to an epic and create 3 tickets (one for each of the problem category) for it.