feat(typescript): Add TypeScript compatibility #13786

HazAT · 2019-06-24T13:09:08Z

This PR is intended to serve as a demonstration for how we could write TypeScript code in Sentry. It migrates the following code to TypeScript:

all Discover functionality
some utility functions

It depends on:

dashed · 2019-06-24T19:02:48Z

At the time of this message, Typescript doesn't support optional chaining proposal (https://github.com/tc39/proposal-optional-chaining), which is stage 2 microsoft/TypeScript#16 .

Some suggestions:

https://github.com/dralletje/idx.macro
2 pass babel transform: How does Typescript parse customized syntax configured with babel? babel/babel#9353

dashed · 2019-06-24T20:09:20Z

tslint is going to be deprecated:

src/sentry/static/sentry/app/views/organizationDiscover/aggregations/index.tsx

Uses withConfig HoC instead of connecting to the ConfigStore directly This is required for #13786

This is required for #13786

dashed · 2019-06-25T01:17:46Z

.eslintrc.js

+        '@typescript-eslint/no-unused-vars': 'off',
+      },
+    },
+  ],


@typescript-eslint/no-unused-vars rule was causing issues for imported types. see: typescript-eslint/typescript-eslint#363

I've added this as per https://43081j.com/2019/02/using-eslint-with-typescript

dashed · 2019-06-25T15:52:43Z

.eslintrc.js

+        '@typescript-eslint/no-unused-vars': 'off',
+
+        // https://github.com/yannickcr/eslint-plugin-react/issues/2066
+        'react/sort-comp': 'warn',


Caveat: jsx-eslint/eslint-plugin-react#2066

Uses withConfig HoC instead of connecting to the ConfigStore directly This is required for #13786

This is required for #13786

This is required for getsentry#13786

lynnagara · 2019-06-27T22:17:53Z

src/sentry/static/sentry/app/views/organizationDiscover/queryBuilder.tsx

