Getting started with TypeScript

TypeScript is an open source language and is a superset of JavaScript created by Microsoft.

More about TypeScript

Offers additional features to JavaScript including static types
Using types is completely optional
Compiles down to regular JS
Can be used for front-end JS as well as backend with Node.js
Includes most features from ES6, ES7 (classes, arrow functions, etc)
Types from 3rd party libraries can be added with type definitions.
Based on the .NET harmony specification

What's wrong with JavaScript

Not suitable for large applications
Lacks strong typing
Weird inheritance, unfamiliar syntax
Only errors during runtime
Suffers type coercion

Dynamic vs Static Typing

Dynamic	Static
In dynamically typed languages, the types are associated with run-time values and not named explicitly in your code	In statically typed languages, you explicitly assign types to variables, function parameters, return values, etc
Eg. JavaScript, Python, Ruby, PHP	Eg. Java, C, C++, Rust, Go

Pros & Cons of TypeScript

Pros	Cons
More Robust	More Code to Write
Easily spot Bugs	More To Learn
Predictability	Required Compilation
Readability	Not True Static Typing
Popular

States of Compiling TypeScript

TypeScript uses .ts and .tsx (working JSX like React) extension
TSC (TypeScript Compiler) is used to compile .ts file down to JS
Can watch files and report errors at compile time
Many tools include TS compilation by default
Most IDEs have great support for TS
The tsconfig.json file is used to configure how TypeScript works

Lets make our hand dirty with TypeScript

Environment Setup:

First we need to install TypeScript globally in our machine
- Using npm npm i -g typescript
- Using yarn yarn global add typescript
Create a folder with .ts extension
Check TypeScript version by running this tsc -v on your terminal
In the terminal type tsc fileName.ts it will compile ts file down to js
To manage how to compile a typescript file in terminal type tsc --init
And it will create a tsconfig.json file where you can manage your ts file compilation and others
tsconfig.json is the configuration file for TypeScript project
You are all done to maker your hands dirty with ts

Basic Types in TypeScript

I assume you know what is variable in JS (to remind you again, variables are like container where we can store data/values and can access or modify them later)

Steps to create a variable with types in Typescript

variable-keyword(var/let/const)
variableName(studentName, id etc)
colon(:)
what type of variable it is? (number, string etc)
assignment-operator(=)
value of that type

// example: 
let studentName: string = "Jisan"
const studentId: number = 3

Some other types are:

number
string
boolean
any

Note-1: If we explicitly set types to variables the value cannot be changed to another types of value. In other word A variable declared with a particular type of value cannot be changed to another type of value

let salary: number = 20000
salary = 'twentyK' // error

Note-2: But when we explicitly set a variable type to any, we can change this with any other types of value later.

let x: any = 'hi'
x = 5 // ok

Note-3: When we just declare a variable with no types and values. TypeScript give any types to this variable automatically.

let a; // it has any type
a = true

Note-4: When we declare a variable and assign a value, but don't set any type to this. In that case TypeScript will set its type according to the value. In TS it's called type inference in TypeScript.

let z = 10 // it has number type
z = 'hi' // error

Other Example of Variables

let studentId: number = 5;
let studentName: string = 'Jisan';
let isPresentToday: boolean = true;
let x: any = 'Hi';
x = 10

Arrays

Lets say we need an array of number/string etc.

We can define types of array values by writing the type of values and bracket [] eg. let nums: [number]
Now, we cannot add values to that array of another types
Note: if the type is any(any[]) then we can add different types values on that array eg. let arr: any[] = [1, 'hi', true]

// examples
let nums: number[] = [1, 2, 3, 4, 5]3
let arr: any[] = [5, false, 'hello']

Tuples

If we don't want to set any[] type to array instead we want to set types for every value of an array.

Here we can use tuple below is an example

   
let person: [number, string, boolean] = [3, 'Jisan', true]

// Tuple array
let employee: [number, string][]

employee = [
  [5, 'Jack'],
  [6, 'Doe'],
  [7, 'Jhon']
]

Union

Lets say, wee have some products and each has productId, the value of this can be a number or a randomly generated string
Question is how do we set type to variable which value could be one or another types?
Here it come union, all we need to do is set multiple types separated a Pipe ( | ) character

// example
let productId: number | string;
productId = '234xcfswe323'
productId = 3321

Enum or enumerate types

Enum allows us to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

To define/create an enum

