DEV Community: notdennis

Using Type Aliases Instead Of String literals In Typescript

notdennis — Sat, 12 Aug 2023 09:31:07 +0000

Article Objective

In this article, we will discuss the difference between string literals and type aliases in TypeScript. We will also explain when to use each one depending on your use case.

Introduction

Type aliases are an incredibly useful feature in TypeScript that allows developers to create reusable aliases for types such as strings and numbers. This can be particularly helpful when it comes to achieving the goal of DRY coding, as it eliminates the need to repeatedly define the same types throughout a project. In addition to this, TypeScript also offers the ability to use string literals as a type, which can further enhance the flexibility and readability of your code. By leveraging these powerful features, developers can create cleaner, more maintainable code that is easier to work with and less prone to errors or bugs.

Using string literals

In TypeScript, we have the option to use string literals to define the type of a variable. This means that instead of simply assigning a basic string value to a variable, we can specify a specific string literal as its type. For example, if we have a variable called "animal", we could define its type as the string literal "dog". This can provide more clarity and specificity in our code.


let animal:"dog"

animal = "dog"   // ok//

animal = "pig"  // compiler compalins //

When working with code snippets, it's important to keep in mind that certain variables may have limitations on the values they can hold. In the case of the "animal" variable, attempting to assign any value other than "dog" would result in a compiler error. However, the use of string literals can be particularly helpful when paired with TypeScript union types. By defining a type that can be more than one, developers can create even more dynamic and powerful code.


let animal:"dog" |"pig"

animal = "dog"   // ok//

animal = "pig"  // compiler is happy //

It is worth noting that when using the union type, one can accept both "dog" and "pig." However, it is important to keep in mind that literal strings cannot be employed as a type for other variables. This renders them not reusable and, therefore, not practical. To address this issue, it is recommended to use a type alias or interface instead. This will allow for greater flexibility and efficiency in coding.

Using Type ALiases

During the process of coding, developers strive to eliminate the repetition of identical blocks or lines of code. In TypeScript, a Type Alias is a useful feature that enables the creation of a new name to reference any type, such as string, number, tuple, union, function, and more. This functionality enables developers to write code more efficiently and with greater clarity, as it allows for the use of concise and meaningful identifiers instead of repeatedly typing out lengthy type definitions.

type animal = "dog" |"pig"

const pet1:animal = "dog"   // ok//

const pet2:animal = "pig"  // compiler is happy //

You can use the type "animal" throughout your code, as opposed to only using string literals.

Referencing other types with keyword Type

type num = 1 | 2; // number

type bool = true | false; // boolean

type obj = {a: 1} | {b: 2}; // object

type func = (() => string) | (() => void); // function

A beginner guide to local storage, session storage and cookies in Javascript.

notdennis — Thu, 10 Aug 2023 10:04:30 +0000

Local storage and Session Storage

Local storage and session storage are both mechanisms for storing data on the web. Local storage, in particular, is designed to keep data on the client side and has no expiration date. In other words, the data remains on the user's device until it is cleared manually or by the application. It is important to note that keys and values in local storage are always strings, which means that any data that is not a string will need to be converted before being added to local storage. Overall, local storage is a reliable and efficient way to store data on the web, making it a popular choice for developers.

PROPERTIES OF LOCAL STORAGE.

localStorage.setItem()

When using the localStorage.setItem() method, it is important to keep in mind that it takes two parameters: the key and value pair. By specifying this pair, you can effectively set or update the value of the storage item that you are working with. This method is particularly useful for managing and manipulating data within your applications, and it can be easily incorporated into your code with minimal effort. Whether you are a seasoned developer or just starting out, understanding the ins and outs of this method can help you to streamline your workflows and achieve your goals with greater ease and efficiency.

localStorage.setItem("keyname", "value")

// For example: 
localStorage.setItem("name", "dennis");

console.log(localStorage.name); // output: dennis

localStorage.getItem()

The method called localStorage.getItem() is utilized to retrieve a stored value from local storage by specifying the corresponding key name. This method solely operates if the key name exists within the storage.

localStorage.getItem("keyname")

// For example: 
localStorage.setItem("myCat", "Tom");

localStorage.getItem("myCat"); // output: Tom

LocalStorage.removeItem()

