Typescript Generics Development Tutorials, Guides & Insights

You can constrain generics to ensure that the types passed to them meet certain requirements. This is useful when you want to make sure that the generic type has certain properties or methods.

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

const point: Point = { x: 10, y: 20 };
const xValue = getProperty(point, "x");

class Box<T> {
  private contents: T;

  constructor(value: T) {
    this.contents = value;
  }

  getContents(): T {
    return this.contents;
  }
}

const numberBox = new Box<number>(123);
const stringBox = new Box<string>('Hello');

In this example, Box can store and return any type, depending on what it is initialized with.

Then, create a webpack.config.js file:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};