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
• 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.