> For the complete documentation index, see [llms.txt](https://charles-bryant.gitbook.io/hello-react-and-typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://charles-bryant.gitbook.io/hello-react-and-typescript/helloworld/definepropsandstatetypes.md).

# Define Props and State Types

This sample gives shows how we can get more type checking to protect from errors by defining the expected type for Props and State.

**Source Code**

<https://github.com/charleslbryant/hello-react-and-typescript/releases/tag/0.0.8>

## src/interfaces.d.ts

```
interface IHelloFormProps {
    name: string;
    handleChange(event: any): void;
}

interface IHelloContentProps {
    name: string;
}
```

First order of business is to define the new types. Since we aren't passing in state to any components we won't define types for state objects, but its the same concept.

We are defining the types in a type definition file (file extention d.ts). This is the same type of file that we get from DefinitelyTyped. This is a scaled down example, but you can also use the same technique to build your own type definitions for external modules that don't have a current definition.

```
interface IHelloFormProps {
```

`interface` is TypeScripts declaration for an interface. It is a way to declare a contract for the shape of a type. Shape in this sense is a collection of methods and properties along with their associated types. When you create objects of the type defined by the interface it is expected that the object will have the same shape. If it doesn't, TypeScript will give an error at compile time. If your IDE supports it, you can also get design time errors, code completion, etc.

These types are not used in the JavaScript that is generated, it is just used for type checking by the TypeScript compiler.

```
name: string;
handleChange(event: any): void;
```

Here we are defining the expected shape of objects that extend `IHelloFormProps`. Objects are expected to have a property named `name` of type `string` and a method named `handleChange` that accepts an argument named `event` of type `any` and has a return type `void`.

Hopefully, you can understand the `IHelloContentProps` interface from the explanation of `IHelloFormProps`.

## src/helloform.tsx

```
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./interfaces.d.ts" />

import * as React from 'react';

export default class HelloForm extends React.Component<IHelloFormProps, any> {
    constructor(props: IHelloFormProps) {
        super(props);
    }

    public render() {
        return (
            <div>
                <input 
                    value={ this.props.name }
                    onChange={ e => this.props.handleChange(e) }
                />
            </div>
        );
    }
}
```

The `HelloWorld` component is updated to use the new types, `IHelloFormProps` and `IHelloContentContent`.

```
/// <reference path="./interfaces.d.ts" />
```

Here we are adding a reference to the new type definition file we created to hold our type interfaces.

```
export default class HelloForm extends React.Component<IHelloFormProps, any> {
```

In our class declaration we are saying that we want to extend `React.Component` using objects of type `IHelloFormProps`.

```
constructor(props: IHelloFormProps) {
```

In the constructor we update the `props` argument to be of type `IHelloFormProps`.

## src/hellocontent.tsx

```
/// <reference path="../typings/tsd.d.ts" />

import * as React from 'react';

export default class HelloContent extends React.Component<any, any> {
    constructor(props: any){
        super(props);
    }

    public render() {
        return (
            <div>
                Hello { this.props.name }!
            </div>
        );
    }
}
```

This is very similar to the change we made to `HelloWorldForm` component.