TypeScript is a superset of JavaScript that compiles to plain JavaScript. It is a superset of JavaScript, but not a drop-in replacement. It gives you the power of JavaScript, but with the syntax that makes it more convenient to use. It is fast and efficient, and it is a good choice for large applications.
Video Resource: Yeni Başlayanlar İçin Typescript
npm i -g typescript
-> If you can get any permission problem, you can use the following command.
sudo npm i -g typescript
tsc filename.ts
-> The command will compile the file to JavaScript as 'filename.js'.
It is a way to define the type of a variable in JavaScript.
// let variableName = value;
let name = "Rasit";
And in TypeScript.
// let variableName: type = value;
let name: string = "Rasit";
As you can see, the difference between JavaScript and TypeScript is, in TypeScript, you can define the type of a variable.
Also you can use the properties of the type. For example, if you want to define a type of string, you can use includes, startsWith, endsWith, etc.
When you want to change the value of the variable name as number, the compiler will give you an error below.
let name: string = "Rasit";
name = 1;
// Error: Type number is not assignable to type 'string'.
Additionally, when you want to compile the file, it will give the same error.
The type of a string is string. You can assign a string to a variable.
let name: string = "Rasit";
let surname = "Colakel";
The type of a boolean variable is boolean. And it takes only two values, true or false. You can not assign 0 or -1 to a boolean variable.
let isDone: boolean = false;
let isLoading = true;
// the variables below are types of boolean variable.
To define an array, you can use the string[], number[], any[] type.
let names: string[] = ["Rasit", "Colakel"];
let numbers: number[] = [0, 1, 2];
let numbers: any[] = [0, "Rasit"];
Enums are a way to define a set of named constants.
enum Color {
Red,
Green,
Blue,
}
Tuples are a way to define an array where the type of the elements is known, but the number of elements is not.
let tuple: [string, number] = ["Rasit", 1];
Unknown type is a type that is used when the type of a variable is not known. But it is different from the any type.
let a: unknown;
let b: string = a;
// Error: Type 'unknown' is not assignable to type 'string'.
The difference between unknown and any is, you can assign an any type to a variable. But, you can not assign an unknown type to a variable.
let a: any;
let b: string = a;
// Error: Type 'unknown' is not assignable to type 'string'.
Type inference is a way to automatically assign a type to a variable.
let name = "Rasit";
let age = 30;
In this case, the compiler will automatically assign the type of 'name' as string and the type of 'age' as number.
let name = "Rasit";
let lowerCaseName = (<string>name).toLowerCase();
let person = {
name: "Rasit",
age: 30,
gender: "Male",
};
// It equals to the type below thanks to type inference
let person: {
name: string;
age: number;
gender: string;
};
person = {
name: "Rasit",
age: 30,
gender: "Male",
};
It is used for giving one or more type for a variable or property.
let person: {
name: string;
age: number;
gender: string | number;
};
person = {
name: "Rasit",
age: 30,
gender: 1,
};
With specific options (literal type)
let person: {
name: string;
age: number;
gender: "male" | "female";
};
person = {
name: "Rasit",
age: 30,
gender: "male",
};
Example 1
type Color = {
name: string;
hex: string;
};
let user: {
name: string;
age: number;
gender: "male" | "female";
color: Color;
};
Example 2
type Color = {
name: string;
hex: string;
};
type User = {
name: string;
age: number;
gender: "male" | "female";
color: Color;
};
let user: User;
user.color = {
name: "black",
hex: "#000",
};
// The code below does not return any value.
const add = (n1, n2) => {
console.log(n1 + n2);
};
add(1, 2);
// it will prints the sum of the numbers
// Giving types to the parameters
const add = (n1: number, n2: number) => {
console.log(n1 + n2);
};
// it will prints the sum of the numbers, too.
add(1, 2);
// Giving types to the return value
const add = (n1: number, n2: number): number => {
return n1 + n2;
};
// it will return the sum of the numbers
const sum: number = add(1, 2);
// Optional parameters
const add = (n1: number, n2?: number) => {
return n1 + n2;
};
// n1 is required but n2 is optional
const sum = add(1);
// default values
const add = (n1: number, n2: number = 0): number => {
return n1 + n2;
};
// n1 is required but n2 is optional
const sum = add(1);
interface Employee {
id: number;
name: string;
age: number;
getSalary(): number;
}
let newEmployee: Employee;
newEmployee = {
id: 1,
name: "Rasit",
age: 30,
getSalary: () => {
return 1000;
},
};
//read only property
interface Employee {
readonly id: number;
name: string;
age: number;
getSalary(): number;
}
let newEmployee: Employee;
newEmployee = {
id: 1,
name: "Rasit",
age: 30,
getSalary: () => {
return 1000;
},
};
// it will throw an error when you want to change the value of id property
newEmployee.id = 2;
// Extending interfaces
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
readonly id: number;
getSalary(): number;
}
let newEmployee: Employee;
newEmployee = {
id: 1,
name: "Rasit",
age: 30,
getSalary: () => {
return 1000;
},
};