Leveraging TypeScript with Fortis: A Seamless Development Experience

Fortis, a versatile JavaScript project for building user interfaces using JSX, has a strong foundation in TypeScript. This integration provides developers with a robust, type-safe, and highly productive environment. In this article, we'll explore the benefits of TypeScript usage in Fortis, including the availability of definitions, excellent IntelliSense support, and how props are handled for both web components and function components.

TypeScript in Fortis

Fortis is Written in TypeScript

One of the notable advantages of Fortis is that it's built with TypeScript from the ground up. This means that the entire codebase, including the core library and its components, is authored in TypeScript. This results in a codebase that is not only strongly typed but also highly maintainable and readable.

TypeScript Definitions Included

When working with Fortis, you'll have the TypeScript definitions readily available. The Fortis project includes comprehensive type definitions, which means you can enjoy the benefits of autocompletion, type checking, and detailed code documentation right out of the box. This feature makes it easy to leverage TypeScript's strengths for your Fortis projects.

Perfect IntelliSense Support

The deep TypeScript integration in Fortis ensures that you get precise and accurate IntelliSense support. You can expect intelligent autocompletion suggestions, real-time error checking, and detailed code analysis to enhance your coding experience. This powerful tooling helps you write clean and error-free code efficiently.

Handling Props in Fortis

Web Components: Inferred Props

When creating a web component in Fortis, the props are inferred from the first parameter of the Component function. This means that you don't need to explicitly define prop types for your components; Fortis automatically infers them based on the input you provide to the Component function.

Here's an example of a web component in Fortis with inferred props:

import {Component} from 'fortis';
 
class WebComponent extends Component({
	message: Required.string,
	count: Required.number,
}) {
	render() {
		return <div>{this.props.message} - {this.props.count}</div>;
	}
}

In this example, Fortis automatically infers the message and count props from the object passed to the Component function.

Function Components: Specified Props

In contrast to web components, function components in Fortis specify their props as a type argument of the FunctionComponent generic. This approach is similar to how props are declared in React's function components.

Here's an example of a function component in Fortis with specified props:

import {FunctionComponent} from 'fortis';
 
const FunctionalComponent: FunctionComponent<{
	message: string, 
	count: number
}> = ({message, count}) => {
	return <div>{message} - {count}</div>;
};

In this example, the FunctionComponent generic is used to specify the prop types that the component expects. This explicit declaration provides type safety and clarity when defining props for function components.

Conclusion

TypeScript is a powerful asset when working with Fortis, enhancing the development experience with type checking, definitions, and outstanding IntelliSense support. In Fortis, props handling differs between web components and function components, allowing you to choose the approach that best suits your project's needs. Whether you're building web components or function components, TypeScript integration in Fortis ensures a smooth and reliable development process, helping you create robust and maintainable user interfaces.