# Coding guidelines

## `null` and `undefined`

Use `undefined` wherever is possible. Do not use null.

## Umbrella modules

Do not use umbrella modules (index.ts) for state and features. This prevents issues with cyclic imports.

## Use invariants

When some optional values depend on a value, use invariants to make sure that contracts are not violated:

```typescript
export interface IProps {
  isEditable?: boolean;
  onValueChange?: () => any;
}

export default class Editor extends Component<IProps> {
  public render() {
    const { isEditable, onValueChange } = this.props;

    if (isEditable) {
      invariant(
        onValueChange,
        "Editor is editable, but onValueChange is missing",
      );
    }

    // Some other code
  }
}
```

With invariants, we can follow a safer way to access e.g. GraphQL data which might be undefined until the data is loaded. To prevent errors caused by undefined values, define a method to get the data and use it everywhere you need to access the data, like so:

```typescript
  public render() {
    const { title, body } = this.getPost();
    // skipped
  }

  // skipped

  private getPost = () => {
    const { postData, slug } = this.props;

    // Use invariant to throw an error when the required value is undefined
    invariant(postData.post, `No post for slug ${slug}`);

    // Use the exclamation operator to tell TypeScript that the value is defined
    return postData.post!;
  };

  // skipped
```