Programming on David Lang

TypeScript Arrays: 25 Essential Functions and Examples

Thu, 22 Jun 2023 00:00:00 +0000

Introduction:

Arrays are a fundamental data structure in TypeScript, allowing us to store and manipulate collections of elements. TypeScript provides a rich set of array functions that simplify common tasks and enhance the functionality of arrays. In this article, we will explore 25 essential functions of TypeScript arrays and provide practical examples to help you harness their power in your projects.

1. push():

Adds one or more elements to the end of an array.

Security - Authentication Workflows

Sun, 05 Feb 2023 00:00:00 +0000

Here are three scenarios for implementing authentication workflows.

Internet Applications (Public facing)

For internet web applications and APIs, Session based (SessionID cookie) and Token Based (JWT) Authentication can be implemented.

Session Based: Implemented for a majority of traditional and stateful web applications. Once the user is authenticated, A Session state is created and stored in an external State server or SQL database. The Session state is identified by a unique SessionID. This SessionID is returned to the client and set as a cookie using Set-Cookie: sessionid=38askse24d56dh43hrs7a8; HttpOnly; Path=/.

Efficient Data Flow in React: Unveiling the Power of Prop Drilling

Wed, 08 Jun 2022 00:00:00 +0000

Introduction:

React, the popular JavaScript library for building user interfaces, offers several powerful features that make it a developer-friendly choice. One such feature is prop drilling, a technique used for passing data from a top-level component to a deeply nested component. In this blog post, we will explore the concept of prop drilling, understand its benefits and limitations, and provide an example using TypeScript to demonstrate its usage.

What is Prop Drilling?

Prop drilling refers to the process of passing data through multiple layers of components in order to make it accessible to a deeply nested component that needs it. In React, components are organized in a hierarchical structure, where data typically flows from parent components to their children. However, when a component deeply nested in the component tree requires data from a top-level component, prop drilling comes into play.

Using React Hooks - useState and useEffect

Tue, 15 Mar 2022 00:00:00 +0000

With the release of Hooks in React 16.8, it is now possible to store state in a function. We can add react features like useState and useEffect into the function directly without needing to create class.

useState

The useState hook adds state to the functional components. useState hook allows you to declare one state variable at a time.

import React, { useState } from 'react';

function Counter() {
  //Declare the "counter" state variable
  const [counter, setCounter] = useState(0);

  return (
      <div>
        <p>Clicked {counter} times</p>

        //increment the counter by 1 on every click
        <button onClick={() => setCounter(counter + 1)}>Click here</button>
      </div>
  );
}

useEffect

The useEffect allows to manage side effects in a functional component. Some of the examples are fetching external data using api, manipulating DOM in react. It is similar to componentDidMount and componentDidUpdate from class component.

Advanced TypeScript: Generics and Utility Types

Sat, 28 Aug 2021 00:00:00 +0000

Generics make functions and types reusable without sacrificing type safety. Utility types transform existing types-essential for API layers and form handling.

Generic Functions

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

const n = first([1, 2, 3]);      // number | undefined
const s = first(['a', 'b']);     // string | undefined

Constrained Generics

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

Utility Types

Partial<T> - all properties optional
Pick<T, K> - subset of keys
Omit<T, K> - exclude keys
Record<K, V> - keyed object type

type UpdateUserDto = Partial<Pick<User, 'name' | 'email'>>;

Conclusion

Master generics and utilities before reaching for complex conditional types. They keep DTOs, reducers, and hook return types DRY and accurate.

Modern JavaScript ES2020: Top Features You Should Know

Sat, 28 Nov 2020 00:00:00 +0000

ECMAScript 2020 added practical features that reduce boilerplate and improve null-safety. If you are still avoiding optional chaining, now is the time to adopt it.

Optional Chaining and Nullish Coalescing

const city = user?.address?.city ?? 'Unknown';

?. short-circuits on null or undefined. ?? returns the right side only when the left is null or undefined-unlike ||, it preserves 0 and ''.

BigInt and globalThis

BigInt handles integers beyond Number.MAX_SAFE_INTEGER. globalThis provides a standard way to access the global object in browsers and Node.

TypeScript for JavaScript Developers: Getting Started

Sat, 18 Apr 2020 00:00:00 +0000

TypeScript adds static types to JavaScript, catching bugs at compile time and improving editor autocomplete. For full stack developers moving between frontend and backend, it is one of the highest-leverage skills to adopt.

Installing and Configuring

npm install -D typescript @types/node
npx tsc --init

A sensible tsconfig.json for Node or React projects enables strict, esModuleInterop, and skipLibCheck.

Core Concepts

Interfaces describe object shapes. Generics make reusable components type-safe. Union types (string | number) model values that can be one of several types.