The LocalStorage.removeItem() method is a useful tool for removing specific items from local storage. This is achieved by providing the method with the key name of the item to be removed. By utilizing this function, users can easily manage their local storage and keep it organized. It is important to note that the method only removes the item associated with the given key name, leaving all other items intact.

localStorage.removeItem(keyName);
localStorage.removeItem("myCat"); // undefined

localStorage.clear()

If you want to delete all the data stored in localStorage, you can accomplish this by using the method localStorage.clear(). This method will remove all the key/value pairs that are currently stored in the localStorage object. It is important to note that this action cannot be undone, so make sure you really want to clear localStorage before using this method. Additionally, keep in mind that this method only affects the current domain and cannot be used to clear data from other domains.

localStorage.clear();

CONVERTING OBJECTS TO STRING AND CONVERTING BACK TO OBJECTS.

In order to transform an object into a string, it is necessary to utilize a specific method. This method allows for the conversion of the object's data into a format that can be interpreted as a string. By doing so, the object can be easily manipulated and utilized within a program or application. It is important to have a clear understanding of this process, as it is a fundamental aspect of programming and software development.


const person = {
  name: “dennis”,
  age: 18
};

localStorage.setItem(‘user’, JSON.stringify(person));

To retrieve the original object from a string, we can make use of the JSON.parse method. Specifically, we can call JSON.parse(localStorage.getItem(user)), where "user" is the key of the item we want to retrieve from local storage. This will convert the string back into the original object that we stored in local storage.

SIMILARITIES BETWEEN LOCAL STORAGE AND SESSION STORAGE

I've noticed some similarities between local storage and session storage that I think you'll find interesting. Firstly, both of these storage options persist refresh, meaning that any data stored in them will still be available even if you refresh the page. Additionally, they can both be accessed without an internet connection, which can be a real lifesaver if you're working on a project and suddenly lose your connection. Another similarity is that they are both client-side storage APIs, which means that the data is stored on the user's device rather than a remote server. Finally, they also possess the same method, which makes it easy to work with both types of storage using the same commands. Overall, I think these similarities make local storage and session storage great options for storing data on the web.

DIFFERENCES BETWEEN LOCAL STORAGE AND SESSION STORAGE.

LOCAL STORAGE

When comparing local storage and session storage, there are some notable differences to consider. The first difference is that local storage data is permanent and will not expire, meaning it will remain stored even after a browser restart. Additionally, local storage data can be accessed across multiple tabs, making it a great option for storing data that needs to be shared across the entire website.

SESSION STORAGE

Session storage is a type of browser storage that retains data even after a page refresh. However, this data is only available within the same tab and will not survive a browser restart or be accessible from other tabs. Additionally, session storage data has a set expiration date and is automatically deleted when the tab is closed.

COOKIES

Cookies are a type of data storage mechanism that consists of small text files containing a name and value pair. These files are commonly used by websites to store user-specific information, such as login credentials, preferences, and browsing history, which can be retrieved and remembered when the user returns to the site. Cookies are primarily used for server-side authentication, allowing websites to verify a user's identity and grant access to protected content or services. Overall, cookies play a crucial role in providing a personalized and seamless browsing experience for users while ensuring the security and privacy of their data.

Understanding React Context API and UseReducer Hooks for beginner

notdennis — Wed, 09 Aug 2023 11:08:17 +0000

Article Objective

By the end of this article, the reader will have a clear grasp of the concept of Context API and the useReducer hook. They will also be able to apply these skills to various React projects. This article is targeted towards beginners.

What is Context API?

React Context API was officially introduced in React v16.3 to address the problem of "props drilling" in React. This API offers a solution for passing data through the component tree without the need to manually pass props down at every level. React Context API was influenced by popular state management libraries such as Redux.

Let’s Explore How We Would Use React Context API

To establish a context in React, we utilize the "createContext" keyword. This approach grants us access to a provider and consumer component, which can prove to be quite useful.

import React,{createContext} from 'react';

const newContext = createContext({color: 'blue'})

const { Provider, Consumer } = newContext;

The provider component is a useful tool that enables all child components, regardless of their nesting level, to access the state. This is achieved by wrapping the index file or root component. However, it is important to note that a value prop must be passed in order to provide the current data or state. This ensures that the component is able to function properly and deliver the necessary information. Overall, the provider component is an essential element in the development of robust and effective applications.

