⬆️ Upgrade to TypeScript 5 (#4415)

* Upgrade to TypeScript 5 * Fix type issues * Upgrade prettier * Fix linting
Joystream · Jun 9, 2023 · 36b9aa0 · 36b9aa0 · vercel · Jun 9, 2023
1 parent 1e272f9
commit 36b9aa0
Show file tree

Hide file tree

Showing 16 changed files with 80 additions and 148 deletions.
diff --git a/packages/markdown-editor/package.json b/packages/markdown-editor/package.json
@@ -38,12 +38,12 @@
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "terser-webpack-plugin": "^5.2.5",
     "ts-loader": "^9.2.6",
     "ts-node": "^10.4.0",
-    "typescript": "4.4.3",
+    "typescript": "5",
     "webpack": "5",
     "webpack-cli": "5"
   }

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -122,7 +122,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.6.12",
     "faker": "^5.5.3",
-    "fork-ts-checker-webpack-plugin": "^6.4.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.3.2",
     "i18next-json-csv-converter": "^0.2.0",
     "jest": "^27.2.5",
@@ -132,13 +132,13 @@
     "loader": "^2.1.1",
     "miragejs": "^0.1.42",
     "mock-local-storage": "^1.1.17",
-    "prettier": "^2.4.1",
+    "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "storybook": "^7.0.18",
     "ts-loader": "^9.2.6",
     "ts-node": "^10.4.0",
     "tsconfig-paths": "^3.11.0",
-    "typescript": "4.4.3",
+    "typescript": "5",
     "webpack": "5",
     "webpack-cli": "5",
     "webpack-dev-server": "^4.5.0",

