feat: examples of TypeScript Avanzado: Mejora tu Developer eXperience

feat: add TypeScript DX course examples

Author: ismanapa

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
             ${{ runner.os }}-
 
       - name: 📥 Install dependencies
-        run: npm install
+        run: npm install --force
 
       - name: 💅 Lint code style
         run: npm run lint

package-lock.json

@@ -4,7 +4,21 @@
   "version": "1.0.0",
   "author": "codelytv",
   "description": "✨ Awesome TypeScript Examples with complete show cases of how to take advantage of the language potential.",
-  "keywords": ["typescript", "eslint", "examples", "dependency-injection", "decorators", "generics", "enums", "any", "unknown", "exhaustiveness-checking", "utility-types", "typescript-example", "typescript-examples"],
+  "keywords": [
+    "typescript",
+    "eslint",
+    "examples",
+    "dependency-injection",
+    "decorators",
+    "generics",
+    "enums",
+    "any",
+    "unknown",
+    "exhaustiveness-checking",
+    "utility-types",
+    "typescript-example",
+    "typescript-examples"
+  ],
   "homepage": "https://github.com/CodelyTV/awesome-typescript-examples#readme",
   "repository": {
     "type": "git",
@@ -19,12 +33,13 @@
     "test": "jest"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.0.2",
     "@swc/core": "^1.2.172",
     "@swc/jest": "^0.2.20",
     "@types/express": "^4.17.13",
     "@types/jest": "^27.4.1",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -33,7 +48,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest": "^28.0.1",
     "prettier": "^2.6.2",
-    "typescript": "^4.6.3"
+    "typescript": "^5.1.6"
   },
   "dependencies": {
     "diod": "^1.0.2",

package.json

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// Example with "as const"
+export type User = { name: string; age: number };
+
+function getUserName<T extends User>(user: T): T["name"] {
+  return user.name;
+}
+
+const userName = getUserName({ name: "Isma", age: 31 } as const);
+//      ^?
+
+// Ejemplo const type parameter
+function getUserAge<const T extends User>(user: T): T["age"] {
+  return user.age;
+}
+
+const userAge = getUserAge({ name: "Isma", age: 31 });
+//     ^?
+
+// Ejemplo con array y readonly
+// En este ejemplo es importante combinar el const con el readonly  porque si no el array sería
+// mutable dentro de la función y no se infiere el tipo
+type HasNames = { names: readonly string[] };
+function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
+  return arg.names;
+}
+
+const names = getNamesExactly({ names: ["Javi", "Ronny", "Isma"] });
+//     ^?

src/const-type-parameter/basic-example.ts

@@ -0,0 +1,7 @@
+import { EndpointPayload } from "./EndpointPayload";
+
+export class CreateCoursePayload extends EndpointPayload {
+  constructor(public readonly title: string, public readonly startDate: Date) {
+    super();
+  }
+}

src/const-type-parameter/fetcher/CreateCoursePayload.ts

@@ -0,0 +1,7 @@
+import { EndpointPayload } from "./EndpointPayload";
+
+export class CreateUserPayload extends EndpointPayload {
+  constructor(public readonly name: string) {
+    super();
+  }
+}

src/const-type-parameter/fetcher/CreateUserPayload.ts

@@ -0,0 +1 @@
+export class EndpointPayload {}

src/const-type-parameter/fetcher/EndpointPayload.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { CreateCoursePayload } from "./CreateCoursePayload";
+import { CreateUserPayload } from "./CreateUserPayload";
+import { EndpointPayload } from "./EndpointPayload";
+
+type Endpoint = {
+  name: string;
+  url: string;
+  payload: new (...params: any) => EndpointPayload;
+};
+
+function setupFetcher<
+  const GetEndpoint extends Endpoint,
+  const PostEndpoint extends Endpoint
+>(endpoints: { get: GetEndpoint[]; post: PostEndpoint[] }) {
+  const endpointNameToUrl = (method: keyof typeof endpoints, name: string) => {
+    const t = endpoints[method];
+
+    const endpoint = t.find((t) => t.name === name);
+
+    if (!endpoint) {
+      throw new Error(`Unexpected fetcher error: Endpoint ${name} not found`);
+    }
+
+    return endpoint.url;
+  };
+
+  const post = <
+    TName extends PostEndpoint["name"],
+    TPayload extends Extract<PostEndpoint, { name: TName }>["payload"]
+  >(
+    name: TName,
+    payload: InstanceType<TPayload>
+  ) => {
+    console.log(endpointNameToUrl("post", name), payload.toString());
+  };
+
+  return { post };
+}
+
+const api = setupFetcher({
+  get: [],
+  post: [
+    {
+      name: "createUser",
+      url: "/api/user",
+      payload: CreateUserPayload,
+    },
+    { name: "createCourse", url: "/api/course", payload: CreateCoursePayload },
+  ],
+});
+
+api.post(
+  "createCourse",
+  new CreateCoursePayload("TypeScript Avanzado", new Date())
+);

