TypeScript | Beginner
Tags: javascript, typescript, webdev, beginners
Published: 2024-03-18 07:34:26

Hello my fellow frontend, backend and fullstack developer, today i will be covering some beginner Typescript concepts with examples.
Let's get started...

1) Introduction to TypeScript
TypeScript is a superset of JavaScript that adds static typing to the language. It helps catch errors at compile time and provides better code organization.

```js
function greet(name: string) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice"));
```
* Tips and Tricks: Use TypeScript to define types for variables, functions, and more to improve code reliability.

* Best Use Cases: Ideal for large-scale applications where type safety is crucial.

2) Basic Types
TypeScript includes basic types such as number, string, boolean, array, etc.

```js
let age: number = 25;
let name: string = "Bob";
let isStudent: boolean = true;
let numbers: number[] = [1, 2, 3, 4, 5];
```
* Tips and Tricks: Use type inference to let TypeScript automatically determine the type when possible.

* Best Use Cases: Used for defining simple data types in your code.

3) Interfaces
Interfaces define the structure of an object in TypeScript.

```js
interface Person {
    name: string;
    age: number;
}
function greet(person: Person) {
    return `Hello, ${person.name}!`;
}
```
* Tips and Tricks: Interfaces help enforce a consistent shape across objects.

* Best Use Cases: Useful for defining data contracts in your application.

4) Classes
Classes in TypeScript allow you to use object-oriented programming concepts like inheritance and encapsulation.

```js
class Animal {
    constructor(public name: string) {}
    move(distance: number) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}
```
* Tips and Tricks: Use access modifiers like public, private, and protected for better encapsulation.

* Best Use Cases: Great for modeling real-world entities in your code.

5) Generics
Generics allow you to create reusable components that can work with a variety of data types.

```js
function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>("hello");
```
* Tips and Tricks: Use generics when you want a function or class to work with any data type.

* Best Use Cases: Helpful for creating flexible and reusable code.

6) Enums
Enums in TypeScript allow you to define a set of named constants.

```js
enum Direction {
    Up,
    Down,
    Left,
    Right
}
let heading: Direction = Direction.Up;
```
* Tips and Tricks: Enums help make your code more readable by giving friendly names to numeric values.

* Best Use Cases: Useful when you have a set of related constants.

7) Type Assertion
Type assertion is a way to tell the compiler about the type of a variable when TypeScript can't infer it.

```js
let input: any = "hello";
let length: number = (input as string).length;

```
* Tips and Tricks: Use type assertion when you know more about a value than TypeScript does.

* Best Use Cases: Helpful when working with data from external sources.

8) Decorators
Decorators are a special kind of declaration that can be attached to classes, methods, accessors, properties, or parameters.

```js
function log(target: any, key: string) {
    console.log(`Method ${key} called`);
}
class Example {
    @log
    someMethod() {
        // Method implementation
    }
}
```
* Tips and Tricks: Decorators are widely used in frameworks like Angular for metadata reflection.

* Best Use Cases: Useful for adding metadata to classes and members.

9) Modules
Modules in TypeScript help organize code into reusable units.

```js
// math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// app.ts
import { add } from './math';
console.log(add(2, 3)); // Output: 5
```
* Tips and Tricks: Use modules to keep your codebase clean and maintainable.

* Best Use Cases: Essential for structuring large applications.

10) Namespaces
Namespaces allow you to organize code by grouping logically related objects.

```js
namespace Geometry {
    export class Circle {
        // Circle implementation
    }
}
let circle = new Geometry.Circle();
```

11) Type Inference
Type inference in TypeScript allows the compiler to determine types when they're not explicitly specified.

```js
let num = 10; // TypeScript infers the type as number
```
* Tips and Tricks: TypeScript's type inference can save time and make the code cleaner.

* Best Use Cases: Useful for writing concise code without sacrificing type safety.

12) Type Guards
Type guards allow you to narrow down the type of a variable within a conditional block.

```js
function isNumber(x: any): x is number {
    return typeof x === "number";
}
if (isNumber(value)) {
    // Inside this block, TypeScript knows 'value' is a number
}
```
* Tips and Tricks: Type guards are helpful when dealing with union types.

* Best Use Cases: Useful for working with complex or dynamic data types.

13) Union Types
Union types allow a variable to have multiple types.

```js
let result: number | string;
result = 10; // Valid
result = "error"; // Also valid
```
* Tips and Tricks: Use union types to handle different scenarios for a variable.

* Best Use Cases: Great for representing diverse data types.

14) Intersection Types
Intersection types allow combining multiple types into one.

```js
type A = { a: number };
type B = { b: string };
type C = A & B; // C has both a number property and a string property
```
* Tips and Tricks: Intersection types are useful for combining different types for complex scenarios.

* Best Use Cases: Helpful for creating complex data structures.

15) Type Aliases
Type aliases allow you to create a name for any data type.

```js
type Age = number;
let userAge: Age = 25;
```
* Tips and Tricks: Use type aliases to give descriptive names to complex types.

* Best Use Cases: Useful for improving code readability and maintainability.

16) Triple-Slash Directives
Triple-slash directives are single-line comments containing a single XML tag.

```js
/// <reference path="myModule.d.ts" />
```
* Tips and Tricks: Triple-slash directives are often used to declare dependencies between files.

* Best Use Cases: Useful when working with modules and declaration files.

17) Type Checking JavaScript Files
TypeScript can be used to check and type-check JavaScript files.

```js
// @ts-check
let num: number = "not a number"; // TypeScript will throw a type error
```
* Tips and Tricks: Type checking JavaScript files can catch bugs and improve code quality.

* Best Use Cases: Useful for gradually migrating a JavaScript codebase to TypeScript.

18) Type Inference for Destructured Objects
TypeScript can infer types for destructured objects.

```js
let person = { name: "Alice", age: 30 };
let { name, age } = person; // TypeScript infers the types of 'name' and 'age'
```
* Tips and Tricks: Type inference for destructured objects can save time and reduce redundancy.

* Best Use Cases: Helpful for working with complex data structures.

19) Conditional Types
Conditional types in TypeScript allow you to create types that depend on other types.

```js
type NonNullable<T> = T extends null | undefined ? never : T;
type StringOrNumber = string | number;
type NonNullableStringOrNumber = NonNullable<StringOrNumber>; // Result: string | number
```
* Tips and Tricks: Conditional types are powerful for creating flexible and conditional type definitions.

* Best Use Cases: Useful for creating generic types that depend on conditions.

20) Mapped Types
Mapped types in TypeScript allow you to create new types from existing types.

```js
type Flags = {
    option1: boolean;
    option2: boolean;
};
type NullableFlags = { [K in keyof Flags]: Flags[K] | null }; // Result: { option1: boolean | null, option2: boolean | null }
```
* Tips and Tricks: Mapped types are useful for transforming existing types into new ones.

* Best Use Cases: Helpful for creating variations of existing types.

21) Declaration Merging
Declaration merging in TypeScript allows combining multiple declarations for the same entity.

```js
interface User {
    name: string;
}
interface User {
    age: number;
}
let newUser: User = { name: "Alice", age: 30 };
```
* Tips and Tricks: Declaration merging is useful for extending existing types without modifying them directly.

* Best Use Cases: Helpful for adding functionality to third-party libraries.

22) Type Guards with Classes
Type guards can also be used with classes to narrow down the type of an instance.

```js
class Animal {
    move() {
        console.log("Moving...");
    }
}
class Dog extends Animal {
    bark() {
        console.log("Woof!");
    }
}
function isDog(animal: Animal): animal is Dog {
    return (animal as Dog).bark !== undefined;
}
```
* Tips and Tricks: Type guards with classes are useful for handling polymorphic behavior.

* Best Use Cases: Great for dealing with inheritance and polymorphism.

23) Tuple Types
Tuple types in TypeScript allow expressing an array where the type of a fixed number of elements is known.

```js
let coordinates: [number, number] = [10, 20];
```
* Tips and Tricks: Use tuple types when working with fixed-length arrays with known element types.

* Best Use Cases: Useful for representing structured data like coordinates, RGB values, etc.

24) Index Signatures
Index signatures allow defining how objects can be indexed.

```js
interface StringArray {
    [index: number]: string;
}
let myArray: StringArray = ["a", "b", "c"];
```
* Tips and Tricks: Index signatures are useful for working with objects that behave like arrays.

* Best Use Cases: Helpful for dealing with dynamic data structures.

25) Type Guards with typeof and instanceof
Type guards can be created using the typeof and instanceof operators.

```js
function logValue(value: string | number) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (value instanceof Number) {
        console.log(value.valueOf());
    }
}
```
* Tips and Tricks: Use typeof for primitive types and instanceof for checking instances of classes.

* Best Use Cases: Useful for checking specific types in conditional blocks.

26) Recursive Types
TypeScript supports defining recursive types where a type refers to itself.

```js
interface TreeNode {
    value: string;
    children: TreeNode[];
}
```
* Tips and Tricks: Recursive types are useful for representing hierarchical data structures.

* Best Use Cases: Great for modeling tree-like data.

27) String Literal Types
String literal types allow defining a type that can only have specific string values.

```js
type Direction = "up" | "down" | "left" | "right";
let move: Direction = "up";
```
* Tips and Tricks: String literal types help create specific and concise type definitions.

* Best Use Cases: Useful for representing a fixed set of string values.

28) Namespace Merging
Namespace merging allows extending existing namespaces across multiple files.

```js
// math.ts
namespace Math {
    export function subtract(a: number, b: number): number {
        return a - b;
    }
}
// extendedMath.ts
namespace Math {
    export function multiply(a: number, b: number): number {
        return a * b;
    }
}
```
* Tips and Tricks: Namespace merging is useful for adding functionality to existing namespaces.

* Best Use Cases: Helpful for modularizing code across multiple files.

29) Type Predicates
Type predicates are functions that return a type predicate to narrow down the type within a conditional block.

```js
function isString(value: any): value is string {
    return typeof value === "string";
}
if (isString(input)) {
    console.log(input.toUpperCase());
}
```
* Tips and Tricks: Type predicates are useful for creating reusable type narrowing functions.

* Best Use Cases: Great for handling complex type checks.

30) Inference and Strict Mode
TypeScript's strict mode enables additional type checking options to catch more errors.

```js
// @ts-check
let num: number = "not a number"; // TypeScript in strict mode will throw a type
```

31) Type Guards with in Operator
Type guards can also be created using the in operator to check for the existence of a property in an object.

```js
function hasName(obj: any): obj is { name: string } {
    return "name" in obj;
}
if (hasName(user)) {
    console.log(user.name);
}
```
* Tips and Tricks: The in operator is useful for checking the presence of properties dynamically.

* Best Use Cases: Helpful for checking object properties in a type-safe manner.

32) Type Inference for Arrays
TypeScript can infer the type of arrays based on the elements assigned to them.

```js
numbers = [1, 2, 3]; // TypeScript infers 'numbers' as number[]
```
* Tips and Tricks: Type inference for arrays can simplify code and improve readability.

* Best Use Cases: Useful for working with arrays of known elements.

33) Promises and Async/Await
TypeScript supports Promises and the async/await syntax for handling asynchronous operations.

```js
function fetchData(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 2000);
    });
}
async function fetchDataAsync() {
    const data = await fetchData();
    console.log(data);
}
```
* Tips and Tricks: Promises and async/await are essential for handling asynchronous code in a synchronous-like manner.

* Best Use Cases: Great for managing asynchronous operations in a readable way.

34) Generics Constraints
Generics constraints allow restricting the types that can be used with a generic type parameter.

```js
function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}
```
* Tips and Tricks: Generics constraints ensure type safety and provide more specific information to TypeScript.

* Best Use Cases: Useful for working with generic types in a controlled way.

35) Type Inference for Default Values
TypeScript can infer types based on default values assigned to variables.

```js
message = "Hello, World!"; // TypeScript infers 'message' as string
```
* Tips and Tricks: Type inference for default values can be convenient for initializing variables without explicitly specifying types.

* Best Use Cases: Useful for reducing verbosity in code and allowing TypeScript to infer types based on initial values.

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

{% link https://dev.to/shubhamtiwari909/button-component-with-cva-and-tailwind-1fn8 %}
{% link https://dev.to/shubhamtiwari909/microfrontend-react-solid-vue-333b %}
{% link https://dev.to/shubhamtiwari909/codium-ai-assistant-for-devs-57of %}
{% link https://dev.to/shubhamtiwari909/zustand-a-beginners-guids-fh7 %}