i18n(zh-cn): Update typescript.mdx (#11125)

src/content/docs/zh-cn/guides/typescript.mdx

@@ -10,13 +10,13 @@ Astro 内置了对 [TypeScript](https://www.typescriptlang.org/) 的支持。你
 
 使用 TypeScript，你可以通过约束代码中对象和组件的类型来防止运行时的错误。例如，如果你使用了 TypeScript 来[定义组件参数](#组件参数)；而如果你在使用时不小心传入了一个与之不匹配的参数，编辑器将会报错。
 
-你无需在 Astro 项目中编写 TypeScript 代码也可从中受益。Astro 始终将你的组件代码视为 TypeScript，并且 [Astro 的 VSCode 扩展](/zh-cn/editor-setup/) 将尝试尽可能多地推断，以便在编辑器中提供自动完成、提示和错误。
+你无需在 Astro 项目中编写 TypeScript 代码也可从中受益。Astro 始终将你的组件代码视为 TypeScript，并且 [Astro 的 VS Code 扩展](/zh-cn/editor-setup/) 将尝试尽可能多地推断，以便在编辑器中提供自动完成、提示和错误。
 
 Astro 的开发服务器不会进行任何类型检查，但你可以编辑 [`package.json` 中的 `scripts` 属性](#类型检验)来通过命令行工具检查代码中的类型错误。
 
 ## 设置
 
-Astro 入门项目在你的项目中包含一个名为 `tsconfig.json` 的文件。即使你不编写 TypeScript 代码，这个文件也很重要；通过这个文件，可以让 Astro 和 VSCode 等工具知道应当如何理解你的项目。如果没有 `tsconfig.json` 文件，编辑器将不能对某些功能提供完整支持（比如 npm 包导入）。如果你手动安装的 Astro，请务必自己创建此文件。
+Astro 入门项目在你的项目中包含一个名为 `tsconfig.json` 的文件。即使你不编写 TypeScript 代码，这个文件也很重要；通过这个文件，可以让 Astro 和 VS Code 等工具知道应当如何理解你的项目。如果没有 `tsconfig.json` 文件，编辑器将不能对某些功能提供完整支持（比如 npm 包导入）。如果你手动安装的 Astro，请务必自己创建此文件。
 
 ### TSConfig 模板
 
@@ -46,14 +46,17 @@ Astro 中包含三个可扩展的 `tsconfig.json` 模板：`base`、`strict` 和
 // 自定义类型声明
 declare var myString: string;
 
-// Astro 类型，如果你已经有 tsconfig.json，则不需要
+// Astro 类型，如果你已经有 `tsconfig.json`，则不需要
 /// <reference path="../.astro/types.d.ts" />
 ```
 
 ### TypeScript 编辑器插件
 
-当你不使用[官方 Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)时，可以单独安装 [Astro TypeScript 插件](https://www.npmjs.com/package/@astrojs/ts-plugin)。该插件由 VSCode 扩展自动安装和配置，你无需同时安装两者。
-该插件仅在编辑器中运行。在终端中运行 `tsc` 时，`.astro` 文件将被完全忽略。相反，你可以使用 [CLI 命令的 `astro check`](/zh-cn/reference/cli-reference/#astro-check) 来检查 `.astro` 和 `.ts` 文件。该插件还支持从 `.ts` 文件导入 `.astro` 文件（这对于重新导出很有用）。
+当你不使用[官方 Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)时，可以单独安装 [Astro TypeScript 插件](https://www.npmjs.com/package/@astrojs/ts-plugin)。该插件由 VS Code 扩展自动安装和配置，你无需同时安装两者。
+
+该插件仅在编辑器中运行。在终端中运行 `tsc` 时，`.astro` 文件将被完全忽略。相反，你可以使用 [CLI 命令的 `astro check`](/zh-cn/reference/cli-reference/#astro-check) 来检查 `.astro` 和 `.ts` 文件。
+
+该插件还支持从 `.ts` 文件导入 `.astro` 文件（这对于重新导出很有用）。
 
 <PackageManagerTabs>
   <Fragment slot="npm">
@@ -76,13 +79,15 @@ declare var myString: string;
 然后，将下面内容添加到你的 `tsconfig.json`:
 
 ```json title="tsconfig.json"
+{
   "compilerOptions": {
     "plugins": [
       {
         "name": "@astrojs/ts-plugin"
       },
     ],
   }
+}
 ```
 
 要检查插件是否正常工作，创建一个 `.ts` 文件，并在里面导入一个 Astro 组件。你的编辑器应该没有警告消息。
@@ -105,11 +110,11 @@ import type { SomeType } from './script';
 你可以在 `tsconfig.json` 文件配置 TypeScript 强制执行类型导入。设置 [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) 为 `true`。TypeScript 会检查你的导入并告诉你什么时候应该使用 `import type`。这个设置在我们所有的预设里都是默认启用的。
 
 ```json title="tsconfig.json" ins={3}
-  {
-    "compilerOptions": {
-      "verbatimModuleSyntax": true
-    }
+{
+  "compilerOptions": {
+    "verbatimModuleSyntax": true
   }
+}
 ```
 
 ## 导入别名
@@ -158,14 +163,15 @@ interface Window {
 
 ## 组件参数
 
-Astro 支持通过 TypeScript 来定义你的组件参数。为了启动它，你需要将一个名为 `Props` 的 TypeScript 接口添加到你的的组件。你可以（可选的）使用 `export` 语句将其导出，但这不是强制的。[Astro VSCode 扩展](/zh-cn/editor-setup/)会自动寻找 `Props` 接口，并且当你在其他模板内使用该组件时，给你提供适当的 TS 支持。
+Astro 支持通过 TypeScript 来定义你的组件参数。为了启动它，你需要将一个名为 `Props` 的 TypeScript 接口添加到你的的组件。你可以（可选的）使用 `export` 语句将其导出，但这不是强制的。[Astro VS Code 扩展](/zh-cn/editor-setup/)会自动寻找 `Props` 接口，并且当你在其他模板内使用该组件时，给你提供适当的 TS 支持。
 
 ```astro title="src/components/HelloProps.astro" ins={2-5}
 ---
 interface Props {
   name: string;
   greeting?: string;
 }
+
 const { greeting = 'Hello', name } = Astro.props;
 ---
 <h2>{greeting}, {name}!</h2>
@@ -174,7 +180,6 @@ const { greeting = 'Hello', name } = Astro.props;
 ### 常见的 Props 类型的套路
 
 - 如果你的组件没有任何的参数或插槽，你可以使用 `type Props = Record<string, never>`。
-
 - 如果你的组件必须将一个子组件传递给默认插槽，你可以使用 `type Props = { children: any; };`。
 
 ## 类型工具包
@@ -192,12 +197,15 @@ Astro 提供 `HTMLAttributes` 类型，以检查你的类型是否使用有效
 ```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
 ---
 import { HTMLAttributes } from 'astro/types';
+
 // 使用 `type`
 type Props = HTMLAttributes<'a'>;
+
 // 或者通过 `interface` 继承
 interface Props extends HTMLAttributes<'a'> {
   myProp?: boolean;
 }
+
 const { href, ...attrs } = Astro.props;
 ---
 <a href={href} {...attrs}>
@@ -207,8 +215,7 @@ const { href, ...attrs } = Astro.props;
 
 也可以通过在 `.d.ts` 文件中重新声明命名空间 `astroHTML.JSX`，来为默认的 JSX 定义扩展非标准属性。
 
-```ts
-// src/custom-attributes.d.ts
+```ts title="src/custom-attributes.d.ts"
 declare namespace astroHTML.JSX {
   interface HTMLAttributes {
     'data-count'?: number;
@@ -243,7 +250,6 @@ type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
 ```astro title="src/pages/index.astro"
 ---
 import type { ComponentProps } from 'astro/types';
-
 import Button from "./Button.astro";
 
 type ButtonProps = ComponentProps<typeof Button>;
@@ -266,7 +272,6 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
 
 const { as: Tag, ...props } = Astro.props;
 ---
-
 <Tag {...props} />
 ```
 
@@ -297,20 +302,23 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { id } = Astro.params as Params;
 //                   ^? { id: string; }
+
 const { title } = Astro.props;
 //                      ^? { draft: boolean; title: string; }
 ---
 ```
 
 ## 类型检验
 
-要在编辑器中查看类型错误，请确保已安装 [Astro VSCode 扩展](/zh-cn/editor-setup/)。请注意，`astro start` 和 `astro build` 命令将使用 esbuild 转译代码，但不会运行任何类型检查。为了防止你的代码在包含 TypeScript 错误的情况下被构建，请将你 `package.json` 中的 `build` 脚本更改为以下内容：
+要在编辑器中查看类型错误，请确保已安装 [Astro VS Code 扩展](/zh-cn/editor-setup/)。请注意，`astro start` 和 `astro build` 命令将使用 esbuild 转译代码，但不会运行任何类型检查。为了防止你的代码在包含 TypeScript 错误的情况下被构建，请将你 `package.json` 中的 `build` 脚本更改为以下内容：
 
-```json title="package.json" del={2} ins={3} ins="astro check &&"
+```json title="package.json" del={3} ins={4} ins="astro check &&"
+{
   "scripts": {
     "build": "astro build",
     "build": "astro check && astro build",
   },
+}
 ```
 
 :::note