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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://charles-bryant.gitbook.io/hello-react-and-typescript/helloworld/definepropsandstatetypes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.