TypeScript with React JS

TypeScript is an open source programming language developed by microsoft which is superset ot javascript. It is designed for develop the large application with javascript using transcompiler. It also using for develping the client and server side application using Node JS platform.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

TSLint is an extensible tools for check the TypeScript code for readability, maintainability and functionality error and it also has customizable rules and configuration for linting the TypeScript.

Prerequisites:

1. Node JS( < v8.10 version)
2. create-react-app(node package for create react app)
3. typescript (npm package)
4. tslint

Install the TypeScript and TsList globally by package managers:

// For npm package manager
> npm install -g typescript
// or yarn package manager 
> yarn add global typescript

After install the TypeScript we need to install Tslint

// For npm package manager
> npm install -g tslint
// or yarn package manager
> yarn add global tslint

To Start Code with TypeScript we need boilerplate, facebook provide the bolierplate with typescript features at new updated create-react-app package.If your create-react-app is outdated, please update your create-react-app boilerplate, then you can get react-script-ts support for work with typescript using react applicaiton.

Command for update the package are

> npm update -g create-react-app

Or Alternatively, Remove the create-react-app package from packages installed in your computer

> npm uninstall -g create-react-app

2. Then, Install the create-react-app after remove package from local machine

> npm install -g create-react-app

Now developer can create project with create react apps by adding additonal informaiton to create-react-app command arguments

> create-react-app react-typescript-starter --scripts-version = react-scripts-ts

The project structure of the TypeScript with create-react-app boilerplate is:

|-- react-typescript-starter
|---- public
|---- src
|---- package.json
|---- README.md
|---- images.d.ts
|---- tsconfig.json (typescript configuration at local)
|---- tsconfig.prod.json (typescript configuration at production)
|---- tsconfig.test.json (typescript configuration at production)
|---- tslint.json (Using for check the typescript standard)

Create the Component Using TypeScript in React JS

1. Create File Named SmartComponent atsrc/components/SmartComponent.tsx file

Figure 1.1

In Figure 1.1, Line 3..11 , export the interface of props and state which are needed for Smart Component of react js.

What is Interface in TypeScript?

The core principle of the typescript is type-checking and focuses on the shape of that values of attribute. This structure is called as “duck typing” or “structural subtyping”.An interface is a TypeScript artifact and it is an abstract type, it does not contain any code as a class does. It only defines the ‘signature’ or shape of an API. During transpilation, an interface will not generate any code, it is only used by Typescript for type checking during development.

Basic Structure of Interface in typescript:

Figure 1.2 Basic Structure of Interface

Sample interface Using TypeScript

Figure 1.3 Example of Interface

Typescript also provide the feature to extends the interface to another interface.

Basic Structure of Extend Interface:

Figure 1.4 Extend structure for Interface

Sample of Exteded Interface in TypeScript:

Figure 1.5, Extend Example of Interface

How to Create Props and State Interface In for React Component

1. Structure of Props Interface for React Component

Figure 1.6 Props Interface structure of React Component

2. Structure of State as Interface for React Component

Figure 1.7, State Interface Structure of React Component

What is Class in TypeScript?

In typescript, class is a useful structural abstraction which provide all object oriented feature of class. the class also provide the encapsulation of data also.

Simple class structure:

• Fields − Field is a variable declared within class which represent data or properties of the object.
• Constructors − Which is responsible for allocating memory for the objects of the class
• Functions − Functions represent actions and processing of data of variable an object can take.

Figure 2.1, Simple Class Structure for TypeScript

TypeScript Classes can extends by interfaces

Figure 2.2, Extends the Point interface with MyPoint class

In Figure 2.2, In line 3..4 , is a sample interface named point. In Line 10..13, sample code for how to extend class with interface.

Structure for extend the React Component with Typescript Using Props and State Interface.

Figure 2.3 Structure of Props and State with React Component using TypeScript

Create the Smart Component Using Structure

Figure 2.4 Sample Code for React Smart Component With TypeScript

