🫱👉 [TYPESCRIPT] Generics (Full)

https://www.typescriptlang.org/docs/handbook/generics.html

Hiểu và nhớ cách sử dụng

1. (type parameter) T in identity<T>(arg: T): T
function identity<T>(arg: T): T {
  return arg;
}
2. (type parameter) U in <U>(arg: U): (U)
let myIdentity

Do đó ta có thể sử dụng

let myIdentity: <T>(arg: T) => T = identity;

1 . Tự động phát hiện kiểu dữ liệu rất thông minh https://www.youtube.com/watch?v=NS1wJBsQ9SM

const last = <T>(arr:Array<T>) => arr[arr.length - 1];
const last1 = last([1,2]);
const last2 = last(["a","b"]);
const last3 = last([1,"aaa"]);
const last4 = last([1,"aaa",true])

2. Kế thừ kiểu thông minh

const makeT = <T extends {firstName: string, lastName: string}>(object:T) => ({
  ...object,
  fullName: `${object.firstName} ${object.lastName}`
})
const makeT1 = makeT({firstName: "Lione",lastName:"Pham", age: 20})
console.log(makeT1);

3. Generic and interface

interface Resource<T> {
  uid: number,
  name: string,
  data: T
}
const lionel:Resource<string> = {
  uid: 1,
  name: "Lionel Pham",
  data: "Hi"
}

4. keyof

keyoflà một từ khóa trong TypeScript được sử dụng để trích xuất kiểu khóa từ một kiểu đối tượng.

https://www.w3schools.com/typescript/typescript_keyof.php

4.1 keyof with explicit keys

interface Person {
  name: string;
  age: number;
}
// `keyof Person` here creates a union type of "name" and "age", other strings will not be allowed
function printPersonProperty(person: Person, property: keyof Person) {
  console.log(`${person[property]}`);
}
let person = {
  name: "Max",
  age: 27
};
printPersonProperty(person, "age"); // Printing person property name: "Max"

4.2 keyof with index signatures

type StringMap = {
  [key: string]: unknown
};
// `keyof StringMap` resolves to `string` here
function createStringPair(property: keyof StringMap, value: string): StringMap {
  return {
    [property]: value
  };
}
console.log(createStringPair("Lionel","Hi"));

5. How to Define and Use Generic Components in React

— 5.1 Function

interface MyComponentProps<T> {
  data: T;
  // Add additional props specific to your component
}
function MyComponent<T>({ data }: MyComponentProps<T>) {
  return (
    <div>
      {/* JSX content */}
    </div>
  );
}

— 5.2 Arrow Function

Để tránh sự mơ hồ giữa các tham số kiểu chung và một jsxthành phần, bạn thêm dấu phẩy theo sau tham số kiểu để phân biệt nó với JSX.Element.

interface MyComponentProps<T> {
  data: T;
}
// notice the trailing comma after <T
const MyComponent = <T,>({ data }: MyComponentProps<T>) => {
  return (
  <div>
    {/* JSX content */}
  </div>
  )
};
export default MyComponent;

— 5.3 Example Use Case Of Generic Components

src\App.tsx

import * as React from 'react';
import { Summary } from './Summary';
interface User {
  id: number;
  name: string;
  email: string;
}
interface Product {
  id: number;
  name: string;
  price: number;
}
const userData: User = {
  id: 1,
  name: "John Doe",
  email: "[e-mail]"
};
const productData: Product = {
  id: 1,
  name: "Smartphone",
  price: 999
};
export default class App extends React.Component<any, any> {
  render() {
    return (
      <div>
        <Summary<User, "name"> data={userData} property="name" />
        <Summary<Product, "price"> data={productData} property="price" />
      </div>
    );
  };
};

src\Summary.tsx

interface SummaryProps<T extends object, K extends keyof T> {
  data: T;
  property: K;
}
export function Summary<T extends object, K extends keyof T>({data,property}: SummaryProps<T, K>) {
  const value = data[property] as string;
  return (
    <div>
      {(typeof property === "string") ? (<p>{property}: {value}{" "}</p>) : ("")}
    </div>
  );
}