About TypeScript

Those very new to TypeScript, here are some basics of TypeScript. TypeScript is a strongly typed, object-oriented, compiled language. It is an open-source programming language developed and maintained by Microsoft. It is said to be a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript.

React With TypeScript

In simple words, if we are writing code in TypeScript and the extension for saving code is .ts. Then, using transpiler (TypeScript Compiler) we are converting this to JavaScript and then only the execution is done.

Basic Types
Function
  1. addNumbers(num1:number, num2:number):number{
  2. return num1+num2;
  3. }
Class

  1. class Employee {
  2. private firstName: string;
  3. private lastName: string;
  4. private email: string;
  5. private address: string;
  7. Constructor(firstName:string, lastName:string, email:string, address:string){
  8. This.firstName = firstName;
  9. This.lastName = lastName;
  10. This.address = address;
  11. }
  12. }
Interfaces
  1. interface Vehicle {
  2. color: string;
  3. make: string;
  4. }
  5. class Car implements Vehicle {
  6. color: string;
  7. make: string;
  8. constructor(color: string, make:string) {
  9. this.color = color;
  10. this.make = make;
  11. }
  12. }
Generics

Generic class

  1. class GenericNumber<T> {
  2. zeroValue: T;
  3. add: (x: T, y: T) => T;
  4. }
  6. let myGenericNumber = new GenericNumber<number>();
  7. myGenericNumber.zeroValue = 0;
  8. myGenericNumber.add = function(x, y) { return x + y; };
  10. Generic function
  11. getData<T>(arg: T): T {
  12. return arg;
  13. }
  14. let countryName = getData<string>("india");
  15. let countryCode = getData<number>(91);

For more information, please visit here.

About ReactJS

React.js is a component-based UI development framework. React is useful not only for developing the web application but with it, we can develop native mobile apps as well. To understand more about web applications, please visit here and for the mobile native apps, go here.

React with TypeScript

First, we can set up the environment. The following two npm commands can easily build a sample application.

npm install -g create-react-app
npx create-react-app react-ts-app --scripts-version=react-scripts-ts A

Now, just go to the folder react-ts-app using the following command.

cd react-ts-app

After the installation is done, use any IDE to open the application. I am using Visual Studio Code as this is free and light-weight.

React With TypeScript

Open app.tsx and modify.

  1. import * as React from 'react';
  2. import './App.css';
  4. class App extends React.Component {
  5. public render() {
  6. return (
  7. <div className="App">
  8. <header className="App-header">
  9. <h1 className="App-title">React with typescript</h1>
  10. </header>
  11. <p className="App-intro">
  12. This React application developed using typescript
  13. </p>
  14. </div>
  15. );
  16. }
  17. }
  19. export default App;

Use the below command to run the application.

npm start or yarn start

React With TypeScript

After successfully executing the basic application, now we can start exploring the folder structure and the way of execution.

Summary

This was all about creating React application using TypeScript. To get more hands on this, please visit here.