<Provider value={color: 'blue'}>
  {children}
</Provider>

UseContext Hook

The useContext hooks are a useful tool for effectively utilizing the createContext API. This API returns a context object, which can then be passed into the useContext hook to access the current context value for that specific context. By doing so, developers can more easily manage and manipulate the data within that context, ultimately improving the overall functionality and efficiency of their code.

import React,{createContext} from 'react';

const newContext = createContext(color: 'blue')

function Index() {
  return (
    <newContext.Provider value={color: 'blue'}>
      <App />
    </newContext.Provider>
  );
}

function App(props) {
  return (
    <div>
      <ShowColor />
    </div>
  );
}

function ShowColor() {
  const color = useContext(newContext) 
  return (
   <h1>{color} </h1>
  )
}

The provided code snippet comprises three crucial components that work in harmony to ensure seamless functionality. The first component is the Index, which serves as the root and has other subordinate components as its children. In this context, we utilize the provider to facilitate the provision of data and state for the entire application. Moving on, the App component wraps the ShowColor component, which is where we employ the useContext hook to efficiently consume the data. This methodology ensures that all the components work together, providing a smooth and coherent user experience.

useReducer Hook

The useReducer hook is a highly useful state management tool that works in a manner similar to Redux. Its primary purpose is to manage the state of our app, much like the useState or class component state. However, what sets useReducer apart is its ability to handle complex state logic, making it an ideal choice for global state management with the help of the context API. This powerful hook is modeled after the widely popular third-party state management library, Redux, which aids in managing app state and eliminating prop drilling. With useReducer, developers can manage complex state with ease, making it a crucial tool for any modern app development project.

In order to effectively utilize the useReducer hook in React, it is necessary to have three key components: the Action, Reducer, and State. The reducer function is the central component of this process, as it takes in props as input and returns the current state, paired with a method. Essentially, it is responsible for defining the behavior of the actions that are taken within the application. When the reducer function receives the current state, it performs the requested action and subsequently returns a new state.

On the other hand, the Action component is an object that is responsible for sending data to the state. Typically, this component consists of two distinct properties: the type property, which describes the action that is being performed, and the payload property, which contains the information that needs to be modified in the app state.

Finally, the State component serves as the single source of truth for our application. It maintains a record of the current snapshot of the application's state at any given point in time. As an example, consider the implementation of a counter application that utilizes useReducer. Overall, understanding the role of each of these components is critical to effectively utilizing useReducer within a React application.

Here is a simple code snippet on how to make use of UseReducer and Context Api effectively

import React, { createContext, useContext, useReducer } from 'react';

// Create a new context
const ListContext = createContext();

// Reducer function
const listReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter(item => item !== action.payload);
    default:
      return state;
  }
};

// Custom hook to access the context
export const useListContext = () => {
  return useContext(ListContext);
};

// Context Provider component
export const ListProvider = ({ children }) => {
  const [list, dispatch] = useReducer(listReducer, []);

  return (
    <ListContext.Provider value={{ list, dispatch }}>
      {children}
    </ListContext.Provider>
  );
};

Use the context in your main App.js component:

import React from 'react';
import { ListProvider } from './ListContext';
import ItemList from './ItemList';

function App() {
  return (
    <ListProvider>
      <div className="App">
        <h1>Item List</h1>
        <ItemList />
      </div>
    </ListProvider>
  );
}

export default App;

Create another component ItemList.js to display and interact with the list:

import React from 'react';
import { useListContext } from './ListContext';

const ItemList = () => {
  const { list, dispatch } = useListContext();

  const addItem = () => {
    dispatch({ type: 'ADD_ITEM', payload: `Item ${list.length + 1}` });
  };

  const removeItem = item => {
    dispatch({ type: 'REMOVE_ITEM', payload: item });
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {list.map(item => (
          <li key={item}>
            {item}
            <button onClick={() => removeItem(item)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;

In this example, we create a context named ListContext which includes a reducer to manage the list state. We define a custom hook useListContext to easily access the context values within components. The ListProvider component wraps the application, and the ItemList component uses the context to display and interact with the list.

Remember that this is a basic example of how the Context API can be used to manage the state in a React application. In more complex scenarios, you might want to consider using Redux or other state management libraries for better scalability and advanced features.