
## Overview

With TypeScript, there is risk of `<T>` being considered a tag. Therefor when using an arrow function, you need to either provide an trailing comma, a second generic, or an extends.

## The Issue
```ts
// Possible errors:
// ❌ Cannot find name 'React'.
// ❌ Cannot find name 'T'.
// ❌ JSX element 'T' has no corresponding closing tag.
const test = <T>(value: T) => value;
```

## Solution 1 - Trailing Comma
```ts
// ✅
const test = <T,>(value: T) => value;
```

## Solution 2 - Extends Type
```ts
// ✅
const test = <T extends object>(value: T) => value;
```

## Solution 3 - Second Type
```ts
// ✅
const test = <TValueA, TValueB>(valueA: TValueA, valueB: TValueB) => valueA && valueB;
```

TypeScript: Generic on an Arrow Function


## The Problem

When an array is marked as a const (readonly), its type becomes a union of its values.
```ts
const VALID_VALUES = ['a', 'b'] as const;

const isValid = (value: string): boolean => (
  // ❌ Argument of type 'string' is not assignable to parameter of type '"a" | "b"'
  VALID_VALUES.includes(value);
)
```


## Solution 1 - Widen the type

Explicitly set the type to account for other possible values.

**Caveat**: Widens the type across the board.

```ts
const VALID_VALUES: Readonly<string[]> = ['a', 'b'] as const;

const isValid = (value: string): boolean => (
  // ✅
  VALID_VALUES.includes(value);
)
```

## Solution 2 - Assert the type during the check

Cast the constant during the check.

```ts
const VALID_VALUES = ['a', 'b'] as const;

const isValid = (value: string): boolean => (
  // ✅
  (VALID_VALUES as Readonly<string[]>).includes(value);
)
```

Posts tagged "typing"

TypeScript: Generic on an Arrow Function

TypeScript: Check if an Array Constant Includes a Value