Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

Support With Typescript

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

Typescript is a superset of JavaScript that emphasizes static typing, classes, and interfaces. Typescript has been the preferred language for programmers transitioning to JavaScript from more structured languages since 2012.

Better tooling is one of Typescript's advantages. Typescript allows IDEs to provide a richer environment for seeing typical problems as you type the code (rather than waiting until you've finished the code to run a tool). You'll also get to use Visual Studio Code, a powerful editor with excellent Typescript integration. Adopting Typescript for a large JavaScript project may result in more robust software that is still deployable where a conventional JavaScript application would run. Another benefit of Typescript is that it is backward compatible with previous JavaScript versions. In brief, Typescript provides excellent autocompletion, code navigation, refactoring tools, and excellent backward compatibility.

What is Typescript?

Microsoft's Typescript is an open-source language built on top of JavaScript. Typescript is very similar to JavaScript but with static type definitions.

If the above discussion of this post weren't enough to persuade you to try Typescript, consider the following:

  • Improved documentation: You can quickly know how to reference other parts of your code when you have clearly defined Types.
  • Typescript can validate your code before it is executed, saving you time debugging why "undefined is not a function at line 23."
  • JavaScript compiler: Typescript compiles to JavaScript because it is a superset of JavaScript, and every valid JavaScript is valid Typescript.
  • Adoption is simple: If you've ever wanted to include Typescript into your existing JavaScript apps, you can quickly start with one file and see how things progress.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Getting Started with Typescript in React

Requirements:

  • CLI command execution knowledge is required.
  • Node.js and npm were already installed on your computer.
  • Install XCode or Android Studio on your computer.
  • JavaScript knowledge is required.
  • React knowledge is required.
  • Some knowledge of React Native is also required (suggested, not required).
npx react-native init CodingNinjas --template react-native-template-typescript

The command above will create a new React Native project with the appropriate dependencies and configurations in a folder called CodingNinjas, using a TypeScript template.

Initializing

You'll be ready to start adding TypeScript once you've tried building a typical React Native app. Let's get started on it.

react-native init CodingNinjas
cd CodingNinjas

 

Also see,  React Native Reanimated

Adding TypeScript

The following step is to integrate TypeScript into your project. The commands below will:

  • The typeScript should be used in your project.
  • React Native TypeScript Transformer should be included in your project.
  • Create an empty TypeScript config file for later configuration.
  • And adds typings for React and React Native to an empty React Native TypeScript Transformer config file, which we'll configure next.
  • Let's go ahead and test these out.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

The tsconfig.json file contains all of the TypeScript compiler's settings. The defaults provided by the program above are acceptable. However, open the file and remove the following line from the comment:

