feat(typing): add TypeScript typings and lint types, fixes #2720 by MichaelSolati · Pull Request #3222 · GoogleChrome/web.dev

MichaelSolati · 2020-06-13T01:01:13Z

Add npm script to add type checking of JSDoc via typescript.
Add types folder with d.ts files for global typescript definitions of objects.
Corrected typings in JSDoc syntax for files and variables.
Added typings in JSDoc syntax for files and variables.
Renamed the description field in _data/authorData.json to descriptions to allow for collection definition to extend data definition. It also made sense as it is designed to support multiple languages (hence multiple descriptions).
Add optional chaining for DOM elements from query selectors in order to confirm that they exist cleanly, rather than writing if statements.
Add some properties of custom elements to be defined in the constructor in order to allow for use in methods in order to prevent the compiler saying the property doesn't exist on the object.

netlify · 2020-06-13T01:02:41Z

Deploy preview for web-dev-staging ready!

Built with commit 057b4c0

https://deploy-preview-3222--web-dev-staging.netlify.app

stale · 2020-07-13T07:24:57Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. To prevent this from happening, leave a comment.

robdodson · 2020-07-20T21:08:22Z

@MichaelSolati did you mean for this to close?

MichaelSolati · 2020-07-21T19:51:24Z

No.. i let it sit to long...

MichaelSolati · 2020-07-31T01:29:17Z

I've kept losing stuff and falling behind on keeping this up to date with the main branch that I thought we could just bring this in as it is now. Not all issues are resolved (about 185 typing issues exist), but it doesn't include the type linting in the lint command, so we can passively fix them as we change code. Also issues will still be highlighted in VS Code, but it wont fail our linting tests.

I do need to go through the changes I've made and fix some stuff, but I think this could/should be wrapped up soon.

MichaelSolati · 2020-07-31T20:27:02Z

Looks like GitHub actions is freezing up again, anyway...

@robdodson and @samthor can you PTAL, lots of small changes which shouldn't break anything but should require scrutiny.

@kaycebasques and @jpmedley I believe you've been tagged in because i renamed description to descriptions in the _data/authorData.json. Reason for this was because I created a type definition for the objects in the _data/authorData.json as well as the _collections/authors.js, the collection item extended the data item, but I could not overwrite the type of the item i was extending. It was easier to rename the description field in _data/authorData.json, and it also made sense as it is designed to support multiple languages (hence multiple descriptions).

robdodson · 2020-08-03T19:59:01Z

I think this PR also added a babel plugin for optional chaining which seems like an important addition to call out.

I might prefer to add that in a separate PR and maybe we discuss the ramifications first. My main concern is if it makes it so things start silently failing where previously they caused errors that we could track down and file as bugs.

robdodson

Looks good. Left a number of questions but I think we can land it tomorrow

src/lib/actions.js

src/lib/components/Header/index.js

src/lib/analytics.js

src/lib/components/BaseElement/index.js

src/site/_includes/components/AuthorsDate.js

src/site/_utils/get-srcset-range.js

tsconfig.json

types/_collections/tags.d.ts

robdodson · 2020-08-04T03:31:07Z

types/utils/event.d.ts

