Getting Started with React and TypeScript Pt.3 – Interfaces, Components & Hooks

Get started with React and TypeScript today. This tutorial will help you learn about interfaces and how to use them with class and functional components. It will also help you learn how to annotate React hooks. Learn what you need to know to get started with React and TypeScript! Getting Started With React and TypeScript Part 1. Getting Started With React and TypeScript Part 2. Interfaces In the previous part, you’ve learned what types you can work with in React and TypeScript. You’ve also learned about type inference so you know when it is up to you to annotate your code and when TypeScript will do this work for you. One thing that can help you a lot are interfaces. Put simply, an interface is a object-like collection of types. It is used to describe the shape, or structure, of some data. This data can be anything, function parameters (objects and arrays), data inside data types, class props, state props and variables. Types in interface are structured in the form of key/value pairs. In each pair, the key is the property that exists, or could exist, in the data you want to describe. The value is the data type of that property, specified as a key. The syntax of an interface will probably look familiar. It looks very similar to the syntax of object literal. There are few differences. First, interface has to start with interface keyword. This keyword precedes the name of the interface. Second, there is no equal sign between the name of the interface and the collection of key/value pairs. Third, key/value pairs inside an interface can be separated either by commas (,) or by semicolons (;). Both will work. So, it depends on you which one you choose to use. Fourth, in the terms of naming conventions, always start the name of the interface with capital letter, just like a class. Fifth, again some naming conventions, it is a good practice to end the name of the interface with “Interface” word. Another practice is to start the name of the interface with “I” letter. This makes it clear what is interface and what is not. Let’s take a look at some simple examples of interfaces. /// // Create UserInterface // interface is the keyword // UserInterface is the name of the interface interface UserInterface { name: string; age: number; isEmployed: boolean; } // Use UserInterface to annotate new ‘user’ object const userOne: UserInterface = { name: ‘Tony Smith’, age: 23, isEmployed: false } const userTwo: UserInterface = { name: ‘Bobby Stone’, age: 28, isEmployed: true } /// // This will not work // the ‘age’ property is required const userThree: UserInterface = { name: ‘Bobby Stone’, // missing required age property here isEmployed: true } // Error: Property ‘age’ is missing in type ‘{ name: string; isEmployed: true; }’ but required in type ‘UserInterface’. /// // Using interface with function // Create interface for assingment interface AssignentInterface { subject: string; lesson: string; chapter: number; time: string; } // Create function that accepts object as ‘assignent’ parameter // Use AssignentInterface interface to annotate ‘assignent’ parameter function study(assignent: AssignentInterface) { return `I will study ${assignent.subject}, lesson ${assignent.lesson}, chapter ${assignent.chapter} for ${assignent.time}.` } // Create some assignment data const math = { subject: ‘Mathematics’, lesson: ‘Trigonometry’, chapter: 5, time: ’45 minutes’ } // Let’s study study(math) // ‘I will study Mathematics, chapter Trigonometry, exercise 5 for 45 minutes.’ Optional properties When you are not sure some property exist on the data you are describing you can also mark that property as optional. You can do this by adding ?…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply