The HTML Presentation about TypeScript
Created by Sergey Gorin
Good day and today
I will tell you why Typescript is needed, what its
advantages are and much more.
Stay tuned.
>
Why is that?!
⇩
Advantages of TypeScript over JavaScript
- Static Typing
- Enhanced IDE Support
- Improved Maintainability
- Early Error Detection
- Code Scalability
- Wide Adoption and Community
How TypeScript
compiles to JavaScript
Everyday Types
- The primitives
- Functions
- Arrays
- Object
- Any
- Void, Null and Undefined, Never
⇩
The primitives:
-
String: represents textual data and is enclosed in single
('') or double ("") quotes
let a = "Hello, World!" -
Number: represents numeric values, both integers and
floating-point numbers
let b = 42.69 - Boolean: represents logical values: true or false
let c = true || false
Types for Variables:
// Type annotation for a variable
let age: number;
let name: string;
let isStudent: boolean;
age = 25; // Valid
name = "John"; // Valid
isStudent = true; // Valid
age = "25"; // Error: Type "25" is not type 'number'
Types for Functions:
// Function with type annotations
function addN(n1: number, n2: number): number {
return n1 + n2;
}
const result = addN(5, 10); // result will be 15 (number)
addN("5", 10); // Error: "5" is not type 'number'.
Types for Arrays:
// Array with type annotation
let n: number[] = [1, 2, 3, 4];
let f: string[] = ["apple", "banana", "orange"];
n.push(5); // Valid
n.push("6"); // Error:'string' is not type 'number'.
f.push("grape"); // Valid
f.push(123); // Error: 'number' is not type 'string'.
Interfaces and object types
For what?!
⇩
Type Annotations for Objects
// Interface for an object
interface Person {
name: string;
age: number;
isStudent: boolean;
}
// Object with specified type
const person: Person = {
name: "John",
age: 25,
isStudent: true,
};
Creating an Interface
interface Person {
name: string;
age: number;
isStudent: boolean;
}
const person: Person = {
name: "Jane",
age: 30,
};
// Error: Property 'isStudent' is missing in type
// '{ name: string; age: number; }'
// but required in type 'Person'.
Difference between Interface and Types
// Base interface
interface Shape {
color: string;
}
// Extended interface
interface Circle extends Shape {
radius: number;
}
// Object that conforms to the Circle interface
const circle: Circle = { color: "red", radius: 5 };
Classes and Inheritance
And use them for object-oriented programming
⇩
Creating a Class
class Animal {
// Properties
name: string;
age: number;
// Constructor
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// Method
makeSound() {
console.log("Animal makes a sound.");
}
}
Inheritance
class Dog extends Animal {
breed: string;
constructor(name: string, age: number, breed: string) {
super(name, age);
this.breed = breed;
}
// Overriding the makeSound method
makeSound() {
console.log("Woof! Woof!");
}
}
Using Inherited Methods
const germanShepherd = new Dog("Max", 5, "German Shepherd");
germanShepherd.makeSound(); // Output: "Woof! Woof!"
console.log(germanShepherd.name); // Output: "Max"
console.log(germanShepherd.breed); // Output: "German Shepherd"
Access Modifiers
class AnyClass {
public property: string;
private secret: number;
protected info: string;
}
Implementing Interfaces
// Interface for a Flyable object
interface Flyable {
fly(): void;
}
// Bird class implementing the Flyable interface
class Bird extends Animal implements Flyable {
constructor(name: string) {
super(name);
}
makeSound() {
console.log("Bird chirps.");
}
fly() {
console.log("Bird flies in the sky.");
}
}
Advanced Data Types
So complicated...
⇩
Generic Functions
// Generic function that accepts an array and
// returns its first element
function getFirstElement < T>(arr: T[]): T {
return arr[0];
}
// Usage
const n = [1, 2, 3];
const f = ["apple", "banana", "orange"];
const firstN = getFirstElement(n); // Type of firstN is number
const firstF = getFirstElement(f); // Type of firstF is string
Generic Classes
// Generic class that holds a value of type T
class Box< T> {
private value: T;
constructor(initialValue: T) {
this.value = initialValue;
}
getValue(): T {
return this.value;
}
}
// Usage
const numberBox = new Box< number>(10);
// Create a Box with a number value
const stringBox = new Box< string>("Hello");
// Create a Box with a string value
const numberValue = numberBox.getValue();
// Type of numberValue is number
const stringValue = stringBox.getValue();
// Type of stringValue is string
Constraints on Generics
// Generic function with a constraint that
// the type must have a 'length' property
function getArrayLength< T extends { length: number }>
(arr: T): number {
return arr.length;
}
const numbers = [1, 2, 3];
const fruits = ["apple", "banana", "orange"];
const numbersLength = getArrayLength(numbers); // Valid
const fruitsLength = getArrayLength(fruits); // Valid
const str = "Hello";
const strLength = getArrayLength(str);
// Error: Type 'string' does not have a 'length' property
Decorators
Wow, amazing!
⇩
Role of Decorators in TypeScript
- Adding Metadata
- Aspect-Oriented Programming
- Code Reusability
- Code Modularity
Built-in Decorators
// Example of built-in decorators
class Example {
@deprecated
someMethod() {
console.log("This method is deprecated.");
}
@readonly
readonlyProperty = "This property is read-only.";
@experimental
experimentalMethod() {
console.log("This method is experimental.");
}
@sealed
sealedProperty = "This property is sealed.";
}
Custom Decorators
// Custom decorator example
function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling method ${key} with arguments ${args}`);
const result = originalMethod.apply(this, args);
console.log(`Method ${key} returned ${result}`);
return result;
};
return descriptor;
}
class MathOperations {
@logMethod
add(a: number, b: number) {
return a + b;
}
}
const math = new MathOperations();
console.log(math.add(2, 3)); // Output: "Calling method add with arguments 2,3", "Method add returned 5", 5
Conclusion
TypeScript offers numerous advantages and has become a crucial tool in modern software development