+ */
+
+declare global {
+  export interface WMouseEvent<T extends HTMLElement> extends MouseEvent {


Initially I thought this was referring to a mouse Wheel event.

Maybe the type could hint at why it's needed. Like MouseEventWithTarget or something like that?

I was confused too but I actually really like this type. It seems like an obvious addition to Event.

oh yeah I'm cool with adding the type, but I'm wondering if its name can be more descriptive. At a glance it's not clear what WMouseEvent means.

I went with W as we use it as a prefix for our classes. I can rename it if there's a preference.

samthor

Sorry to pile on the nit-picks. I am really excited for this PR generally.

I am concerned about .?, I think we can make TS happy without it, but I accept that it could be quite difficult since the lifecycle of custom elements isn't great (their sub-elements will be null a lot of the time, while disconnected).

src/build/common.js

src/build/minify-js.js

src/lib/analytics.js

src/lib/components/BaseElement/index.js

src/lib/components/BaseResponseElement/index.js

samthor · 2020-08-04T05:02:35Z

types/utils/event.d.ts

+ */
+
+declare global {
+  export interface WMouseEvent<T extends HTMLElement> extends MouseEvent {


I was confused too but I actually really like this type. It seems like an obvious addition to Event.

types/utils/intl.d.ts

types/utils/todo.d.ts

types/utils/window.d.ts

github-actions · 2020-08-18T16:58:33Z

Alex Recommends Report

Alex recommends the following language changes, but Alex is a regular expression based algorithm, so take them with a grain of salt.

src/site/content/en/handbook/author-profile/index.md

Level	Location	Word	Recommendation
⚠️	67:36	clearly	`clearly` may be insensitive, try not to use it

src/lib/actions.js

robdodson · 2020-08-19T20:22:41Z

src/lib/components/UrlChooser/index.js

    if (changedProperties.has('switching') && this.switching) {
-      input.setSelectionRange(0, input.value.length);
-      input.focus();
+      input?.setSelectionRange(0, input?.value.length);


src/site/_filters/md-block.js

src/site/_filters/md.js

MichaelSolati added the DO NOT MERGE Actively working on but experimental label Jun 13, 2020

MichaelSolati requested review from robdodson and samthor as code owners June 13, 2020 01:01

googlebot added the cla: yes Contributor has signed the CLA label Jun 13, 2020

stale bot added the stale label Jul 13, 2020

stale bot closed this Jul 20, 2020

MichaelSolati reopened this Jul 21, 2020

stale bot removed the stale label Jul 21, 2020

MichaelSolati force-pushed the feat/typing branch from a3ada4a to e2e345c Compare July 23, 2020 18:06

MichaelSolati requested a review from a team as a code owner July 23, 2020 18:06

MichaelSolati requested a review from devnook July 23, 2020 18:06

MichaelSolati force-pushed the feat/typing branch 3 times, most recently from 7266a87 to 5e4042b Compare July 28, 2020 19:36

MichaelSolati removed the DO NOT MERGE Actively working on but experimental label Jul 31, 2020

MichaelSolati force-pushed the feat/typing branch from 632d44e to 7654118 Compare July 31, 2020 20:18

MichaelSolati requested a review from a team as a code owner July 31, 2020 20:18

MichaelSolati requested review from jpmedley and kaycebasques July 31, 2020 20:18

MichaelSolati changed the title ~~[WIP] feat(typing): add TypeScript typings and lint types, fixes #2720~~ feat(typing): add TypeScript typings and lint types, fixes #2720 Jul 31, 2020

robdodson reviewed Aug 4, 2020

View reviewed changes

samthor reviewed Aug 4, 2020

View reviewed changes

MichaelSolati force-pushed the feat/typing branch from 17708bf to bfca169 Compare August 5, 2020 20:05

MichaelSolati force-pushed the feat/typing branch from bfca169 to 0e55ce1 Compare August 18, 2020 16:56

MichaelSolati requested review from robdodson and samthor August 18, 2020 18:59

robdodson reviewed Aug 19, 2020

View reviewed changes

MichaelSolati force-pushed the feat/typing branch from 06dabcd to 99d9f03 Compare August 21, 2020 07:14

MichaelSolati added 13 commits August 21, 2020 13:13

test: add type linting and optional chaining

149ebe1

chore: add some typings

99434b5

chore: add typescript definition files

925fe0b

chore: fix more typing issues

07b2c6c

refactor(authorsData): rename property description to descriptions

2eed3cd

chore: more typing fixes

15fa15e

chore: more typing

954de5a

chore: more types

0b3d1f8

chore: refactor

c10178b

chore: remove optional chaining

ef00aa1

chore: fix more types

93701b5

chore: remove babel

77cac11

chore: refactor more

057b4c0

MichaelSolati force-pushed the feat/typing branch from 057f635 to 057b4c0 Compare August 21, 2020 20:13

robdodson approved these changes Aug 22, 2020

View reviewed changes

robdodson merged commit 37f10fe into master Aug 22, 2020

robdodson deleted the feat/typing branch August 22, 2020 00:33

Conversation

MichaelSolati commented Jun 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Jun 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stale bot commented Jul 13, 2020

Uh oh!

robdodson commented Jul 20, 2020

Uh oh!

MichaelSolati commented Jul 21, 2020

Uh oh!

MichaelSolati commented Jul 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelSolati commented Jul 31, 2020

Uh oh!

robdodson commented Aug 3, 2020

Uh oh!

robdodson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

robdodson Aug 4, 2020

Choose a reason for hiding this comment

Uh oh!

samthor Aug 4, 2020

Choose a reason for hiding this comment

Uh oh!

robdodson Aug 4, 2020

Choose a reason for hiding this comment

Uh oh!

MichaelSolati Aug 18, 2020

Choose a reason for hiding this comment

Uh oh!

samthor left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

samthor Aug 4, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 18, 2020

Alex Recommends Report

src/site/content/en/handbook/author-profile/index.md

Uh oh!

Uh oh!

Uh oh!

robdodson Aug 19, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MichaelSolati commented Jun 13, 2020 •

edited

Loading

netlify bot commented Jun 13, 2020 •

edited

Loading

MichaelSolati commented Jul 31, 2020 •

edited

Loading