write enum keyword(enum)
enum name with Capital (first letter)
second bracket {}
constants separated by comma (,)
- By default constants value are numeric and starts from 0
- if we explicitly set values (numeric) to any particular enum constant, other constants (which are after that constant) value would be incremented by one
- on the other hand, if we explicitly set value to one of the constants as string, we need to set value to the next constant as well.

To get enum particular constant value

First type enum Name(SubjectsCodes)
dot(.) and
constant name inside that enum(math)

// examples
enum Directions {
  top, // value is 0
  right, // value is 1
  bottom = 5,  // value is 5
  left // value is 6
}

enum SubjectsCodes {
  math = '23432',
  physics = '34234',
  chemistry = '32423'
}

console.log(SubjectsCodes.chemistry)

Objects

We have a student object which includes id and name attributes. Now, how to set types for id and name for this object.

Follow the blow example

// one way of writing types for objects
const student: {
  id: number,
  name: string
} = {
  id: 2,
  name: 'Jisan'
}


// another way is to create type in external variable for the object like this
type Student1 = {
  id: number,
  name: string
}

const student1: Student1 = {
  id: 1,
  name: 'Jisan Mia'
}

Type Assertion

Let's assume we have a variable named code with a type of any and value 213
we have another variable named employeeCode. It uses the code variable value as its value.
but in this case we know that the number of employeeCode must be a number. though we already assigned code which has any type
in this case we can use type assertion to say that employeeCode value is number

there are two ways to do type assertion in ts below are examples

// 1. using angular bracket
let code: any = 200;
let employeeCode = <number> code;

// 2. using as keyword
let employeeCode2 = code as number;

Functions

in functions we can give type to arguments as well as to the return value
arguments types define what types of value we can pass
return type defines what types of value we can return from a function

Note-1: In case we want an argument optional, mean we can both pass and not pass that argument in function call. For this we can make arg. optional by adding question mark (?) at end of arg. name

Note-2: Sometimes we don't want to return any any value from function, maybe we just want to console.log() something. In that case we can use void as function return type

// examples
function addTwoNum(a: number, b: number): number {
  return a + b;
}
console.log(addTwoNum(5, 20))

// function that return void(nothing)
function logMe(message: string): void {
  console.log(message)
}
logMe('Hey, me void')

Type Aliases

with type alias we can make type schema or structure objects, function arguments, variables etc To create type aliases

type keyword
type alias Name
and then types schema

// examples
type StudentDetails = {
  name: string;
  age: number; 
  isCaptain?: boolean;
  semester: number;
}

type stringOrNum = string | number

function getStudentDetails(studentDetails: StudentDetails, classTeacherId: stringOrNum): string {
  return `
      name: ${studentDetails.name}
      age: ${studentDetails.age}
      isCaptain: ${studentDetails.isCaptain}
      semester: ${studentDetails.semester}
      classTeacherId: ${classTeacherId}
    `
}

const studentDetail1 = getStudentDetails({name: 'Jisan', age:19, isCaptain: true, semester: 3}, 324422)

const studentDetail2 = getStudentDetails({name: 'Rahman', age:20, semester: 3}, '4523x4')
console.log(studentDetail2)

Interfaces

Interface is kind of like specific structure of types for an object or functions

To create interface

interface keyword (interface)
interface name(EmployeeInterface)
bracket {}
propertyName : valueTypes

To use interface for object as its types

var/let/const
objName (employeeObj)
colon (:)
interfaceName (EmployeeInterface)
assignment (=) and bracket {}
inside bracket key-value pair as defined in the interface
Sometimes, we don't want each and every property of an interface to be mandatory. if we want we can make an interface property optional by adding a question mark(?) to the end of their names.
also we can make particular property to be read only by using readOnly keyword before their names

// interface with objects
interface EmployeeInterface {
  readonly id: number,
  name: string,
  age?: number
}

let employeeObj: EmployeeInterface = {
  id: 23,
  name: 'Jhon',
}
employeeObj.name = 'Mark' 

employeeObj.name = 'Mark' // can change
// employeeObj.id = 5 // can't change as id is readOnly

Note: We cannot use union and primitive in interface

We can do this

type Pointer = number | string
const p1: Pointer = 1

But cannot in interface

interface Pointer = number | string; // error
const p1: Pointer = 1

Interface with functions

interface MathFunc {
  (x: number, y: number) : number
}

const add: MathFunc = (x: number, y: number) : number => x + y

Classes

Classes are now available in JavaScript since es6 were introduced. Classes are used to create objects(multiple) or class is a blueprint of object

To create class->

