Tag: web-development

TypeScript: Index signature for type ‘string’ is missing in type …

The error “Index signature for type ‘string’ is missing in type” occurs in TypeScript when we are trying to access a property using a dynamic string, but the object type doesn’t define an index signature to accommodate that.

For Example, The above Error will come in the following scenario

index.ts

type Person = {
  name: string;
  age: number;
};

const person: Person = { name: "Joy", age: 20 };

const key = "email";

console.log(person[key]); // Error: Index signature is missing

In the above example, typescript throws an error because key could be any string, but the Person type only explicitly defines name and age. To fix this we can add an index signature to the type as follows.

index.ts

type Person = {
  name: string;
  age: number;
  [key: string]: string // index signature allows only string values
};

const person: Person = { name: "Joy", age: 20, email: "joy@gmail.com" };

const key= "email";

console.log(person[key]); // No Error

Heart Beat Animation with ReactJS and CSS

Heart.js

import React from 'react';
import './Heart.css';

const Heart = () => {
  return (
    <div className="heart-container">
      <div className="heart"></div>
    </div>
  );
};

export default Heart;
Heart.css

/* Align the heart to the center of the page */
.heart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* creating two circles */
.heart::before,
.heart::after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #e63946;
    position: absolute;
    border-radius: 50%;
}

.heart::before {
    top: -50px;
}

.heart::after {
    left: 50px;
}

/* Creating square */
.heart {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #e63946;
    transform: rotate(-45deg);
    animation: beat 1s infinite;
}

/* Heart Beat Animation */
@keyframes beat {
    0%, 100% {
        transform: scale(1) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
}
  • By using div with className(.heart) we have created heart shape
  • By using the div with the className(.heart-container) we have aligned the heart to the center of the page.
  • Heart Shape: We have created the heart by positioning two circular divs (::before and ::after) next to a square div, then rotating the main .heart div by -45deg.
  • Animation: The @keyframes beat animation makes the heart scale up and down, creating a “beating” effect.
  • 0%, 100%: The heart starts and ends at its original scale (1), so it returns to the original size after each beat.
  • 50%: The heart scales up to 1.2 times its original size, creating the “pumping” effect in the middle of each beat cycle.