src/const-type-parameter/fetcher/fetcher.ts

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+type ExtractRouteParams<T> = T extends `:${infer P}/${infer Rest}`
+  ? P | ExtractRouteParams<`${Rest}`>
+  : T extends `:${infer P}`
+  ? P
+  : T extends `${infer _Start}/${infer Rest}`
+  ? ExtractRouteParams<Rest>
+  : never;
+
+type RouteParamsObject<T extends string> = {
+  [key in T]: string;
+};
+
+export type Route = {
+  name: string;
+  path: string;
+};
+
+function buildRouter<const T extends Route>(routes: T[]) {
+  const getRoute = <
+    RouteName extends T["name"],
+    RouteParams extends RouteParamsObject<
+      ExtractRouteParams<Extract<T, { name: RouteName }>["path"]>
+    >
+  >(
+    name: RouteName,
+    params: RouteParams
+  ): string => {
+    const route = routes.find((n) => n.name && n.name === name)!.path;
+
+    Object.entries<string>(params).forEach(([key, value]) => {
+      route.replace(`:${key}`, value);
+    });
+
+    return route;
+  };
+  return { getRoute };
+}
+
+// Ejemplo de narrowing que explicando el porque funciona la firma anterior
+type GeneratedRoutesType =
+  | { name: "login"; path: "/login"; params: [] }
+  | { name: "courses"; path: "/courses/:category/:year"; params: ["category"] };
+
+type RouteNames = GeneratedRoutesType["name"];
+//     ^?
+
+type RouteParams = Extract<GeneratedRoutesType, { name: "courses" }>["params"];
+//     ^?
+
+type RoutePath = Extract<GeneratedRoutesType, { name: "courses" }>["path"];
+//     ^?
+
+const { getRoute } = buildRouter([
+  {
+    name: "login",
+    path: "/login",
+  },
+  {
+    name: "courses",
+    path: "/courses/:category",
+  },
+]);
+
+const route = getRoute("courses", { category: "TypeScript" });

src/const-type-parameter/router/router-with-extract-params.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export type Route = {
+  name: string;
+  path: string;
+  params: readonly string[];
+};
+
+function buildRouter<const T extends Route>(routes: T[]) {
+  const getRoute = <
+    RouteName extends T["name"],
+    RouteParams extends Extract<T, { name: RouteName }>["params"]
+  >(
+    name: RouteName,
+    params: { [key in RouteParams[number]]: string }
+  ): string => {
+    const route = routes.find((n) => n.name && n.name === name)!.path;
+
+    Object.entries<string>(params).forEach(([key, value]) => {
+      route.replace(`:${key}`, value);
+    });
+
+    return route;
+  };
+  return { getRoute };
+}
+
+// Ejemplo de narrowing que explicando el porque funciona la firma anterior
+type GeneratedRoutesType =
+  | { name: "login"; path: "/login"; params: [] }
+  | { name: "courses"; path: "/courses"; params: ["category"] };
+
+type RouteNames = GeneratedRoutesType["name"];
+//     ^?
+
+type RouteParams = Extract<GeneratedRoutesType, { name: "courses" }>["params"];
+//     ^?
+
+const { getRoute } = buildRouter([
+  {
+    name: "login",
+    path: "/login",
+    params: [],
+  },
+  {
+    name: "courses",
+    path: "/courses/:category",
+    params: ["category"],
+  },
+]);
+
+const route = getRoute("courses", { category: "typescript" });