In figure 2.4, Line 2..5, Is a Props Interface for SmartComponent . Line 7..10 is an interface of a State for Smart Component. And Line 13..20 is a class, which is react component using TypeScript Standard.

How Access Modifier Works for Class for TypeScript?

Access Modifier in class important for methods and actions. TypeScript Supports public, private, protected. Which provide access capabilitis and rules of attribute and methods.

How Access Modifier works in TypeScript

1. Public: All the properties and methods are accessed everywhere in application.

2. Private: private properties and methods can be accessed only within the class itself.

3. Protected: properties and methods can be accessed from within class or any other class which is extending form parent class.

Dump Component Or StatelessComponent in React JS TypeScript:

Developer Can Create Dump Component or presentational Component by using two types of object one React.StatelessComponent and other is React.SFC (SFC means Stateless Functional Component). So We need to Create Two Component in Project named DumpComponent at src/components/DumpComponent.tsx file and DumpSFCComponent at src/components/DumpSFCComponent.tsx file.

Figure 3.1 Create the Dump or Stateless or Presentational Component

In Figure 3.1, Developer must import the React library for create stateless component. In Line 3..4, is a Props Interface for DumpComponent stateless component. Stateless component has no State Interface because it a stateless component. Then Line 7..9, For Learning purpose we need to create the Stateless Component with TypeScrip using React.Stateless library.

Create Stateless Component With React.SFC alternative of React.Stateless library:

Figure 3.2, SCF component with TypeScript React JS

Figure 3.2 is similar to figure 3.1, only change is line 7, Replace the React.Stateless to React.SFC for creating Stateless Functional Component in react JS using TypeScript.

Structure of TypeScript Method

Figure 4.1 Simple Strucutre of TypeScript Methods

In Figure 4.1, Line 1..4, this is a structure of typescript function, which has return somthing and also has arguments. From Line 6.. 8 is definition of void function with TypeScript.

Example For Creating Method in TypeScript:

Figure: 4.2, Sample Function with TypeScript

How Method or action are called in React JS with TypeScirpt ?

Structure of create method in React JS using TypeScript

<access modifier> <method name> = (<attribute>: <data type>): <return data type> => { }
// Example
public onShowName = (userName: string) : void => {}

Sample Code for Add the function or action in SmartComponent in ./src/components/SmartComponent.tsx file:

Figure 4.3 add the function in react component using typescript

In Figure 4.3, Line 24 to 26 contains the function, which will shows the username after click into Show User Name button in Line 36.

Add the Dump Or Stateless component into Smart Component

In App.js file, we need to remove some code and add new code to SmartComponent for showing the smart component into App Component. which will then render into browser.

Figure 5.1, Modified the App.js file add the Smart Component to App.js File

In Figure 5.1, In line 6, we need import the SmartComponent to App.js for render within App.js in browser. Then in line 18, We need to declare SmartComponent with Properties, which will then render into Browser.

In SmartComponent we need to add the DumpComponent and DumpSFCComponent , which is then render within smart Component.

Figure 5.2 Modified the SmartComponent and add the Stateless or Presentational Component

In Figure 5.2, In line 3, we need to Import DumpComponent from ./DumpComponent.tsx file and In 5, also import DumpSFCComponent from ./DumpSFCComponent.tsx file. To import or add the dump components or Stateless component to Smart Component we can add code in line 41 and 44.

Add Custom Rules for TypeScript in tslint.json file

We Can add the Custom lint Rules at tslint.json file for avoid and inject TypeScript rules when run the program. To add and revoke the rules we can modified the tslint.js file add some custome rules at ./tslint.json file.

Figure 6.1, Add the Custom Rules for tslint

Figure 6.1, We need to add the some rules by using rules attribute to json file, so for run the application with custom rules, we need to add rules from Line 10.. 15 at tslint.json file in our project.

You can find the full soruce code here:

tariqulislam/react-typescript-starter