-            const type = SPECIAL_TAGS[tags.tags_key] || 'string';
+          .filter((tag: TagData) => !HIDDEN_TAGS.includes(tag.tags_key))
+          .map((tag: TagData) => {
+            const type = SPECIAL_TAGS[tag.tags_key] || 'string';


This was a good bug, TypeScript made it immediately obvious

lynnagara · 2019-06-27T22:23:10Z

src/sentry/static/sentry/app/views/organizationDiscover/discover.tsx

@@ -409,7 +429,6 @@ export default class OrganizationDiscover extends React.Component {
                isFetchingQuery={isFetchingQuery}
                onUpdateField={this.updateField}
                onRunQuery={this.runQuery}
-                onReset={this.reset}


👍 for errors on unused props

lynnagara · 2019-07-01T19:02:42Z

package.json

    "@babel/runtime": "^7.0.0",
    "@sentry/browser": "^5.4.2",
    "@sentry/integrations": "^5.4.2",
    "@sentry/typescript": "^5.3.0",
    "@types/lodash": "^4.14.134",
-    "@types/react-dom": "^16.8.4",
+    "@types/moment-timezone": "^0.5.12",


@HazAT Do you know if/why these need to be dependencies? Would be really nice to move these to devDependencies?

Sorry for the late reply. I thought we need this since we do different stuff if you call
make develop or yarn install.
make develop apparently on installs dependencies whereby yarn install installs all.

So if you do a prod build it would fail because of missing types.

Gotcha, thanks for the explanation

dashed

I took the liberty to rebase this branch against master, and looked through the PR.

Looks good to me 👍

dashed · 2019-07-19T14:21:57Z

tsconfig.json

@@ -6,7 +6,8 @@
    "strict": true,
    "declaration": false,
    "declarationMap": false,
-    "allowJs": true,
+    "allowJs": false,
+    "noImplicitAny": false,


@HazAT @lynnagara There are issues with importing React components from *.jsx files, and I don't think redeclaring them as const FooBarAny: any = FooBar; is the right approach to migrate Sentry to TypeScript in the long-term.

Since this file is extending @sentry/typescript/tsconfig.json (https://github.com/getsentry/sentry-javascript/blob/5d670a7781b6e2144809c002e9332e2cc9dd239c/packages/typescript/tsconfig.json), I'm proposing to provide the following overrides that are specific for this project:

"allowJs": false, "noImplicitAny": false,

The behavioural changes are as follows:

Setting allowJs to be false prevents the TypeScript engine from processing *.jsx files and as well as inferring types of imported js code. This resolves cryptic proptype type issues for React components sourced in *.jsx files .

The implications of disabling allowJs means that imported modules from *.jsx files are implied to have an any type. Hence, we need noImplicitAny to be false.

lynnagara · 2019-07-19T21:53:26Z

Deployed to staging, everything looks fine

* master: (25 commits) ref(onboarding): Fix install promprt URL (#14106) fix(app-platform): Allow GET requests for published apps (#14109) feat: Update Group.get_latest_event to use Snuba event (#14039) ref(onboarding): Rename wizardNew -> onboarding (#14104) feat(apm): Update props to address proptype warnings for new transaction attributes (SEN-800) (#14040) ref(ui): Move and codesplit `ProjectPlugins` (#13952) feat(typescript): Add TypeScript compatibility (#13786) ref(templates): Remove unused content block default (#14090) ref(less): Remove unused admin.less (#14097) ref(onobarding): Remove old onboarding experience (#14066) fix(ui) Fix missing conditions in tag bars (#14063) ref(suspect-commits): Add hook (#14057) ref(frontend): Segment frontend web urls (#14096) feat(suspect-commits): Add analytics events (#14080) feat(servicehooks): Update servicehook URLs (#14093) license: Remove license headers (#14095) ref(templates): Remove unused account_nav (#14091) fix: Disable transaction events in store (#14088) fix(InstallWizard): Fix exception when InstallWizard completed (#14092) ref(admin): Fix thrashing on stat charts (#14094) ...

HazAT assigned HazAT and lynnagara Jun 24, 2019

lynnagara force-pushed the typescript branch from 8cfd468 to 699d8bf Compare June 24, 2019 17:20

lynnagara force-pushed the typescript branch 2 times, most recently from e38d0db to 289b539 Compare June 24, 2019 20:39

lynnagara reviewed Jun 24, 2019

View reviewed changes

src/sentry/static/sentry/app/views/organizationDiscover/aggregations/index.tsx Outdated Show resolved Hide resolved

lynnagara added a commit that referenced this pull request Jun 24, 2019

ref: Convert app.jsx to ES6

9ba73d0

Uses withConfig HoC instead of connecting to the ConfigStore directly This is required for #13786

lynnagara mentioned this pull request Jun 24, 2019

ref: Convert app.jsx to ES6 #13798

Merged

lynnagara added a commit that referenced this pull request Jun 24, 2019

ref: Remove optional chaining

4c9eba2

This is required for #13786

lynnagara mentioned this pull request Jun 25, 2019

ref: Remove optional chaining #13800

Merged

dashed reviewed Jun 25, 2019

View reviewed changes

dashed added the WIP label Jun 25, 2019

lynnagara added a commit that referenced this pull request Jun 25, 2019

ref: Convert app.jsx to ES6 (#13798)

634c2a7

Uses withConfig HoC instead of connecting to the ConfigStore directly This is required for #13786

lynnagara added a commit that referenced this pull request Jun 25, 2019

ref: Remove optional chaining

f423a42

This is required for #13786

pull bot pushed a commit to Mattlk13/sentry-1 that referenced this pull request Jun 25, 2019

ref: Remove optional chaining (getsentry#13800)

ff3c330

This is required for getsentry#13786

lynnagara force-pushed the typescript branch 2 times, most recently from 66506af to aac7d03 Compare June 25, 2019 20:01

lynnagara mentioned this pull request Jun 25, 2019

TypeScript configuration #13818

Merged

lynnagara force-pushed the typescript branch from 0991f85 to 7fa3d0b Compare June 26, 2019 18:27

lynnagara reviewed Jun 27, 2019

View reviewed changes

lynnagara removed the WIP label Jun 28, 2019

lynnagara changed the title ~~[WIP] feat: Add typescript compatibility~~ feat(typescript): Add TypeScript compatibility Jun 28, 2019

lynnagara reviewed Jul 1, 2019

View reviewed changes

lynnagara approved these changes Jul 8, 2019

View reviewed changes

dashed force-pushed the typescript branch from 083f4d5 to 9f63217 Compare July 10, 2019 16:03

dashed approved these changes Jul 10, 2019

View reviewed changes

lynnagara and others added 19 commits July 18, 2019 19:49

Fix types

e8bf36c

migration pagination component

db67d66

feat(typescript): Convert querBuilder to TypeScript

670775b

ref: Convert more Discover code to TypeScript

6bf7650

ref: visualizationsToggle.jsx -> visualizationsToggle.tsx

86c240a

ref: Convert Discover result index page to TypeScript

c120373

ref: Convert ResultTable component to TypeScript

52b02f6

feat: Convert sidebar to typescript

36f0a62

feat: Intro to tsx

92d5aed

update snapshots

b7a6b08

Convert more Discover code to TS

2484595

Convert last Discover file to TS

14f37c0

Better aggregation and condition types

d021345

Update types

2e10e31

More types

10c3297

Better types

cac81a7

restore InlineeSvg proptypes

f78a2aa

inlinesvg.jsx

b28077e

update snapshots

4d33c10

dashed force-pushed the typescript branch from 6b5a1d1 to 4d33c10 Compare July 18, 2019 23:49

dashed added 2 commits July 18, 2019 21:01

adjust tsconfig

4dac74d

adjustments

5f20c53

dashed reviewed Jul 19, 2019

View reviewed changes

dashed added 2 commits July 19, 2019 15:05

tsconfig docs

4f9f0e8

fix

f12067e

lynnagara merged commit 7823ddb into master Jul 22, 2019

lynnagara deleted the typescript branch July 22, 2019 19:19

github-actions bot locked and limited conversation to collaborators Dec 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(typescript): Add TypeScript compatibility #13786

feat(typescript): Add TypeScript compatibility #13786

HazAT commented Jun 24, 2019 •

edited by lynnagara

Loading

dashed commented Jun 24, 2019 •

edited

Loading

dashed commented Jun 24, 2019

dashed Jun 25, 2019

dashed Jun 25, 2019

lynnagara Jun 27, 2019

lynnagara Jun 27, 2019

lynnagara Jul 1, 2019

HazAT Jul 10, 2019

lynnagara Jul 10, 2019

dashed left a comment

dashed Jul 19, 2019

lynnagara commented Jul 19, 2019

feat(typescript): Add TypeScript compatibility #13786

feat(typescript): Add TypeScript compatibility #13786

Conversation

HazAT commented Jun 24, 2019 • edited by lynnagara Loading

dashed commented Jun 24, 2019 • edited Loading

dashed commented Jun 24, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dashed left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lynnagara commented Jul 19, 2019

HazAT commented Jun 24, 2019 •

edited by lynnagara

Loading

dashed commented Jun 24, 2019 •

edited

Loading