Bump to typescript@5.1 (#50557)

We need to upgrade TypeScript to land the following fixes:

- #50289
- #48018

And it should fix async components:
- https://twitter.com/sebsilbermann/status/1664356039876124672

Also see this related TS 5.0 issue:

- microsoft/TypeScript#53402

package.json

@@ -90,7 +90,7 @@
     "@types/jest": "24.0.13",
     "@types/node": "20.2.5",
     "@types/node-fetch": "2.6.1",
-    "@types/react": "18.2.7",
+    "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",
     "@types/relay-runtime": "13.0.0",
     "@types/selenium-webdriver": "4.0.15",
@@ -233,7 +233,7 @@
     "tree-kill": "1.2.2",
     "tsec": "0.2.1",
     "turbo": "1.9.6",
-    "typescript": "4.8.2",
+    "typescript": "5.1.3",
     "unfetch": "4.2.0",
     "wait-port": "0.2.2",
     "webpack": "5.74.0",

packages/next/src/client/route-loader.ts

@@ -45,12 +45,12 @@ interface Future<V> {
   resolve: (entrypoint: V) => void
   future: Promise<V>
 }
-function withFuture<T>(
+function withFuture<T extends object>(
   key: string,
   map: Map<string, Future<T> | T>,
   generator?: () => Promise<T>
 ): Promise<T> {
-  let entry: Future<T> | T | undefined = map.get(key)
+  let entry = map.get(key)
   if (entry) {
     if ('future' in entry) {
       return entry.future

packages/next/src/server/lib/patch-fetch.ts

@@ -496,7 +496,8 @@ export function patchFetch({
             if (
               typeof next.revalidate === 'number' &&
               (typeof staticGenerationStore.revalidate === 'undefined' ||
-                next.revalidate < staticGenerationStore.revalidate)
+                (typeof staticGenerationStore.revalidate === 'number' &&
+                  next.revalidate < staticGenerationStore.revalidate))
             ) {
               const forceDynamic = staticGenerationStore.forceDynamic
 

packages/next/src/server/typescript/index.ts

@@ -25,13 +25,12 @@ import entryDefault from './rules/entry'
 import clientBoundary from './rules/client-boundary'
 import metadata from './rules/metadata'
 import errorEntry from './rules/error'
+import type tsModule from 'typescript/lib/tsserverlibrary'
 
-export function createTSPlugin(modules: {
-  typescript: typeof import('typescript/lib/tsserverlibrary')
-}) {
-  const ts = modules.typescript
-
-  function create(info: ts.server.PluginCreateInfo) {
+export const createTSPlugin: tsModule.server.PluginModuleFactory = ({
+  typescript: ts,
+}) => {
+  function create(info: tsModule.server.PluginCreateInfo) {
     init({
       ts,
       info,
@@ -91,7 +90,7 @@ export function createTSPlugin(modules: {
           prior.entries.push(
             ...entryDefault.getCompletionsAtPosition(
               fileName,
-              node as ts.FunctionDeclaration,
+              node as tsModule.FunctionDeclaration,
               position
             )
           )
@@ -106,10 +105,10 @@ export function createTSPlugin(modules: {
       fileName: string,
       position: number,
       entryName: string,
-      formatOptions: ts.FormatCodeOptions,
+      formatOptions: tsModule.FormatCodeOptions,
       source: string,
-      preferences: ts.UserPreferences,
-      data: ts.CompletionEntryData
+      preferences: tsModule.UserPreferences,
+      data: tsModule.CompletionEntryData
     ) => {
       const entryCompletionEntryDetails = entryConfig.getCompletionEntryDetails(
         entryName,

packages/next/src/server/typescript/rules/client-boundary.ts

@@ -2,15 +2,16 @@
 
 import { NEXT_TS_ERRORS } from '../constant'
 import { getTs, getTypeChecker } from '../utils'
+import type tsModule from 'typescript/lib/tsserverlibrary'
 
 const clientBoundary = {
   getSemanticDiagnosticsForExportVariableStatement(
-    source: ts.SourceFile,
-    node: ts.VariableStatement
+    source: tsModule.SourceFile,
+    node: tsModule.VariableStatement
   ) {
     const ts = getTs()
 
-    const diagnostics: ts.Diagnostic[] = []
+    const diagnostics: tsModule.Diagnostic[] = []
 
     if (ts.isVariableDeclarationList(node.declarationList)) {
       for (const declaration of node.declarationList.declarations) {
@@ -30,21 +31,21 @@ const clientBoundary = {
   },
 
   getSemanticDiagnosticsForFunctionExport(
-    source: ts.SourceFile,
-    node: ts.FunctionDeclaration | ts.ArrowFunction
+    source: tsModule.SourceFile,
+    node: tsModule.FunctionDeclaration | tsModule.ArrowFunction
   ) {
     const ts = getTs()
     const typeChecker = getTypeChecker()
     if (!typeChecker) return []
 
-    const diagnostics: ts.Diagnostic[] = []
+    const diagnostics: tsModule.Diagnostic[] = []
 
     const isErrorFile = /[\\/]error\.tsx?$/.test(source.fileName)
     const isGlobalErrorFile = /[\\/]global-error\.tsx?$/.test(source.fileName)
 
     const props = node.parameters?.[0]?.name
     if (props && ts.isObjectBindingPattern(props)) {
-      for (const prop of (props as ts.ObjectBindingPattern).elements) {
+      for (const prop of (props as tsModule.ObjectBindingPattern).elements) {
         const type = typeChecker.getTypeAtLocation(prop)
         const typeDeclarationNode = type.symbol?.getDeclarations()?.[0]
         const propName = (prop.propertyName || prop.name).getText()

packages/next/src/server/typescript/rules/config.ts

@@ -11,6 +11,7 @@ import {
   ALLOWED_EXPORTS,
   LEGACY_CONFIG_EXPORT,
 } from '../constant'
+import type tsModule from 'typescript/lib/tsserverlibrary'
 
 const API_DOCS: Record<
   string,
@@ -135,7 +136,7 @@ const API_DOCS: Record<
 function visitEntryConfig(
   fileName: string,
   position: number,
-  callback: (entryEonfig: string, value: ts.VariableDeclaration) => void
+  callback: (entryEonfig: string, value: tsModule.VariableDeclaration) => void
 ) {
   const source = getSource(fileName)
   if (source) {
@@ -177,7 +178,7 @@ function createAutoCompletionOptionName(sort: number, name: string) {
       exportName: name,
       moduleSpecifier: 'next/typescript/entry_option_name',
     },
-  } as ts.CompletionEntry
+  } as tsModule.CompletionEntry
 }
 
 function createAutoCompletionOptionValue(
@@ -200,7 +201,7 @@ function createAutoCompletionOptionValue(
       exportName: apiName,
       moduleSpecifier: 'next/typescript/entry_option_value',
     },
-  } as ts.CompletionEntry
+  } as tsModule.CompletionEntry
 }
 
 function getAPIDescription(api: string): string {
@@ -217,7 +218,7 @@ const config = {
   addCompletionsAtPosition(
     fileName: string,
     position: number,
-    prior: ts.WithMetadata<ts.CompletionInfo>
+    prior: tsModule.WithMetadata<tsModule.CompletionInfo>
   ) {
     visitEntryConfig(fileName, position, (entryConfig, declaration) => {
       if (!API_DOCS[entryConfig]) {
@@ -245,7 +246,7 @@ const config = {
   getQuickInfoAtPosition(fileName: string, position: number) {
     const ts = getTs()
 
-    let overriden: ts.QuickInfo | undefined
+    let overriden: tsModule.QuickInfo | undefined
     visitEntryConfig(fileName, position, (entryConfig, declaration) => {
       if (!API_DOCS[entryConfig]) return
 
@@ -326,7 +327,10 @@ const config = {
   },
 
   // Show details on the side when auto completing.
-  getCompletionEntryDetails(entryName: string, data: ts.CompletionEntryData) {
+  getCompletionEntryDetails(
+    entryName: string,
+    data: tsModule.CompletionEntryData
+  ) {
     const ts = getTs()
     if (
       data &&
@@ -358,12 +362,12 @@ const config = {
 
   // Show errors for invalid export fields.
   getSemanticDiagnosticsForExportVariableStatement(
-    source: ts.SourceFile,
-    node: ts.VariableStatement
+    source: tsModule.SourceFile,
+    node: tsModule.VariableStatement
   ) {
     const ts = getTs()
 
-    const diagnostics: ts.Diagnostic[] = []
+    const diagnostics: tsModule.Diagnostic[] = []
 
     // Check if it has correct option exports
     if (ts.isVariableDeclarationList(node.declarationList)) {

packages/next/src/server/typescript/rules/entry.ts

@@ -8,19 +8,21 @@ import {
 } from '../constant'
 import { getTs, isPageFile, isPositionInsideNode } from '../utils'
 
+import type tsModule from 'typescript/lib/tsserverlibrary'
+
 const entry = {
   // Give auto completion for the component's props
   getCompletionsAtPosition(
     fileName: string,
-    node: ts.FunctionDeclaration,
+    node: tsModule.FunctionDeclaration,
     position: number
   ) {
     const ts = getTs()
-    const entries: ts.CompletionEntry[] = []
+    const entries: tsModule.CompletionEntry[] = []
 
     // Default export function might not accept parameters
     const paramNode = node.parameters?.[0] as
-      | ts.ParameterDeclaration
+      | tsModule.ParameterDeclaration
       | undefined
 
     if (paramNode && isPositionInsideNode(position, paramNode)) {
@@ -71,7 +73,7 @@ const entry = {
                   labelDetails: {
                     description: `Next.js ${type} prop`,
                   },
-                } as ts.CompletionEntry)
+                } as tsModule.CompletionEntry)
               }
             }
 
@@ -93,7 +95,7 @@ const entry = {
                   labelDetails: {
                     description: `Next.js ${type} prop type`,
                   },
-                } as ts.CompletionEntry)
+                } as tsModule.CompletionEntry)
               }
 
               break
@@ -109,8 +111,8 @@ const entry = {
   // Give error diagnostics for the component
   getSemanticDiagnostics(
     fileName: string,
-    source: ts.SourceFile,
-    node: ts.FunctionDeclaration
+    source: tsModule.SourceFile,
+    node: tsModule.FunctionDeclaration
   ) {
     const ts = getTs()
 
@@ -136,11 +138,11 @@ const entry = {
       type = 'layout'
     }
 
-    const diagnostics: ts.Diagnostic[] = []
+    const diagnostics: tsModule.Diagnostic[] = []
 
     const props = node.parameters?.[0]?.name
     if (props && ts.isObjectBindingPattern(props)) {
-      for (const prop of (props as ts.ObjectBindingPattern).elements) {
+      for (const prop of props.elements) {
         const propName = (prop.propertyName || prop.name).getText()
         if (!validProps.includes(propName)) {
           diagnostics.push({

packages/next/src/server/typescript/rules/error.ts

@@ -2,12 +2,13 @@
 
 import { NEXT_TS_ERRORS } from '../constant'
 import { getTs } from '../utils'
+import type tsModule from 'typescript/lib/tsserverlibrary'
 
 const errorEntry = {
   getSemanticDiagnostics(
-    source: ts.SourceFile,
+    source: tsModule.SourceFile,
     isClientEntry: boolean
-  ): ts.Diagnostic[] {
+  ): tsModule.Diagnostic[] {
     const isErrorFile = /[\\/]error\.tsx?$/.test(source.fileName)
     const isGlobalErrorFile = /[\\/]global-error\.tsx?$/.test(source.fileName)