Type assertion in typescript

TypeScript The type assertion of seems to be conceptually simple , But for just touching TypeScript Users of , May lack understanding of usage scenarios , I hope this article can help you understand type assertion better .

When you use a value , however TypeScript I don't know the specific type perhaps TypeScript When the type of record cannot meet the use requirements , You can use type assertions to explicitly specify the type you want to use .

grammar ：

There are two ways to assert a type :

1. Use <> grammar
2. Use as keyword

<> Hui He JSX Grammar conflict , In general use as .

Let's look at some examples of type assertions

1. For those obtained through tags DOM,TypeScript You can infer the type , But for other ways ,TypeScript It is impossible to infer , We can use type assertions to explicitly specify the element type .

const aEle = document.querySelector('a') // HTMLAnchorElement | null
const canvasEle = document.querySelector('#my_canvas') as HTMLCanvasElement

React.useEffect(() => {
  if (props.autoFocus) {
    const $this = ref.current as HTMLInputElement;
    ...
  }
}, []);

AntD Example in ：ActionButton.tsx

2. For empty object placeholders , It can be asserted as a specific type , To get the correct code hints and type inference

const [user, setUser] = useState<User | null>(null);
setUser(newUser);
const [user, setUser] = useState<User>({} as User);
setUser(newUser);

const Assertion

const Assertions tell the compiler to infer for an expression the narrowest or most specific type it can infer , Instead of generic types .

// point To become a readonly  An array type , Modifying the contents of the array will prompt an error .
let point = [3, 4] as const; // readonly [3, 4]
point[0] = 1 // Error

Let's take a look at a code example ：

function useDarkMode() {
  const [mode, setMode] = React.useState<'dark' | 'light'>(() => {
    // ...
    return 'light'
  })
  ...
  return [mode, setMode] as const
}
​
const [mode, setMode] = useDarkMode() //  Pseudo code ,hook It needs to be used in function components 

Let's compare mode and setMode Use as const Subsequent differences ：

In the use of const Before asserting ,mode and setMode The type is ：

const mode: "dark" | "light" | React.Dispatch<React.SetStateAction<"dark" | "light">>
const setMode: "dark" | "light" | React.Dispatch<React.SetStateAction<"dark" | "light">>

TypeScript Type assertion in

call setMode when , It will give you an error , because 'dark' | 'light' Is not a callable type .

TypeScript Type assertion in

Use as const After the assertion ,mode and setMode The type is ：

const mode: "dark" | "light"
const setMode: React.Dispatch<React.SetStateAction<"dark" | "light">>

image-20220726173035919

image-20220726173102524

When calling parameter transfer error , There will also be type error prompts .

image-20220726173131771

You can see , For arrays , The type of each element is the joint type of the entire array element type

const arr = [1,'2'] 
// const arr: (string | number)[]

Use as const After the assertion , The array will become readonly Array and Each element has its own specific type , There is also a better error prompt .

Let's see another one rxjs Example in ：fromEvent.ts

// These constants are used to create handler registry functions using array mapping below.
//  These constants are used to create handler registry functions using the following array mapping 
const nodeEventEmitterMethods = ['addListener', 'removeListener'] as const;
const eventTargetMethods = ['addEventListener', 'removeEventListener'] as const;
const jqueryMethods = ['on', 'off'] as const;

Use as const after , Type detection is more stringent ：

• readonly Array , Each element has its own literal type , Cannot adjust to other values , Eliminate the possibility of accidental modification
• When accessing array elements or deconstructing arrays , Because the array length is fixed , Avoid crossing borders , It's not easy to make mistakes

const Assertions and typeof Use it with ：useSelection.tsx

String usage as const after , Variables have literal types ,typeof Operators can extract their literal types using .

export const SELECTION_ALL = 'SELECT_ALL' as const;
export const SELECTION_INVERT = 'SELECT_INVERT' as const;
​
export type INTERNAL_SELECTION_ITEM =
  | SelectionItem
  | typeof SELECTION_ALL
  | typeof SELECTION_INVERT;

Avoid type checking

TypeScript Only type assertions are allowed for a more specific or less specific type , This rule can prevent some wrong cast ：

const x = "hello" as number;
// Error： take  'string'  Type conversion to  'number'  The type may be an error , Because these two types do not fully overlap . If it's intentional , Please convert the expression to “unknown”.

Let's take another look at Antd Examples of use in : back-top

React.useEffect(() => {
  bindScrollEvent();
  return () => {
    if (scrollEvent.current) {
      scrollEvent.current.remove();
    }
    (handleScroll as any).cancel();
  };
}, [props.target]);

handleScroll It's a function , But other documents have been added cancel attribute , Call... Directly here cancel Method , TypeScript It will give you an error , Can be asserted as any To avoid TypeScript Type check of

Double assertion

For the variable types that we have defined , If there is no overlap , It can be asserted as a broad type first (any、unknown), Then assert as a specific type .

// es default export should use const instead of let
const ExportTypography = (RefTypography as unknown) as React.FC<TypographyProps>;

Typography

Be careful ： When using assertions , Make sure you know the type of current value , Avoid error . For types that can be narrowed , Try to use type narrowing rather than assertions .