diff --git a/packages/ui/src/accounts/components/AccountItem/components/styles.ts b/packages/ui/src/accounts/components/AccountItem/components/styles.ts
@@ -41,7 +41,7 @@ export const DetailsName = styled.h6`
 `
 
 export const ValueCell = styled.div<{ isRecoverable?: boolean }>`
-  grid-column: ${({ isRecoverable }) => (isRecoverable ? 4 : 3)}; ;
+  grid-column: ${({ isRecoverable }) => (isRecoverable ? 4 : 3)};
 `
 
 export const ButtonsCell = styled.div`

diff --git a/packages/ui/src/accounts/types/balances.ts b/packages/ui/src/accounts/types/balances.ts
@@ -21,7 +21,7 @@ export const WorkerLocks = [
   'Distribution Worker',
 ] as const
 
-export type WorkerLockType = typeof WorkerLocks[number]
+export type WorkerLockType = (typeof WorkerLocks)[number]
 
 export type LockType =
   | PolkadotStakingLock

diff --git a/packages/ui/src/common/components/buttons/Toggle.tsx b/packages/ui/src/common/components/buttons/Toggle.tsx
@@ -1,8 +1,8 @@
+import { isFunction } from 'lodash'
 import React, { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 
 import { BorderRad, Colors, Transitions } from '../../constants'
-import { isFunction } from '../../utils'
 import { Arrow, Icon } from '../icons'
 
 import { ButtonBareGhost } from './Buttons'

diff --git a/packages/ui/src/common/components/selects/MultiSelect.tsx b/packages/ui/src/common/components/selects/MultiSelect.tsx
@@ -1,3 +1,4 @@
+import { isNull } from 'lodash'
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
 
@@ -38,7 +39,7 @@ export const MultiSelect = <T extends any>({
 
   const change = useCallback(
     (pickedOption: T | null) => {
-      if (pickedOption === null) {
+      if (isNull(pickedOption)) {
         onChange([])
       } else {
         const isPickedOption = equals(pickedOption)

diff --git a/packages/ui/src/common/components/selects/SimpleSelect.tsx b/packages/ui/src/common/components/selects/SimpleSelect.tsx
@@ -72,7 +72,7 @@ export const SimpleSelect = <Option extends any, Value extends any = Option>({
   selectSize,
   renderOption = String,
   renderSelected,
-  valueToOption = (value) => value as Option,
+  valueToOption = (value) => value as unknown as Option, // The default only works if Value and Option are the same type
   optionEquals = (optionA) => (optionB) => optionA === optionB,
   value,
   onChange,

diff --git a/packages/ui/src/common/components/statistics/BlockDurationStatistics.tsx b/packages/ui/src/common/components/statistics/BlockDurationStatistics.tsx
@@ -22,7 +22,7 @@ const format = splitDuration([
   [A_MINUTE / MILLISECONDS_PER_BLOCK, 'min'],
 ])
 
-export const formatDuration = (duration: number): [string | number, string][] => {
+export const formatDuration = (duration: number): ['< 1' | number, string][] => {
   if (duration < A_MINUTE / MILLISECONDS_PER_BLOCK) {
     return [['< 1', 'min']]
   }

diff --git a/packages/ui/src/common/utils.ts b/packages/ui/src/common/utils.ts
@@ -6,8 +6,6 @@ type Obj = Record<string, any>
 
 // Type guards
 
-export const isFunction = (something: unknown): something is CallableFunction => typeof something === 'function'
-
 export const isDefined = <T extends any>(something: T | undefined): something is T => typeof something !== 'undefined'
 
 export const isNumber = (something: unknown): something is number => typeof something === 'number'
@@ -50,7 +48,7 @@ export const equals = <T extends any>(
   reference: T,
   { depth = 1, ...option }: EqualsOption = {}
 ): ((compared: T) => boolean) => {
-  if (depth > 0 && isRecord(reference)) {
+  if (depth && isRecord(reference)) {
     const isEqual = objectEquals(reference, { depth, ...option })
     return (compared) => isRecord(compared) && isEqual(compared)
   } else {
@@ -70,7 +68,7 @@ export const definedValues = <T extends Record<any, any>>(obj: T): T =>
 
 // Lists:
 
-export const dedupeObjects = <T>(list: T[], options?: EqualsOption): T[] =>
+export const dedupeObjects = <T extends Obj>(list: T[], options?: EqualsOption): T[] =>
   list.reduce((remain: T[], item) => [...remain, ...(remain.some(objectEquals(item, options)) ? [] : [item])], [])
 
 export const intersperse = <T extends any, S extends any>(

diff --git a/packages/ui/src/forum/modals/CreateThreadModal/CreateThreadModal.tsx b/packages/ui/src/forum/modals/CreateThreadModal/CreateThreadModal.tsx
@@ -26,7 +26,7 @@ import {
   ThreadFormFields,
 } from './CreateThreadDetailsModal'
 import { CreateThreadSuccessModal } from './CreateThreadSuccessModal'
-import { createThreadMachine } from './machine'
+import { createThreadMachine, TransactionContext } from './machine'
 
 export const CreateThreadModal = () => {
   const { active: member } = useMyMemberships()
@@ -91,7 +91,7 @@ export const CreateThreadModal = () => {
 
   if (state.matches('transaction') && api && postDeposit && threadDeposit && balance) {
     const { topic, description } = form.getValues()
-    const { memberId, categoryId, controllerAccount } = state.context
+    const { memberId, categoryId, controllerAccount } = state.context as TransactionContext
     const transaction = api.tx.forum.createThread(
       memberId,
       categoryId,
@@ -117,7 +117,8 @@ export const CreateThreadModal = () => {
   }
 
   if (state.matches('success')) {
-    return <CreateThreadSuccessModal newThreadId={state.context.newThreadId.toString()} />
+    const { newThreadId } = state.context as Required<TransactionContext>
+    return <CreateThreadSuccessModal newThreadId={newThreadId.toString()} />
   }
 
   if (state.matches('requirementsFailed') && member && minimumTransactionCost) {

diff --git a/packages/ui/src/forum/modals/CreateThreadModal/machine.ts b/packages/ui/src/forum/modals/CreateThreadModal/machine.ts
@@ -19,7 +19,7 @@ interface DetailsContext {
   controllerAccount?: Account
 }
 
-interface TransactionContext extends Required<DetailsContext> {
+export interface TransactionContext extends Required<DetailsContext> {
   newThreadId?: u64
   transactionEvents?: EventRecord[]
 }

diff --git a/packages/ui/src/overview/components/DeadlineList/ElectionListItem.tsx b/packages/ui/src/overview/components/DeadlineList/ElectionListItem.tsx
@@ -1,3 +1,4 @@
+import { isUndefined } from 'lodash'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -6,6 +7,7 @@ import { ListItem } from '@/common/components/List'
 import { formatDuration } from '@/common/components/statistics'
 import { DurationValue } from '@/common/components/typography/DurationValue'
 import { Subscription } from '@/common/components/typography/Subscription'
+import { A_DAY } from '@/common/constants'
 import { isDefined } from '@/common/utils'
 import { useCouncilRemainingPeriod } from '@/council/hooks/useCouncilRemainingPeriod'
 import { useElectionStage } from '@/council/hooks/useElectionStage'
@@ -42,20 +44,15 @@ export const ElectionListItem: React.FC<ElectionListItemProps> = React.memo(({ h
   const { votes = [] } = useMyCastVotes(electionStage === 'revealing' ? election.cycleId : undefined)
   const timeRemaining = formatDuration(remainingPeriod ?? 0)
 
-  const remainingCalculation = useMemo(() => {
-    const dayChecker = timeRemaining[0][1] === 'd'
-    const dayNumberChecker = timeRemaining[0][0]
-    if (
-      (dayNumberChecker < 1 && dayChecker) ||
-      (timeRemaining[0][1] !== 'd' && timeRemaining[0][1] !== 'w') ||
-      dayNumberChecker === 0
-    ) {
+  const urgency = useMemo(() => {
+    if (isUndefined(remainingPeriod)) return
+    if (remainingPeriod <= A_DAY) {
       return '1day'
     }
-    if (dayNumberChecker > 1 && dayNumberChecker < 3 && dayChecker) {
+    if (remainingPeriod <= 3 * A_DAY) {
       return '3day'
     }
-  }, [])
+  }, [remainingPeriod])
 
   const getCopyMessage = useMemo(() => {
     const urlAddress = '#/election'
@@ -99,7 +96,7 @@ export const ElectionListItem: React.FC<ElectionListItemProps> = React.memo(({ h
     <ElementWrapper>
       <ListItem>
         <TopElementsWrapper>
-          <StyledTriangle deadlineTime={remainingCalculation} />{' '}
+          <StyledTriangle deadlineTime={urgency} />{' '}
           <StyledClosedButton onClick={() => hideForStorage(`${election.cycleId}:${electionStage}`)} />
         </TopElementsWrapper>
         <ContentWrapper>

diff --git a/packages/ui/src/proposals/types/ProposalsActivities/casts.ts b/packages/ui/src/proposals/types/ProposalsActivities/casts.ts
@@ -81,13 +81,15 @@ const asProposalDiscussionModeChangedActivity: ProposalActivityCast<
   newMode: fields.newMode.__typename === 'ProposalDiscussionThreadModeClosed' ? 'closed' : 'open',
 })
 
-const asProposalExecutedActivity: ProposalActivityCast<ProposalExecutedEventFieldsFragment, ProposalExecutedActivity> =
-  (fields) => ({
-    eventType: fields.__typename,
-    ...asBaseActivity(fields),
-    proposal: asProposalFields(fields.proposal),
-    executedSuccessfully: fields.executionStatus.__typename === 'ProposalStatusExecuted',
-  })
+const asProposalExecutedActivity: ProposalActivityCast<
+  ProposalExecutedEventFieldsFragment,
+  ProposalExecutedActivity
+> = (fields) => ({
+  eventType: fields.__typename,
+  ...asBaseActivity(fields),
+  proposal: asProposalFields(fields.proposal),
+  executedSuccessfully: fields.executionStatus.__typename === 'ProposalStatusExecuted',
+})
 
 const asProposalVotedActivity: ProposalActivityCast<ProposalVotedEventFieldsFragment, ProposalVotedActivity> = (
   fields

diff --git a/packages/ui/src/proxyApi/client/query.ts b/packages/ui/src/proxyApi/client/query.ts
@@ -39,7 +39,7 @@ export const query = <K extends ApiQueryKinds>(
   )
 
   return apiInterfaceProxy<K>((module, ...path) => (...params) => {
-    const callId = uniqueId(`${apiKind}.${module}.${path.join('.')}.`)
+    const callId = uniqueId(`${apiKind}.${String(module)}.${path.join('.')}.`)
 
     postMessage({
       messageType: apiKind,

diff --git a/packages/ui/src/proxyApi/client/tx.ts b/packages/ui/src/proxyApi/client/tx.ts
@@ -8,7 +8,7 @@ import { deserializeMessage } from '../models/payload'
 import { PostMessage, ProxyPromisePayload, RawWorkerMessageEvent } from '../types'
 import { apiInterfaceProxy } from '../utils/proxy'
 
-type ObservableMethods = typeof ObservableMethods[number]
+type ObservableMethods = (typeof ObservableMethods)[number]
 
 export type TxModule = keyof ProxyApi['tx']