{
 /* Search the config file for following line and uncomment it. */
 // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}

The settings for the React Native TypeScript Transformer are in rn-cli.config.js. Open it up and paste the following code into it:

module.exports = {
 getTransformModulePath() {
   return require.resolve('react-native-typescript-transformer');
 },
 getSourceExts() {
   return ['ts', 'tsx'];
 }
};

Migration to TypeScript

The produced App.js, and __tests /App.js files should be renamed App.tsx. index.js must include the .js extension. The .tsx extension (or.ts if the file doesn't include any JSX) should be used for all new files.

You'd get an error saying object prototype may only be an object or null if you tried to start the app right now. This is due to failing to import both the default and named exports from React on the same line. Open the App.tsx and make the following changes to the import at the top of the file:

-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';

Part of this is due to variations in the way Babel and TypeScript interact with CommonJS modules. The two will eventually settle into the same pattern.

You should now be able to start the React Native application.

Adding TypeScript Testing Features

yarn add --dev ts-jest

Because React Native comes with Jest, we'll need to add ts-jest to our devDependencies to test a React Native app with TypeScript.

Now, We'll have a look at our package. Replace the jest field in JSON with the following:

{
 "jest": {
   "preset": "react-native",
   "moduleFileExtensions": [
     "ts",
     "tsx",
     "js"
   ],
   "transform": {
     "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
     "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
   },
   "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
   "testPathIgnorePatterns": [
     "\\.snap$",
     "<rootDir>/node_modules/"
   ],
   "cacheDirectory": ".jest/cache"
 }
}

This will configure Jest to run .ts and .tsx files with ts-jest.

Adding a Component

Let's add a new feature to our app. Let's start by making a Hello.tsx component. It's a pedagogical component, not anything you'd develop in an app, but something interesting that demonstrates TypeScript with React Native.

Create the components directory and add the following example

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';


export interface Props {
 name: string;
 enthusiasmLevel?: number;
}


interface State {
 enthusiasmLevel: number;
}


export class Hello extends React.Component<Props, State> {
 constructor(props: Props) {
   super(props);


   if ((props.enthusiasmLevel || 0) <= 0) {
     throw new Error(
       'You could be a little more enthusiastic. :D'
     );
   }


   this.state = {
     enthusiasmLevel: props.enthusiasmLevel || 1
   };
 }


 onIncrement = () =>
   this.setState({
     enthusiasmLevel: this.state.enthusiasmLevel + 1
   });
 onDecrement = () =>
   this.setState({
     enthusiasmLevel: this.state.enthusiasmLevel - 1
   });
 getExclamationMarks = (numChars: number) =>
   Array(numChars + 1).join('!');


 render() {
   return (
     <View style={styles.root}>
       <Text style={styles.greeting}>
         Hello{' '}
         {this.props.name +
           this.getExclamationMarks(this.state.enthusiasmLevel)}
       </Text>


       <View style={styles.buttons}>
         <View style={styles.button}>
           <Button
             title="-"
             onPress={this.onDecrement}
             accessibilityLabel="decrement"
             color="red"
           />
         </View>


         <View style={styles.button}>
           <Button
             title="+"
             onPress={this.onIncrement}
             accessibilityLabel="increment"
             color="blue"
           />
         </View>
       </View>
     </View>
   );
 }
}


// styles
const styles = StyleSheet.create({
 root: {
   alignItems: 'center',
   alignSelf: 'center'
 },
 buttons: {
   flexDirection: 'row',
   minHeight: 70,
   alignItems: 'stretch',
   alignSelf: 'center',
   borderWidth: 5
 },
 button: {
   flex: 1,
   paddingVertical: 0
 },
 greeting: {
   color: '#999',
   fontWeight: 'bold'
 }
});

Let's take a closer look:

  • We're rendering components like View and Button instead of HTML elements like div, span, and h1. These are native components that can be used on multiple platforms.
  • The StyleSheet is used to specify styling.
  • Develop functionality provided by React Native. React's stylesheets allow us to use Flexbox to control our layout and style with other CSS-like features.

Adding a Component Test

Now that we've got a component let's try testing it.

We already have Jest installed as a test runner. We're going to write snapshot tests for our components. Let's add the required add-on for snapshot tests:

yarn add --dev react-addons-test-utils

Now, in the components directory, make a __tests__ folder and add a test for Hello.tsx:

// components/__tests__/Hello.tsx
import React from 'react';
import renderer from 'react-test-renderer';


import { Hello } from '../Hello';


it('renders correctly with defaults', () => {
 const button = renderer
   .create(<Hello name="World" enthusiasmLevel={1} />)
   .toJSON();
 expect(button).toMatchSnapshot();
});

I hope this blog helps you clear all the related concepts of Typescript in React.

Frequently Asked Questions

Is React different from TypeScript?

The sole difference between a TypeScript and a JavaScript React project is that the former's file extension is. tsx, while the latter is Js.

What is the use of TypeScript?

JavaScript code is simplified with TypeScript, making it easier to read and debug. TypeScript is free and open-source software. For the JavaScript IDEs and practices like static checking, TypeScript provides highly productive development tools. TypeScript simplifies the reading and understanding of code.

Define JSX in React?

It's called JSX, and it's a JavaScript syntax extension. It's best to use it alongside React to describe how the UI should look. JSX looks like a template language, but it has all JavaScript's capabilities. React "elements" are created via JSX.

What is TSX in React?

When using the JSX syntax in a React component file, tsx is the extension you should use. The jsx must also be set to true, which is done by default. TypeScript can compile JSX into JavaScript directly.

Conclusion

In this article, we have extensively discussed Typescript in React and how we integrate it into an ongoing project, also discussed the various addons as features in Typescript.

To read more about React and its features, you can refer to ReactJSArchivesReactJs and Frontend.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enrol in our courses, refer to the mock test and problems; look at the interview experiences and interview bundle for placement preparations.

Do upvote our blogs to help other ninjas grow.

Happy Learning!

Topics covered
1.
Introduction
2.
What is Typescript?
3.
Getting Started with Typescript in React
4.
Initializing
5.
Adding TypeScript
6.
Migration to TypeScript
7.
Adding TypeScript Testing Features
8.
Adding a Component
9.
Adding a Component Test
10.
Frequently Asked Questions
10.1.
Is React different from TypeScript?
10.2.
What is the use of TypeScript?
10.3.
Define JSX in React?
10.4.
What is TSX in React?
11.
Conclusion