TypeScript FAQ

What is TypeScript?

TypeScript extends plain-old JavaScript with static typing. It can make code easier to understand and maintain by specifying properties and behavior more explicitly.

Interfaces, classes, and enums allow you to define custom types that describe data structures and behavior. You can also share properties and behavior between different types via inheritance.

Need to learn TypeScript? Dive into the documentation or the useful links below.

Useful Links

• TypeScript Essential Training on LinkedIn Learning
• Starter Template for TypeScript and React
• React TypeScript Cheatsheet
• React Type Definitions

Typing Interfaces

When converting PatternFly components to TypeScript, you'll need to specify a type for the interface as follows:

export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
  children: React.ReactNode;
  className?: string;
  isCompact?: boolean;
}

The type you use in React.HTMLProps<YOUR TYPE HERE> should reflect the type of the component you return. In cases where the component can return multiple components with different types, you should use a more generic type like HTMLElement.

To see available types, go to node_modules/typescript/lib/lib.dom.d.ts in the root PatternFly-React folder after running yarn install.

In some cases, you will need to avoid duplicating a type specified in React.HTMLProps<YOUR TYPE HERE>. You can use Omit for this purpose. In the example below, size and className are omitted from the inherited type HTMLHeadingElement and then specified within the interface TitleProps.

export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'> {
  /** the size of the Title  */
  size: keyof typeof BaseSizes;
  /** content rendered inside the Title */
  children?: React.ReactNode;
  /** Additional classes added to the Title */
  className?: string;
  /** the heading level to use */
  headingLevel?: TitleLevel;
}