Switch FURN to use Typescript 5.x (#3986)

JasonVMo · web-flow · commit b30b0b3d9145 · 2026-01-13T10:39:15.000-08:00
* switch repo to typescript 5.x

* Change files

* remove text behavior change from type fixes
diff --git a/apps/E2E/package.json b/apps/E2E/package.json
@@ -76,7 +76,6 @@
     "metro-config": "^0.80.3",
     "rimraf": "^5.0.1",
     "ts-node": "^10.7.0",
-    "typescript": "^5.8.0",
     "webdriverio": "catalog:"
   },
   "installConfig": {
diff --git a/apps/fluent-tester/package.json b/apps/fluent-tester/package.json
@@ -126,7 +126,6 @@
     "react-native-svg-transformer": "^1.0.0",
     "react-native-test-app": "^3.9.2",
     "react-test-renderer": "18.2.0",
-    "typescript": "^5.8.0",
     "webdriverio": "catalog:"
   },
   "jest": {
diff --git a/apps/win32/package.json b/apps/win32/package.json
@@ -56,8 +56,7 @@
     "metro-config": "^0.80.3",
     "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.2.0",
-    "rimraf": "^5.0.1",
-    "typescript": "4.9.4"
+    "rimraf": "^5.0.1"
   },
   "jest": {
     "preset": "react-native"
diff --git a/change/@fluentui-react-native-2552706f-e2bf-48ec-9338-40f70585ef0a.json b/change/@fluentui-react-native-2552706f-e2bf-48ec-9338-40f70585ef0a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui/react-native",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-composition-963099f4-6c7f-4550-b115-cf4c2aef586c.json b/change/@fluentui-react-native-composition-963099f4-6c7f-4550-b115-cf4c2aef586c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-e2e-testing-0c3def4f-56a5-4bb1-a0a6-8ab07b83a644.json b/change/@fluentui-react-native-e2e-testing-0c3def4f-56a5-4bb1-a0a6-8ab07b83a644.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-framework-base-e2a8b64d-6fa9-4391-a923-ec253f174196.json b/change/@fluentui-react-native-framework-base-e2a8b64d-6fa9-4391-a923-ec253f174196.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/framework-base",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-link-03b8b201-a7f2-48c0-9cc1-b46312059e92.json b/change/@fluentui-react-native-link-03b8b201-a7f2-48c0-9cc1-b46312059e92.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/link",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-menu-f3879ad2-c25c-4130-88c4-d016f9973466.json b/change/@fluentui-react-native-menu-f3879ad2-c25c-4130-88c4-d016f9973466.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-b64bc336-b954-4a11-9265-d74646de4651.json b/change/@fluentui-react-native-tester-b64bc336-b954-4a11-9265-d74646de4651.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-win32-3a4e8f94-8fa9-4d13-960b-0edf342aea99.json b/change/@fluentui-react-native-tester-win32-3a4e8f94-8fa9-4d13-960b-0edf342aea99.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-text-67789c0c-338f-4dba-95db-266880f9c1e2.json b/change/@fluentui-react-native-text-67789c0c-338f-4dba-95db-266880f9c1e2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/text",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-use-slot-1fce7885-a2a7-4a22-859c-7b856fc86b40.json b/change/@fluentui-react-native-use-slot-1fce7885-a2a7-4a22-859c-7b856fc86b40.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@fluentui-react-native/use-slot",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@uifabricshared-theming-react-native-a5e7705e-dcba-45bf-af47-d25599dcd0fb.json b/change/@uifabricshared-theming-react-native-a5e7705e-dcba-45bf-af47-d25599dcd0fb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "switch repo to typescript 5.x",
+  "packageName": "@uifabricshared/theming-react-native",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "prettier": "^2.4.1",
     "react": "18.2.0",
     "react-native": "^0.74.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.8.0"
   },
   "workspaces": [
     "apps/*",
diff --git a/packages/components/Link/src/useLink.ts b/packages/components/Link/src/useLink.ts
@@ -12,7 +12,7 @@ import {
 import type { LinkProps, LinkInfo } from './Link.types';
 
 /*These callbacks are not implemented on iOS/macOS, and cause Redboxes if passed in. Limit to only windows/win32 for now*/
-const isWinPlatform = Platform.OS === (('win32' as any) || 'windows');
+const isWinPlatform = Platform.OS === ('win32' as any) || Platform.OS === 'windows';
 const filteredProps = isWinPlatform
   ? {}
   : {
diff --git a/packages/components/Menu/src/MenuCallout/MenuCallout.android.tsx b/packages/components/Menu/src/MenuCallout/MenuCallout.android.tsx
@@ -41,8 +41,8 @@ export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
                 },
               ]}
             >
