Introduction to TypeScript JSX

The following article provides an outline for Typescript JSX. TypeScript works on JavaScript and is an open source language. Static type definitions are added in JavaScript to make it TypeScript. Ways of describing the shape of an object and to provide enhanced documentation is provided by Types. It allows TypeScript to validate if the code is working without any incorrections. Writing different types are optional in TypeScript as type inference provides the developer great power without the effort of additional codes.

TypeScript JSX Syntax:

1. Preserve Mode

2. React Mode

3. React Native Mode

Working of JSX in TypeScript

JSX can be embedded just like XML. JSX can be transformed in JavaScript even though the transformation is majorly based on the kind of implementation. JSX is majorly used with React framework and now TypeScript also supports the compilation of JSX into JavaScript.

For using JSX, there are two most important things which should be done:

• .tsx should be the file extension of the files used.
• The jsx option should be enabled

TypeScript works in three JSX modes. The modes are react native, react and preserve. The emit stage is affected by these modes. JSX is kept as the output’s part by preserve mode. In the react mode, React.create element is emitted and JSX transformation is not necessary. React native mode is somewhat same as the preserve mode.

Examples of TypeScript JSX

Given below are the examples mentioned:

Example #1

The files used for the proper execution of the code are:

a. App.tsx

import "./styles.css";
export default function App() {
return (


b. index.tsx

import { render } from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
render(, rootElement);

c. styles.css

.App {
font-family: 'Times New Roman'
, Times
, serif;
text-align: center;
background-image: url('https://images.pexels.com/photos/1619690/pexels-photo-1619690.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
height: 450px;
width: 490px;
color: #94041f;
border-image: url('https://images.pexels.com/photos/1485637/pexels-photo-1485637.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
border-radius: 500px;
background-color: #f57ff3;
border-right-width: 100px;
border-right-color: #f58c58;
border-left-width: 100px;
border-left-color: #f50c18;
border-top-width: 100px;
border-top-color: #140ddb;
border-bottom-color: #ba1658;
}

Output:

Example #2

The files used for the proper execution of the code are:

a. index.tsx

import * as React from "react";
import { render } from "react-dom";
interface IState {
count: number;
}
class EDUCBA extends React.Component {}
, IState> {
public readonly state = {
count: 0
};
private handleClick = (
event:
React.MouseEvent HTMLButtonElement
>) => {
const type:
string =
event.currentTarget.title;
this.setState(
(
{ count
}
) => ({
count: type === "decrement" ?
count - 10 : count + 10
}));
};
public render() {
return (


Output:

On code execution:

On clicking “Decreasiow” button:

On clicking “Increasiow” button:

Example #3

Files used for the proper execution of the code are:

a. index.tsx

import ReactDOM from "react-dom";
import React from "react";
import {
makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
root: {
backgroundColor: (
{
color }) => color
}
});
const EDUCBA = () => {
const classes = useStyles(
{
color: "#53f5cf"
});
return

Output:

Example #4

The files used for the proper execution of the code are:

a. index.tsx

import * as React from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import Select from "./select";
const { Option } = Select;
function handleChange(value: string) {
console.log(`selected ${value}`);
}
class Application extends React.Component {
public render() {
return (


b. select.tsx

import * as React from "react";
import Select
, { SelectProps } from "antd/es/select";
import "antd/es/input/style/css";
class MySelect
extends React.Component SelectProps T>
, {}> {
static Option: typeof Select.Option = Select.Option;
render() {
return Select SelectProps T>> {
...this.props
} />;
}
}
export default MySelect;

Output:

On code execution:

On clicking “PROGRAMMING LANGUAGE” dropdown:

On clicking “COURSE CHOICE” dropdown:

On clicking “EDUCBA”:

Conclusion

We saw how TypeScript uses the three JSX modes, preserve, react and react native. The examples represent all of the three modes.

Recommended Articles

This is a guide to TypeScript JSX. Here we discuss the introduction, working of JSX in TypeScript along with examples respectively. You may also have a look at the following articles to learn more –

1. TypeScript Functions
2. TypeScript Operators
3. TypeScript Versions
4. What is TypeScript?

The post TypeScript JSX appeared first on EDUCBA.