What is TypeScript?

TypeScript is a syntactic superset of JavaScript which adds static typing. This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types. TypeScript being a "Syntactic Superset" means that it shares the same base syntax as JavaScript, but adds something to it.

TypeScript is JavaScript with added syntax for types.
Typescript is a superset of Javascript created by Microsoft.
Typescript is compiled to Javascript.
Typescript helps developer to code better and make less mistakes.
It provides out-of-box suggestions for more interactive coding experience.

Introduction to Typescript: https://www.canva.com/design/DAFRVo6KiiU/Y6terVDplneB3iad36-kJQ/view#1

Installation

npm init -y
npm i typescript -g
tsc --init
Add script

"start": "tsc filename.ts"

Note: File extensions is .ts or .tsx.

Installing For the latest stable version:

npm install -D typescript

tsconfig

{
    "include": ["src"],
    "exclude": ["node_modules"],
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "build",
        "target": "es2017",
        "declaration": true,
        "sourceMap": true
    }
}

Topics

1.Basic types: string, number, boolean, null, undefined, any, Literal Types, Union Types,

2.Functions: ES5 Function, Arrow function

3.Array: Array, Array Literal

4.Object: Object, Object Literal, Record

5.Custom Type: Type

Basic Types

string

let a: string = "Hello World";
a = "Bye!"; // Okay
a = 3; // Error

number

let b: number = 123;
b = 3; // Okay
b = "Hello!"; // Error

boolean

let c: boolean = true;
c = false; // Okay
c = "Hello!"; // Error

null

let d: null = null;
d = false; // Error
d = "Hello!"; // Error

undefined

let e: undefined = undefined;
e = null; // Error
e = "Hello!"; // Error

any
- None of the following lines of code will throw compiler errors.
- Using any disables all further type checking, and it is assumed you know the environment better than TypeScript.

let f: any = "Hello";
f = 1; // Okay
f = true; // Okay

Literal Types
- When we know what is going to be exact value of a variable, we use literal type

let g: "hello" = "hello";
g = "hello"; // Okay
g = "howdy"; // Error

Union Types
- When we are not certain between different types of values
- This is majorly refered as OR type, separated using | operator.

let h: string | number = "abcd";
h = 4; // Okay
h = "Bye!"; // Okay
h = true; // Error

Functions Types

Functions are the primary means of passing data around in JavaScript. TypeScript allows you to specify the types of both the input and output values of functions.

const add = (a: number, b: number): number => {
  return a + b;
};

add(1, 1); // Okay
add(1, "Hello"); // Error

Array

To specify the type of an array like [1, 2, 3], you can use the syntax number[].
This syntax works for any type (e.g. string[] is an array of strings, and so on).
You may also see this written as Array<number>.

let arr1: number[] = [1, 2, 3];
arr1.push(4); // Okay
arr1.push("Hello"); // Error

let arr2: string[] = ["A", "B1DFSDF", "SDSDSCD", "SDFCSDCDS"];
arr2.push("Hello"); // Okay
arr2.push(4); // Error

let arr3: Array<number> = [1, 2, 34];
arr3.push(4); // Okay
arr3.push("Hello"); // Error

let arr4: Array<string> = ["A", "B1DFSDF", "SDSDSCD", "SDFCSDCDS"];
arr4.push("Hello"); // Okay
arr4.push(4); // Error

const arr5: Array<number | string> = [1, 2.5, "csdascs"];
arr5.push("Hello"); // Okay
arr5.push(4); // Okay
arr5.push(false); // Error

readonly
- This restricts us from updating the data.
- only applicable to Array and Tuple

let arr6: readonly number[] = [1, 2, 3];
arr6.push(4); // Error
arr6.push("Hello"); // Error

Object

Object
- A common way of defining an Object.
- Using Object disables all further type checking, and it is assumed you know the environment better than TypeScript.

let user1: Object = { id: 1, name: "Ritesh" };
user1 = { lastName: "Firodiya" }; // Okay

Record Used when we know the exact value type in an Object.

let question: Record<string, boolean> = {
  isMarried: false, // Okay
  isEmployeed: true, // Okay
  isIndian: true, // Okay
  name: "Ritesh", // Error
};

Object Literal
- Used when we know the internal structure.

let user2: { id: number; name: string } = { id: 1, name: "Ritesh" };
user2 = { id: 2, name: "John" }; // Okay
user2 = { lastNname: "Doe" }; // Error

Custom Type

Useful for sharing types across multiple places.

type User = {
  id: number;
  name: string;
};
let user3: User = { id: 1, name: "Ritesh" }; // Okay
let user4: User = { id: 1, lastName: "Firodiya" }; // Error

Mayuri-Saha18 / TypeScript