-              {context.menuHeight + tokens.minPadding >= tokens.maxHeight ||
-              context.menuHeight + tokens.minPadding >= mergedProps.maxHeight ? (
+              {context.menuHeight + tokens.minPadding >= (tokens.maxHeight as number) ||
+              context.menuHeight + tokens.minPadding >= (mergedProps.maxHeight as number) ? (
                 <AnimatedScrollView style={[context.animationStarted && context.menuSize]}>{children}</AnimatedScrollView>
               ) : (
                 <Animated.View style={[context.animationStarted && context.menuSize]}>{children}</Animated.View>
diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { Image, Platform, Pressable, View } from 'react-native';
 
-import type { Slots, UseSlots } from '@fluentui-react-native/framework';
+import type { Slots, UseSlots, FinalRender } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
@@ -43,8 +43,8 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
 export const menuItemFinalRender = (
   menuItem: MenuItemCheckboxInfo,
   Slots: Slots<MenuItemCheckboxSlotProps>,
-): React.FunctionComponent<MenuItemCheckboxProps> => {
-  return (final: MenuItemCheckboxProps, children: React.ReactNode) => {
+): FinalRender<MenuItemCheckboxProps> => {
+  return (final: MenuItemCheckboxProps, ...children: React.ReactNode[]) => {
     const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
 
     const checkmarkXml = `
diff --git a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { Image, Platform, Pressable, View } from 'react-native';
 
-import type { Slots, UseSlots } from '@fluentui-react-native/framework';
+import type { Slots, UseSlots, FinalRender } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { IconV1 as Icon } from '@fluentui-react-native/icon';
 import { TextV1 as Text } from '@fluentui-react-native/text';
@@ -39,8 +39,8 @@ export const MenuItemRadio = compose<MenuItemRadioType>({
 export const menuItemRadioFinalRender = (
   menuItem: MenuItemRadioInfo,
   Slots: Slots<MenuItemRadioSlotProps>,
-): React.FunctionComponent<MenuItemRadioProps> => {
-  return (final: MenuItemRadioProps, children: React.ReactNode) => {
+): FinalRender<MenuItemRadioProps> => {
+  return (final: MenuItemRadioProps, ...children: React.ReactNode[]) => {
     const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
 
     const checkmarkXml = `
diff --git a/packages/components/Text/src/Text.tsx b/packages/components/Text/src/Text.tsx
@@ -117,15 +117,15 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
     };
   }
 
-  const isWinPlatform = Platform.OS === (('win32' as any) || 'windows');
+  const isWin32Platform = Platform.OS === ('win32' as any);
   const filteredProps = {
-    onKeyUp: isWinPlatform ? onKeyUp : undefined,
-    keyUpEvents: isWinPlatform ? keyUpEvents : undefined,
+    onKeyUp: isWin32Platform ? onKeyUp : undefined,
+    keyUpEvents: isWin32Platform ? keyUpEvents : undefined,
     validKeysUp: undefined,
-    onKeyDown: isWinPlatform ? onKeyDown : undefined,
-    keyDownEvents: isWinPlatform ? keyDownEvents : undefined,
+    onKeyDown: isWin32Platform ? onKeyDown : undefined,
+    keyDownEvents: isWin32Platform ? keyDownEvents : undefined,
     validKeysDown: undefined,
-    onAccessibilityTap: isWinPlatform ? onAccTap : undefined,
+    onAccessibilityTap: isWin32Platform ? onAccTap : undefined,
   };
 
   // return a continuation function that allows this text to be compressed
diff --git a/packages/deprecated/theming-react-native/package.json b/packages/deprecated/theming-react-native/package.json
@@ -52,8 +52,7 @@
     "react": "18.2.0",
     "react-native": "^0.74.0",
     "react-native-macos": "^0.74.0",
-    "react-native-windows": "^0.74.0",
-    "typescript": "4.9.4"
+    "react-native-windows": "^0.74.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
diff --git a/packages/framework-base/src/component-patterns/render.types.ts b/packages/framework-base/src/component-patterns/render.types.ts
@@ -50,9 +50,13 @@ export type LegacyDirectComponent<TProps> = React.FunctionComponent<TProps> & {
 };
 
 /**
- * Legacy type name used for consistency with old rendering patterns.
+ * Slot function type used in the composition framework. Slot functions return React elements (not arbitrary ReactNode values)
+ * since they always either call staged render functions or React.createElement.
  */
-export type SlotFn<TProps> = LegacyDirectComponent<TProps>;
+export type SlotFn<TProps> = {
+  (props: TProps, ...children: React.ReactNode[]): React.ReactElement | null;
+  _canCompose?: boolean;
+};
 
 /**
  * MULTI-STAGE RENDERING
diff --git a/packages/framework/composition/src/composeFactory.ts b/packages/framework/composition/src/composeFactory.ts
@@ -1,6 +1,6 @@
 import type { MergeOptions } from '@fluentui-react-native/framework-base';
 import { immutableMergeCore } from '@fluentui-react-native/framework-base';
-import type { ComposableFunction } from '@fluentui-react-native/framework-base';
+import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
 import { stagedComponent } from '@fluentui-react-native/framework-base';
 import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
 import { buildUseSlots } from '@fluentui-react-native/use-slots';
@@ -25,7 +25,7 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
     /**
      * staged render function that takes props and a useSlots hook as an input
      */
-    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+    useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
 
     /**
      * optional statics to attach to the component
diff --git a/packages/framework/eslint-config-rules/tsconfig.json b/packages/framework/eslint-config-rules/tsconfig.json
@@ -5,5 +5,6 @@
     "checkJs": true,
     "noEmit": true
   },
-  "include": ["eslint.config.js"]
+  "include": ["eslint.config.js"],
+  "exclude": []
 }
diff --git a/packages/framework/use-slot/src/useSlot.ts b/packages/framework/use-slot/src/useSlot.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { mergeProps } from '@fluentui-react-native/framework-base';
 
-import type { SlotFn, NativeReactType } from '@fluentui-react-native/framework-base';
+import type { SlotFn, NativeReactType, FinalRender } from '@fluentui-react-native/framework-base';
 import type { ComposableFunction, StagedRender } from '@fluentui-react-native/framework-base';
 
 /**
@@ -27,9 +27,9 @@ export function useSlot<TProps>(
   component: NativeReactType | ComposableFunction<TProps>,
   props: TProps,
   filter?: (propName: string) => boolean,
-): React.FunctionComponent<TProps> {
+): SlotFn<TProps> {
   // some types to make things cleaner
-  type ResultHolder = { result: React.FunctionComponent<TProps> | TProps };
+  type ResultHolder = { result: FinalRender<TProps> | TProps };
   type MemoTuple = [SlotFn<TProps>, ResultHolder];
 
   // extract the staged component function if that pattern is being used, will be undefined if it is a standard component
@@ -54,8 +54,9 @@ export function useSlot<TProps>(
       }
 
       // now if result was a function then call it directly, if not go through the standard React.createElement process
+      // Type assertion is safe here because result is either FinalRender<TProps> (from stagedComponent) or TProps (props object)
       return typeof result === 'function'
-        ? (result as React.FunctionComponent)(props, ...children)
+        ? (result as FinalRender<TProps>)(props, ...children)
         : React.createElement(component, props, ...children);
     };
     // mark the slotFn so that withSlots knows to handle it differently
diff --git a/packages/libraries/core/tsconfig.json b/packages/libraries/core/tsconfig.json
@@ -11,8 +11,7 @@
     "noEmitOnError": true,
     "skipLibCheck": true,
     "noUnusedLocals": true,
-    "strict": true,
-    "suppressImplicitAnyIndexErrors": true
+    "strict": true
   },
   "include": ["src"]
 }
diff --git a/scripts/src/tasks/build.js b/scripts/src/tasks/build.js
@@ -104,6 +104,15 @@ function getBuildTargets(cwd = process.cwd()) {
 async function buildTarget(target, cwd) {
   const { module, outDir } = target;
   const extraArgs = ['--outDir', outDir, '--module', module];
+
+  // TypeScript 5.8+ requires moduleResolution to match module when using Node16
+  // Set moduleResolution to match the module setting
+  if (module === 'node16') {
+    extraArgs.push('--moduleResolution', 'node16');
+  } else if (module === 'esnext') {
+    extraArgs.push('--moduleResolution', 'bundler');
+  }
+
   const result = await runScript('tsc', ...extraArgs);
 
   if (result !== 0) {
diff --git a/tester_deps/package.json b/tester_deps/package.json
@@ -23,7 +23,7 @@
     "@wdio/spec-reporter": "^9.12.6",
     "appium": "^2.11.2",
     "appium-windows-driver": "^2.12.18",
-    "typescript": "^4.9.4",
+    "typescript": "^5.8.0",
     "webdriverio": "^9.12.6"
   },
   "resolutions": {
diff --git a/yarn.lock b/yarn.lock
