learnreact
nextjs
javascriptAdvanced JavascriptlearnapilearnreactAdvanced ReactjsType ScriptnextjsTailwind CSS && MateriallionelnodejsNodejs Advanced
nextjs
javascriptAdvanced JavascriptlearnapilearnreactAdvanced ReactjsType ScriptnextjsTailwind CSS && MateriallionelnodejsNodejs Advanced
  • ❓Khi nào tôi nên sử dụng getStaticPaths?
  • 😲Zod là gì? Hướng dẫn Validation với Zod (ok)
  • Import and export TS types and interfaces in Next.js app don't needed anymore (ok)
    • Không cần nhập và xuất các loại TS và giao diện trong ứng dụng Next.js nữa (ok)
  • 😍CRUD redux redux-saga (ok)
    • 🫢Tìm hiểu Saga, viết class AxiosService Phần 1 (ok)
    • 😀Tìm hiểu Saga, viết class AxiosService Phần 2 (ok)
    • 🥹Sử dụng tailwind viết lại giao diện (ok)
  • 😍CMS Wordpress (ok)
    • Headless WordPress Authentication with Native Cookies
      • Study Product purchmarket 😒
      • Headless WordPress Authentication with Native Cookies - A Next.js 14 app (using app router) (ok)
      • Headless WordPress Email Settings (ok)
  • next.config.js Full (ok)
  • 😲😍 Auth with clerk and NextAuth.js (ok)
    • Study step by step NextAuth.js
      • 😲Kiểu tiện ích ReturnType<Type> trong TypeScript là một tính năng mạnh mẽ (ok)
      • 😲Tại sao global có kiểu "typeof globalThis"
        • 😲Lấy ví dụ sử dụng globalThis (ok)
  • 😍GitHub GraphQL API documentation
  • 🫢Fragment trong GraphQL là gì?
  • Dự án viết bằng graphql tham khảo 😒
  • 😀NextjsBlogWithGraphQL (ok)
  • 😍Tailwind Admin Dashboard Template
  • 😍I Can use both /app and /pages, template smart (ok)
  • 😀How to Query Parameters in Next.js API GET Request | Next.js 14 | REST API (ok)
  • examples nextjs full (ok)
  • 🫢Phân cấp thành phần trong thư mục Layout, template, error, loading, not-found, page (ok)
  • 😍getStaticPaths && generateStaticParams
  • === START hoanguyenit.com ===
  • 😀Building a Simple CRUD API with Next.js 13 Full (ok)
  • [ERROR] "next start" does not work with "output: export". Use "npx serve@latest out".
  • 👉Example of using the generateStaticParams() in NextJs
  • Unhandled Runtime Error Error: Invalid src prop on `next/image`, hostname
  • How to Build a CRUD App with NextJS and Prisma + PostgreSQL
  • Make a simple Shopping Cart App using NextJS 13 + Redux
  • Check Login using Middleware with NextJS 13
  • Create a Middleware in NextJS 13
  • Create a example handling data fetching with SWR in NextJS
  • === END hoanguyenit.com ===
  • 😍generateStaticParams, các hằng số dynamicParams, dynamic, revalidate (ok)
  • 😍generateStaticParams, 3 cách tạo phân đoạn động Single, Multiple, Catch-all (ok)
  • 😄How to create-next-app using version 12 instead of latest version (ok)
  • 😍Phân biệt cách sử dụng useRouter, withRouter (ok)
  • Guid Create-a-postgres-database
  • 😍Chú ý: Chúng ta đặt lại alias "contentlayer/generated": ["./.contentlayer/generated"] (ok)
  • 🫢[ERROR] "post-1.mdx" failed with YAMLParseError: Unexpected scalar at node end at line 4, column 19
  • 🫱[ERROR] export default async function Page({ params }: { params: { slug: string[] } }) { ... }
  • 👉[ERROR] Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
  • dangerouslySetInnerHTML để in nội dung trong cơ sử dữ liệu sang dạng html front-end (ok)
  • 🫢pre-rendering,ssg-ssr, dựng hình trước,Sử dụng Static Generation so với Server-side Rendering
  • 😗Chú ý ta có thể tạo folder pages bên ngoài app vẫn hoạt động bình thường (ok)
  • dateFormat.toLocaleString('en-us' cực chất ...
  • Ví dụ đơn giản dùng contentlayer, ngôn ngữ mdx xây dựng 1 blog (ok)
  • 🫢Sử dụng contentlayer, ngôn ngữ mdx xây dựng 1 blog
  • 🫢Từ khóa use server, use client là gì
  • 🫱Hướng dẫn Next.js (Full Step)
    • 🫢Next.js 13 — Features, Changes and Improvements
    • 🥹getStaticProps, getServerSideProps không được sử dụng từ next 13 trở đi
    • 😍Cache dữ liệu theo axios và fetch
    • 🫱Phân cấp thành phần trong thư mục
  • 😍Kickstarting Your Next.js Journey: A Step-by-Step Guide for Beginners
  • 😍A Complete Beginner's Guide to Next.js
  • How to run Next Js application build (out) directory?
  • [BCRYPT] Một số loại mã hóa thường dùng MD5, SHA, Bcrypt (ok)
  • [BCRYPT] Mã hoá mật khẩu với Bcrypt
  • [JSONWEBTOKEN] JSON Web Token example (ok)
  • [JSONWEBTOKEN] JWT - Từ cơ bản đến chi tiết
  • Chuyển javascript to typescript (ok)
  • Create nextjs typescript (ok)
  • [ERROR] Sửa lỗi TypeError: Cannot read property 'details' of undefined (ok)
  • [ERROR] Cách khắc phục lỗi khi ấn vào link không tự động cập nhật dữ liệu (ok)
  • ========== Start Next.js Tutorial Youtube ========
  • Next.js Tutorial - Part 1 | Router for Beginners (ok)
  • Next.js Tutorial - Part 2 | Data Fetching with getInitialProps
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 1
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 2
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 3
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 4
  • Next.js Tutorial - Part 3 - TypeScript Migration getInitialProps 5
  • [SQLITE] Sử dụng sqlite migrations (ok)
  • Sqlite Viewer (ok)
  • Next.js Tutorial - Part 4 - API Routes using SQL Database
  • Next.js Tutorial - Part 5 - Material-ui Integration + _app and _document 1
  • Next.js Tutorial - Part 5 - Material-ui Integration + _app and _document 2 (ok)
  • Next.js Tutorial - Part 6 - Authentication for API Routes using JWT and bcrypt
  • Next.js Tutorial - Part 7 - Consume Authenticated APIs with cookies
  • Part 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths Tool sqlite table 1
  • Next.js Tutorial - Part 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths 2
  • 👎Cách phân trang khá độc lạ xem bài Part 8 bên dưới 👇
  • Next.js Tutorial - Part 8 - Static Site Generation getStaticProps and getStaticPaths currentPage 3
  • 😍😍 Resolution order, On the server, On the server with error, On the client (ok)
  • Next.js Tutorial - Part 9 - Data Fetching with getServerSideProps 1
  • Next.js Tutorial - Part 9 - Data Fetching with getServerSideProps 2
  • Next.js Tutorial - Part 10 | Environment Variables and Runtime Configuration (ok)
  • Sự liên quan giữa jwt & base64decode (ok)
  • 😗Next.js Tutorial Typescript, sqlite create, update Full (ok)
  • ========== Start Next.js Building a Car ============
  • 1. 1 Next.js Building a Car Trader App #1- Introduction and FAQ Page
  • 1.2 Next.js Building a Car Trader App #1- Introduction and FAQ Page (ok)
  • 2.0 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps
  • 2.1 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps
  • [ERROR] Warning: Prop className did not match. (not ok)
  • 2.2 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps
  • 2.3 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps (ok)
  • [SQLITE] Select by id sqlite, sqlite3 (ok)
  • [SQLITE] Select all by category sqlite, sqlite3 (ok)
  • 3.1 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.x Một ví dụ hoàn chỉnh về select Make create select Model (ok)
  • 3.2 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.3 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.4 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.5 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.6 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.7 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 3.8 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik
  • 4.1 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • 4.2 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • 4.3 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • Data fetching in ReactJS with useSWR (ok)
  • Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR
  • 5.1 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.x Giao diện thực hành search (ok)
  • 5.xx Thực hành search đã nhận diện được dữ liệu (ok)
  • 5.2 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.3 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.4 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.5 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.6 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.7 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.8 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.9 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.10 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • 5.x Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
  • Next.js Building a Car Trader App #6- Improved pagination with SWR + Car Cards with Material-UI
  • ========== End Next.js Building a Car ============
  • ========== End Next.js Tutorial Youtube ========
  • TypeScript Next.js example (ok)
  • next build && next export Static HTML Export (ok)
  • Cartshop xây dựng bằng nextjs, có tích hợp thanh toán phí 2%/giao dịch (ok)
  • -------------- Start Thực hiện một dự án sử dụng Dynamic import && fuse.js nextjs --------
  • 1. Thực hiện component Header.js
  • 2. Thực hiện Dynamic import (ok)
  • 3. Sử dụng fuse.js để thực hiện lọc chú ý cách sử dụng Fuse = (await import('fuse.js')).default (ok)
  • Cách sử dụng fuse.js có await và k hông có await (ok)
  • Dynamic Import (ok)
  • -------------- End Thực hiện một dự án sử dụng Dynamic import && fuse.js nextjs --------
  • ------------------ Start Thực thiện một dự án sử dụng fuse.js reactjs ------------------
  • 1. Chuẩn bị giao diện thực hành (ok)
  • 2. Thực hiện bộ lọc (ok)
  • 3. Hiển thị danh sách sau khi thực hiện bộ lọc (ok)
  • How to Add Search to a React App with Fuse.js
  • ------------------ End Thực thiện một dự án sử dụng fuse.js reactjs ------------------
Powered by GitBook
On this page
  • 1. globalThis là gì?
  • Ví dụ:

Was this helpful?

  1. 😍 Auth with clerk and NextAuth.js (ok)
  2. Study step by step NextAuth.js

Tại sao global có kiểu "typeof globalThis"

PreviousKiểu tiện ích ReturnType<Type> trong TypeScript là một tính năng mạnh mẽ (ok)NextLấy ví dụ sử dụng globalThis (ok)

Last updated 3 hours ago

Was this helpful?

Trong TypeScript, global có kiểu typeof globalThis để đảm bảo tính nhất quán và tương thích giữa các môi trường JavaScript khác nhau, như Node.js và trình duyệt.

1. globalThis là gì?

globalThis là một đối tượng toàn cục được giới thiệu trong ECMAScript 2020 (ES11) để cung cấp một cách nhất quán để truy cập vào global object, bất kể môi trường chạy là gì.

  • Trong trình duyệt: globalThis tương đương với window

  • Trong Node.js: globalThis tương đương với global

  • Trong Web Workers: globalThis tương đương với self

Ví dụ:

2. Tại sao global có kiểu typeof globalThis?

Trong TypeScript, global trong Node.js có kiểu typeof globalThis để phản ánh chính xác các thuộc tính của global object trong mọi môi trường.

3. Lợi ích của cách tiếp cận này

  • Nhất quán giữa các môi trường: Thay vì định nghĩa riêng global cho Node.js và window cho trình duyệt, TypeScript sử dụng globalThis, giúp code chạy linh hoạt hơn.

  • Tương thích tốt hơn với tiêu chuẩn ECMAScript: Giúp code TypeScript tuân theo ES2020 một cách chính xác.

  • Hỗ trợ IntelliSense tốt hơn: TypeScript có thể hiểu và cung cấp gợi ý cho các thuộc tính của global object dễ dàng hơn.

4. Ví dụ thực tế

Nếu bạn viết TypeScript cho cả trình duyệt và Node.js, việc sử dụng typeof globalThis đảm bảo bạn có thể truy cập đúng global object mà không cần kiểm tra môi trường:

Tóm lại

Khi TypeScript định nghĩa global là typeof globalThis, nó giúp mã nguồn:

  • Nhất quán giữa các môi trường (Node.js, trình duyệt, Web Workers).

  • Tận dụng tiêu chuẩn ES2020 (globalThis).

  • Tránh phải kiểm tra thủ công xem đang chạy trên trình duyệt hay Node.js.

Nếu bạn cần code chạy trên cả hai môi trường, hãy sử dụng globalThis thay vì window hoặc global riêng lẻ. 🚀

😲
😲