1) Typescript Basics

What is typescript
TypeScript is a statically typed superset of JavaScript developed and maintained by Microsoft. It adds optional static types to JavaScript, allowing for improved development tools and practices, including,
i) Static Typing
TypeScript introduces static typing to JavaScript. This allows developers to define types for variables, function parameters, and return values, helping catch errors during development rather than at runtime.
ii) Type Inference
TypeScript can infer types where not explicitly defined, providing a balance between type safety and developer convenience.
iii) Advanced Type System
It includes interfaces, enums, generics, tuple types, union types, and more, enabling more robust and scalable code.
iv) Modern JavaScript Features
TypeScript includes all ECMAScript (JavaScript) features and integrates well with ES6, ES7, and beyond, allowing developers to use the latest JavaScript features.
v) Tooling and IDE Support
TypeScript provides excellent tooling support, including autocompletion, navigation, refactoring, and more, in many popular IDEs like Visual Studio Code.
vi) Compile to JavaScript
TypeScript code is compiled (or transpiled) to plain JavaScript code, which can then be run in any environment where JavaScript runs.
vii) Large Adoption and Ecosystem
TypeScript has been widely adopted by many major frameworks and libraries, such as Angular and React, enhancing its ecosystem and community support.

Installation and Use
i) Install Node.js and npm
TypeScript requires Node.js and npm (Node Package Manager). If you don't have them installed, download and install from nodejs.org
ii) Install TypeScript

npm install -g typescript

iii) Verify the Installation

tsc --version

iv) Create a TypeScript Project
Initialize a new npm project

npm init -y

Create a TypeScript configuration file

tsc --init

v) Write TypeScript Code
Create a TypeScript file

touch index.ts

Write some TypeScript code in index.ts:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

let user = "World";
console.log(greet(user));

vi) Compile TypeScript to JavaScript

tsc index.ts

This will compile index.ts to index.js.
vii) Run the Compiled JavaScript Code
You can run the compiled JavaScript code using Node.js

node index.js

viii) Setting Up TypeScript in a React Project
Create a new React project with TypeScript,

npx create-react-app my-react-app --template typescript
cd my-react-app

Start the development server

npm start

By following these steps, you can set up and start using TypeScript in your projects, leveraging its powerful features for a better development experience.

TypeScript Configuration File
For larger projects, you typically use a tsconfig.json file to configure the TypeScript compiler. This file specifies compiler options, file inclusions, and other settings.
Creating a tsconfig.json file

You can generate a default tsconfig.json file by running

tsc --init

{
  "compilerOptions": {
    "target": "es5",                          // Specifies the target JavaScript version
    "module": "commonjs",                     // Specifies the module system (e.g., commonjs, es6)
    "strict": true,                           // Enables all strict type-checking options
    "outDir": "./dist",                       // Redirects output structure to the directory
    "rootDir": "./src",                       // Specifies the root directory of input files
    "esModuleInterop": true,                  // Enables compatibility with CommonJS modules
    "skipLibCheck": true,                     // Skips type checking of all declaration files
    "forceConsistentCasingInFileNames": true  // Disallows inconsistently-cased references to the same file
  },
  "include": ["src"],                         // Specifies files to include in the compilation
  "exclude": ["node_modules", "**/*.spec.ts"] // Specifies files to exclude from the compilation
}