first class keyword (class)
class Name (Person)
bracket {} and some properties(class can have properties and methods)
constructor method
- it is a method where we need to initialize values for class properties
- constructor method/function will run whenever we instantiated an object
- so we can pass parameters to constructor and initialize those to properties by adding this keyword and dot (this.) before property name

There is another thing called Access Modifiers

now Person class properties are public(by default) means we can access/modify there values outside of that class
we can make properties private by adding private keyword before properties name (mean we can only access/modify these properties withing the class)
we can make properties protected by adding protected keyword before properties name (access it only access within either this class or any class that is extended from this class )
also we can make particular property to be read only by using readOnly keyword before their names like objects. readOnly properties are only accessible not change/modifiable.

// examples
class Person {
  private id: number
  protected roomId: string
  firstName: string
  lastName: string


  constructor (id: number, roomId: string, firstName: string, lastName: string) {
    this.id = id
    this.roomId = roomId
    this.firstName = firstName
    this.lastName = lastName
  }

  // methods
  getFullName() {
    return `Full Name: ${this.firstName} ${this.lastName}`
  }
}

// initializing/instantiated an object to Person class

const jisan = new Person(25, '23432', 'Jisan', 'Mia')

const mark = new Person(33, '323s4', 'Mark','Adher')

// calling getFullName method of Person class with jsian object
console.log(jisan.getFullName())

Implement interface in class

Create an interface for student information then implement it on class following below

interface studentInterface {
    roll: number
    name: string
    isPresent: boolean
    checkAvailability(): string
}

class StudentInfo implements studentInterface {
  roll: number
  name: string
  isPresent: boolean

  constructor (roll: number, name: string, isPresent: boolean) {
    this.roll = roll
    this.name =  name
    this.isPresent = isPresent
  }

  checkAvailability() {
    return `${this.name} is ${this.isPresent ? 'present' : 'not present'}`
  }
}

const studentOne = new StudentInfo(1, 'Jisan', true)
const studentTwo = new StudentInfo(2, 'Mursalin', false)

console.log(studentOne.checkAvailability())

Guess What? There is another cool thing to explore. Suppose, now we need an array of allStudents created by that class

what would be the type allStudents array
there is thing, we can use the StudentInfo class as allStudents array type
now we don't need to worry much about allStudents array types

const allStudents: StudentInfo = [];
allStudents.push(studentOne)
allStudents.push(studentTwo)

Extending classes or subclasses

Let's imagine we need teachers objects, for this we can create Teacher class. Now think of the possible properties for a teacher.

teacher has id/roll
teacher has name
teacher can be present or absent
teacher has a position(head, assistant etc)

Comparing teacher with student, teacher has 4 property and 3 of them are same as student properties,

and the 4th property of teacher is new
So what we do, shall we create teacher class with all properties again,
or is there any way to use Student class in Teacher class
Yeah, there is.
we can extend StudentInfo class to Teacher class by using extends keyword.
and in constructor use super keyword to call the members(properties, methods) of the Super class(StudentInfo).
Teacher as a subclass of StudentInfo inherits all the members(fields, methods etc).
and since constructs are not members they are not inherited by subclasses.

// subclass
class Teacher extends StudentInfo {
  position: string

  constructor(roll: number, name: string, isPresent: boolean, position: string) {

    super(roll, name, isPresent)
    this.position = position
  }
}

const teacher1 = new Teacher(2313, 'Rahman', true, 'Head')
const teacher2 = new Teacher(3423, 'Arif', false, 'Assistant')

console.log(teacher1.position)

// calling student class method from teacher a object created from teacher class
console.log(teacher2.checkAvailability())

Generics

Now, we want a reusable function that can perform some task for different types of values

lets say we have a function that takes array as arg. and return arr
the array values type can be number or string
we can use any type to function
but if we do that, we won't get any error when we push different types values to the array
to solve this problem we can use generics

To implement this ->

after function name, use angular bracket(<>)
inside <> write something and then use this word as type for parameter and return value
when we call this function with array of number or string as parameter
we should write the respected type of array value after the function name
ex functionName<typeName>([value])
that's it

// examples
function getArray<Type>(item: Type[]): Type[] {
  return new Array().concat(item)
}

const numArr = getArray<number>([1, 2, 3, 4])
const strArr = getArray<string>(['jisan', 'shawon', 'Porag'])

// numArr.push('something') we cannot add string to number array

// strArr.push(5) we cannot add numbers to string array

Resources: that I used to write this wonderful document about TypeScript

Sumit bhiay's TypeScript Bangla ( বাংলা ) Tutorial Series,
Traversy Media TS Crash course,
TS Handbook and obviously Google Search

Jisan-mia/ts

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages