# flowtype.s

## Owner: [Tycho Tatitscheff](https://github.com/tychota)

## Why

Flowtype is awesome:

* it successfully replaces unit tests for some tasks, like ensuring that the different parts of the app, remains in sync with each others.
* it give you autocompletion

That being said, if flow is misconfigured and you blindly trust the result, you can still have bug where it should have raised an alert for you.

## Checks

* Every `*.js` file **should** have a comment on first line of the code with `// @flow`.
  * **Why?**
    * If it is not, the file is ignored by flow.
* Every types **should** use **exact typing** `{|...|}` and not `{...}`
  * **What?**
    * <https://flow.org/en/docs/types/objects/#toc-exact-object-types>

      **Why?**
    * <https://twitter.com/cpojer/status/780268582974296064>

## Examples

### // @flow comment

#### ✅ **Good example**

```javascript
// @ flow

import React from "react";
// rest of the file
class Comp from React.Component {

}
```

If you make a typo in `React`, you can see it, for instance.

#### ⛔️ **Bad example**

```javascript
import React from "react";
// rest of the file
class Comp from React.Component {

}
```

If you make a typo in `React`, you can don't see it.

### Exact object types

#### ✅ **Good example**

```javascript
// @ flow

type PropsType = {|
    goats: Array<string>
|}

const Herd = (props: PropsType) => (<View><Text>{props.goats.length}</Text></View>)
```

If you make a typo in `PropsType`, you can see it.

#### ⛔️ **Bad example**

```javascript
// @ flow

type PropsType = {
    myFavoriteGoat: string
}

const Herd = (props: PropsType) => (<View><Text>{props.myFavoriteGoat}</Text></View>)
```

(`myFavoriteGoat` should raise an error, but don't since `PropsType` are not exact)


---

# 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://bamtech.gitbook.io/dev-standards/flowtype/flowtype.s.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.