“This is the 26th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

We’ve covered a lot about TS, including the basics of types, interfaces, types, generics, enumerations, type inference and compatibility, modules and namespaces, and module parsing and declaration merging

The content of today’s talk is still related to TS, three JSX modes in TS

The body of the

Shall we start with what is JSX

JSX is essentially a syntactic extension of JS, best known for the React framework. In React, components written in JSX are parsed by the preprocessor Babel and rendered to the specified parent container by React to form the final HTML page for the browser to parse and display.

However, JSX is not exclusive to React

TS supports embedding, type checking, and compiling JSX directly to JS

But to use JSX in TS you have to do two things:

  1. Give the file a.tsxextension
  2. To enable thejsxoptions

Let’s talk about the topic of today, the three JSX modes of TS

Three JSX modes for TS

TS comes in three JSX modes: Preserve, React, and React-Native

These patterns work only during the code generation phase, and type checking is not affected

Preserve mode

JSX is reserved in the generated code in Preserve mode for subsequent conversion operations

The output file will have the.jsx extension

The react model

React mode generates react. CreateElement, which does not need to be converted before use

The output file has a.js extension

The react – native mode

React-native is equivalent to preserve, which also preserves all JSX, but the output file has a.js extension

The specified mode

You can specify the schema by using the — JSX flag or options in tsconfig.json on the command line

Pay attention to

Note that because TS also uses Angle brackets to indicate type assertions, this can be parsing difficult when combined with JSX’s syntax. Therefore, TS disables type assertions using Angle brackets in.tsx files

You can use the AS operator instead, which is available in both.ts and.tsx and is equivalent to the behavior of Angle bracket type assertions

Such as:

var foo = bar as foo;
Copy the code

END

That’s all for this article. If you have any questions, please point out