diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 96a6f535877a..ae2f6ba99392 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -1,30 +1,32 @@
 import React, {ForwardedRef} from 'react';
-// eslint-disable-next-line no-restricted-imports
 import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
 import type {TextStyle} from 'react-native';
 import fontFamily from '@styles/fontFamily';
 import useTheme from '@styles/themes/useTheme';
 import variables from '@styles/variables';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type TextProps = RNTextProps & {
-    /** The color of the text */
-    color?: string;
+type TextProps = RNTextProps &
+    ChildrenProps & {
+        /** The color of the text */
+        color?: string;
 
-    /** The size of the text */
-    fontSize?: number;
+        /** The size of the text */
+        fontSize?: number;
 
-    /** The alignment of the text */
-    textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify';
+        /** The alignment of the text */
+        textAlign?: TextStyle['textAlign'];
 
-    /** Any children to display */
-    children: React.ReactNode;
+        /** Any children to display */
+        children: React.ReactNode;
 
-    /** The family of the font to use */
-    family?: keyof typeof fontFamily;
-};
+        /** The family of the font to use */
+        family?: keyof typeof fontFamily;
+    };
 
-function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
+function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
     const theme = useTheme();
+
     const componentStyle: TextStyle = {
         color: color ?? theme.text,
         fontSize,
@@ -36,6 +38,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c
     if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
         componentStyle.lineHeight = variables.fontSizeNormalHeight;
     }
+
     return (
         <RNText
             allowFontScaling={false}
@@ -52,3 +55,4 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c
 Text.displayName = 'Text';
 
 export default React.forwardRef(Text);
+export type {TextProps};
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
deleted file mode 100644
index 46c074eb79e6..000000000000
--- a/src/components/TextLink.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import _ from 'underscore';
-import useEnvironment from '@hooks/useEnvironment';
-import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
-import * as Link from '@userActions/Link';
-import CONST from '@src/CONST';
-import refPropTypes from './refPropTypes';
-import Text from './Text';
-
-const propTypes = {
-    /** Link to open in new tab */
-    href: PropTypes.string,
-
-    /** Text content child */
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).isRequired,
-
-    /** Additional style props */
-    style: stylePropTypes,
-
-    /** Overwrites the default link behavior with a custom callback */
-    onPress: PropTypes.func,
-
-    /** Callback that is called when mousedown is triggered */
-    onMouseDown: PropTypes.func,
-
-    /** A ref to forward to text */
-    forwardedRef: refPropTypes,
-};
-
-const defaultProps = {
-    forwardedRef: undefined,
-    href: undefined,
-    style: [],
-    onPress: undefined,
-    onMouseDown: (event) => event.preventDefault(),
-};
-
-function TextLink(props) {
-    const {environmentURL} = useEnvironment();
-    const styles = useThemeStyles();
-    const rest = _.omit(props, _.keys(propTypes));
-    const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
-
-    /**
-     * @param {Event} event
-     */
-    const openLink = (event) => {
-        event.preventDefault();
-        if (props.onPress) {
-            props.onPress();
-            return;
-        }
-
-        Link.openLink(props.href, environmentURL);
-    };
-
-    /**
-     * @param {Event} event
-     */
-    const openLinkIfEnterKeyPressed = (event) => {
-        if (event.key !== 'Enter') {
-            return;
-        }
-        openLink(event);
-    };
-
-    return (
-        <Text
-            style={[styles.link, ...additionalStyles]}
-            role={CONST.ACCESSIBILITY_ROLE.LINK}
-            href={props.href}
-            onPress={openLink}
-            onMouseDown={props.onMouseDown}
-            onKeyDown={openLinkIfEnterKeyPressed}
-            ref={props.forwardedRef}
-            suppressHighlighting
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...rest}
-        >
-            {props.children}
-        </Text>
-    );
-}
-
-TextLink.defaultProps = defaultProps;
-TextLink.propTypes = propTypes;
-TextLink.displayName = 'TextLink';
-
-const TextLinkWithRef = React.forwardRef((props, ref) => (
-    <TextLink
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-TextLinkWithRef.displayName = 'TextLinkWithRef';
-
-export default TextLinkWithRef;
diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx
new file mode 100644
index 000000000000..95c456ddc8e3
--- /dev/null
+++ b/src/components/TextLink.tsx
@@ -0,0 +1,79 @@
+import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler} from 'react';
+import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native';
+import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as Link from '@userActions/Link';
+import CONST from '@src/CONST';
+import Text, {TextProps} from './Text';
+
+type LinkProps = {
+    /** Link to open in new tab */
+    href: string;
+
+    onPress?: undefined;
+};
+
+type PressProps = {
+    href?: undefined;
+
+    /** Overwrites the default link behavior with a custom callback */
+    onPress: () => void;
+};
+
+type TextLinkProps = (LinkProps | PressProps) &
+    TextProps & {
+        /** Additional style props */
+        style?: StyleProp<TextStyle>;
+
+        /** Callback that is called when mousedown is triggered */
+        onMouseDown?: MouseEventHandler;
+    };
+
+function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef<RNText>) {
+    const {environmentURL} = useEnvironment();
+    const styles = useThemeStyles();
+
+    const openLink = () => {
+        if (onPress) {
+            onPress();
+        } else {
+            Link.openLink(href, environmentURL);
+        }
+    };
+
+    const openLinkOnTap = (event: GestureResponderEvent) => {
+        event.preventDefault();
+
+        openLink();
+    };
+
+    const openLinkOnEnterKey: KeyboardEventHandler = (event) => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        event.preventDefault();
+
+        openLink();
+    };
+
+    return (
+        <Text
+            style={[styles.link, style]}
+            role={CONST.ACCESSIBILITY_ROLE.LINK}
+            href={href}
+            onPress={openLinkOnTap}
+            onKeyDown={openLinkOnEnterKey}
+            onMouseDown={onMouseDown}
+            ref={ref}
+            suppressHighlighting
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+        >
+            {children}
+        </Text>
+    );
+}
+
+TextLink.displayName = 'TextLink';
+
+export default forwardRef(TextLink);