typescript is a superset of javascript. this is a documentation where i am including all the stuff that i am learning in typescript. to get started with typescript, make sure that node js is installed in your machine. then type bellow code to install typescript globally in your machine.
npm install -g typescript
to make a typescript project we need to initiate the typescript in our project directory. to do that open your project directory in CLI and and use the bellow command.
tsc --init
this will generate a typescript config file. as your requirements you can make changes in the config file.
typescript is specificly type concerned. whenever we are defining a variable with a value, typescript automaticly set the value type as the variable type.
let userName = "tonmoydeb404";
// we declared "userName" variable with a String type value so typescript set the "userName" variable as a String type.
userName = 56;
// this will return a error because the "userName" variable is String type
see more code examples in type.ts file.
if we want to define the variable type without declaring the variable value then we can use the explicit type concept.
let str: string;
// we defined the variable type is string
str = "hello";
// str = 400; // error because "str" variable is string type
see more code examples in explicit type.ts file.
when our data type is not specified we can use any
keyword to set any type of data in our variable
let x: any;
// we can store any type of value in this variable
let y: any[] = [];
// we can store any type of value in this array variable. but we can't reassign it with any other data type
when we need to store multiple type of value in a variable, we can use type union using |
symbol.
let union: string | number;
// now we can store string or number value
union = "hello world";
union = 100;
// union = []; // error because "union" variable accept only string or number type
defining data type all the time is not good for code because in larger application there are tons of type checking codes. so its hard to maintain. to fix this we can use type alias.
// our own type
type userType = {
name: string;
age: number;
};
// we can use our type as like we are using the typescript system types
const myUser: userType = {
name: "jhon doe",
age: 50,
};
// even we can use those in everywhere
const printUser = (user: userType) => {
console.log(`Name: ${user.name}`);
console.log(`Age: ${user.age}`);
};
using type alias we can create our own type. we can store the common type checkings in our own type. by using that we can prevent the code repetations and maintain the code. to create our own type we need to use the type
keyword.
function signature is like a function blueprint. we can control the function parameters and function return also.
let funcSignature: (user: string, age: number) => string;
as we can see we are defining the function parameters, types and the function return type. we can use this signature to create our actual function.
funcSignature = (user: string, age: number) => {
return `${user} is ${age} years old`;
};
as like as variable we can define the class property type.
class Student {
name: string;
age: number;
roll: number;
}
also we can control the property access with access modifiers.
class Student {
readonly name: string; // you can't overwrite this property outside of class
private age: number; // you can't read or write this property outside of class
public roll: number; // public is default modifier. you can do whatever you want
}
the great news is you can use your Class as a array children type. just like this...
let studentArr: Student[] = [];
see the actual code example from class.ts file.
to make our code easier to maintain we need to use modular code system. to do this we need to configure the tsconfig.json
file for the javascript import export support.
make sure that your target
property in tsconfig.json
file is set to ES6
.
"target": "ES6"
also change your module
property to ES2015
"module": "ES2015"
now to export something just use the export
keyword in front of your variable
export const module = "this is modular variable";
importing file is not so different in typescript. just use the import
syntax. but make sure that you are using .js
extension instead of .ts
extension in import file location.
import { module } from "./module.js";
interface is a common term in OOP language. interface is like a blue print or structure of a class.
interface user {
readonly name: string;
id: number;
login(password: string): string;
logout(id: number): string;
}
by using interface we can specify the properties that a class should have. to use interface we need to use the implements
keyword.
class User implements user {
constructor(
readonly name: string,
public id: number,
private password: string
) {}
// log in function
login(password: string): string {
if (password === this.password) {
return "logged in successfully";
}
return "password not matched";
}
// log out function
logout(id: number): string {
if (id === this.id) {
return "log out successfully";
}
return "id not matched";
}
}
but we can't use the private
access modifier in interface. also we can use interface as a replacement of type alias.
interface rectOptions {
width: number;
length: number;
}
const drawRect = (options: rectOptions) => {
let width = options.width;
let length = options.length;
console.log({ width, length });
};
view full code from the interface.ts file.