Menambahkan Properti ke Window di TypeScript

Halo, teman-teman! Di artikel kali ini, kita akan membahas cara menambahkan properti baru ke tipeWindowdi TypeScript. Jika kamu baru mengenal TypeScript, jangan khawatir! Kita akan menjelaskan semuanya dengan cara yang sederhana dan mudah dimengerti. Yuk, kita mulai!

Apa Itu Declaration Files?

Sebelum kita melangkah lebih jauh, mari kita bahas sedikit tentang apa itudeclaration files. File dengan akhiran.d.tsdigunakan untuk mendeklarasikan tipe untuk kode yang tidak tersedia bagi compiler TypeScript. Jadi, jika kamu memiliki kode JavaScript yang ingin kamu gunakan dalam proyek TypeScript, kamu bisa menggunakan declaration files ini untuk memberi tahu TypeScript tentang tipe-tipe yang ada.

Langkah-langkah Menambahkan Properti ke Tipe Window

Sekarang, mari kita lihat bagaimana cara menambahkan properti baru ke tipeWindow. Misalnya, kita ingin menambahkan properti bernamasomePropertydengan tipeSomeType. Berikut adalah langkah-langkahnya:

1.Buat File Declaration: Pertama, buat file baru dengan nama<any-name>.d.ts. Kamu bisa memberi nama file ini sesuai keinginanmu, misalnyacustom.d.ts.

2.Deklarasikan Properti: Di dalam file tersebut, kita akan menggunakan sintaks berikut:

// <any-name>.d.ts
    export declare global {

        interface Window {

            someProperty: SomeType;

        }

    }

3.Penjelasan Sintaks:

-export declare global { ... }: Bagian ini digunakan untuk mengekspor deklarasi ke dalam scope global. Ini penting karena kita ingin menambahkan properti ke interfaceWindow, yang bersifat global.

-interface Window { ... }: Di sini kita mendeklarasikan bahwa kita ingin menambahkansomePropertyke dalam interfaceWindow.

4.Menggunakan Properti: Setelah kita mendeklarasikan properti tersebut, kita bisa menggunakannya di mana saja dalam kode kita. Misalnya:

window.someProperty = // assign some value;
console.log(window.someProperty);

Mengapa Kita Perlu Ini?

Menambahkan properti ke tipeWindowbisa sangat berguna, terutama jika kamu bekerja dengan library atau API yang tidak memiliki tipe yang sudah didefinisikan di TypeScript. Dengan cara ini, kamu bisa menjaga kode tetap terstruktur dan terjaga tipe datanya.

Contoh Penggunaan

Misalnya saya akan mengambakan clarity custom event property ketika menggunakan useEffect

Panduan tentang customevent di clarity

"use client";
import { useGetAuth, UserResponse } from "@core";
import { useParams } from "next/navigation";
import { useEffect } from "react";

export function ClarityEventTracking() {
  const { data: user } = useGetAuth({
    redirectToLogin: false,
  });
  const params = useParams();

  useEffect(() => {
    const identifyUser = async (user?: UserResponse) => {
      try {
        const response = await window.clarity(
          "identify",
          user?.email ?? "not-logedin-user",
          `Client-Facing-${user?.idUser}`,
          `${JSON.stringify(params)}`,
          user?.fullName ?? "nama-tidak-terdektsi"
        );

        console.table(response);
      } catch (error) {
        console.error("Error identifying user:", error);
      }
    };

    if (typeof window !== "undefined" && typeof window.clarity === "function") {
      identifyUser(user);
    }
  }, [user]);

  return null;
}

Maka akan muncul error

Property 'clarity' does not exist on type 'Window & typeof globalThis'.ts(2339)

Solusinya adalah dengan membuat fileclarity.d.tsdi root

interface ClarityIdentifyParams {
  email: string;
  session: string;
  page: string;
  userHint: string;
}

interface ClarityIdentifyResponse {
  id: string;
  session: string;
  page: string;
  userHint: string;
}
export declare global {
  interface Window {
    clarity: (
      action: "identify",
      email: string,
      session: string,
      page: string,
      userHint: string
    ) => Promise<ClarityIdentifyResponse>;
  }
}

Sekarang kamu sudah tahu cara menambahkan properti ke tipeWindowdi TypeScript! Dengan menggunakan declaration files, kamu bisa mendeklarasikan tipe untuk kode yang tidak tersedia bagi TypeScript. Ini adalah langkah awal yang bagus untuk membuat proyekmu lebih terstruktur dan terjaga dari kesalahan tipe.

Panduan lengkaphttps://www.typescriptlang.org/docs/handbook/declaration-merging.html

Jadi, jangan ragu untuk mencoba menambahkan properti lainnya ke tipeWindowatau tipe lainnya di proyekmu. Semoga artikel ini bermanfaat dan membuatmu lebih nyaman dengan TypeScript. Selamat coding! 🎉