Import and export TS types and interfaces in Next.js app don't needed anymore (ok)

https://github.com/vercel/next.js/discussions/50684

Trả lời:

Đây là một tính năng TypeScript ít người biết đến . Nếu một tệp không có lệnh import/export thì tệp đó không phải là mô-đun, do đó nó trở thành toàn cục.

Đây là một tính năng TypeScript ít người biết đến . Nếu một tệp không có lệnh import/export thì tệp đó không phải là mô-đun, do đó nó trở thành toàn cục.

Ví dụ:

// import type {GetServerSideProps} from 'next'

interface Foo {
  bar(): void;
}

type Baz = {
  fizz(): void;
};

Miễn là dòng trên cùng được chú thích, Foo và Baz sẽ hiển thị từ các tệp khác. Ngay khi bạn bỏ chú thích, đây sẽ trở thành một mô-đun và cả Foo và Baz đều trở thành các phiên bản riêng tư của mô-đun. Tương tự như vậy, ngay khi tệp này thực hiện export, nó cũng trở thành một mô-đun.

Kiểu phụ thuộc vào các kiểu toàn cục hoặc có sẵn một cách kỳ diệu này là phản mẫu, sẽ gây ra nhiều hỗn loạn cho cơ sở mã của bạn. Hãy tránh nó.

Bản tóm tắt

Xin chào! Tôi học Next.js và tạo một ứng dụng dựa trên Next.js và TypeScript. Tôi không thêm import và export vào giao diện và kiểu TS của mình, được lưu trữ trong một thư mục khác và nó hoạt động! Tôi có thể không sử dụng import cho giao diện và kiểu TS không? (Nhưng nếu tôi thêm export vào giao diện của mình, lỗi sẽ xuất hiện trong tệp, nơi tôi sử dụng giao diện này)

Nếu tôi có đoạn mã này trong tệp types.ts:

interface IAboutIdProps {
  params: {
    id: string;
  };
}

và mã này trong tệp page.tsx của tôi:

import { shops } from "@/app/constants/constants";

export default function AboutId({ params: { id } }: IAboutIdProps) {
  const shopInfo = shops.find((shopInfo) => shopInfo.id === id);
  return (
    <h3>
      Something about {shopInfo?.name || "This shop does not exist in DB"}
    </h3>
  );
}

Nó sẽ hoạt động. Nhưng khi tôi làm theo cách này:

export interface IAboutIdProps {
  params: {
    id: string;
  };
}

tệp trang của tôi sẽ gặp sự cố 'Không tìm thấy tên 'IAboutIdProps''

Bạn có thể giải thích cho tôi tại sao nó lại hoạt động như vậy không?