typescript:第二章_变量声明

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

后一修订版		 前一修订版
typescript:第二章_变量声明 [2026/03/09 15:22] – 创建 张叶安typescript:第二章_变量声明 [2026/06/08 10:53] (当前版本) – [2.5.3 函数参数解构] 张叶安
行 289: 行 289:
  
 ==== 2.5.2 对象解构 ==== ==== 2.5.2 对象解构 ====
 +
 +对象解构的意思就是从等式右边取出变量的值并供后续使用。
 +
  
 <code> <code>
行 298: 行 301:
 }; };
  
-const { name, age, email } = user;+const { name, age, email } = user;//从user中取出参数供后面使用
 console.log(name);  // "Alice" console.log(name);  // "Alice"
  
 // 重命名 // 重命名
-const { name: userName, age: userAge } = user;+const { name: userName, age: userAge } = user; 从user中取出参数并重命名供后面使用
 console.log(userName);  // "Alice" console.log(userName);  // "Alice"
  
行 326: 行 329:
 console.log(rest);  // { age: 25, email: "alice@example.com" } console.log(rest);  // { age: 25, email: "alice@example.com" }
 </code> </code>
 +
  
 ==== 2.5.3 函数参数解构 ==== ==== 2.5.3 函数参数解构 ====
 +=== 1. 基本概念 ===
 +函数参数解构指的是：函数接收一个对象或数组作为参数时，直接在参数列表中把需要的值取出来。
  
-<code> +普通写法通常是先接收整个对象，再从对象中取属性：
-// 对象参数解构 +
-function greetUser({ name, age }: { name: string; age: number }): string { +
-  return `Hello ${name}, you are ${age} years old`; +
-}+
  
-// 带默认值 +<code typescript> 
-function createUser({  +type Props = Readonly<{ children: React.ReactNode }>;
-  name,  +
-  age = 18,  +
-  role = "user"  +
-}: {  +
-  name: string;  +
-  age?: number;  +
-  role?: string; +
-}) { +
-  return { name, age, role }; +
-}+
  
-// 数组参数解构 +export default function AppGroupLayout(props: Props) { 
-function processCoordinates([x, y]: [number, number]): string { +  const children = props.children; 
-  return `X: ${x}, Y: ${y}`;+  return <AppLayout>{children}</AppLayout>;
 } }
 +</code>
  
-// 嵌套解构 +使用函数参数解构后，可以在参数位置直接取出 ''children''： 
-function processUser({  + 
-  name,  +<code typescript> 
-  address: { city, country }  +export default function AppGroupLayout( 
-}: {  +  { children }: Readonly<{ children: React.ReactNode }> 
-  name: string;  +) { 
-  address: { city: string; country: string }; +  return <AppLayout>{children}</AppLayout>;
-}) { +
-  return `${name} lives in ${city}, ${country}`;+
 } }
 </code> </code>
  
 +这里的含义是：
 +
 +  * 函数接收一个对象参数。
 +  * 这个对象里有一个 ''children'' 属性。
 +  * ''{ children }'' 表示从参数对象中取出 ''children''。
 +  * '': Readonly<{ children: React.ReactNode }>'' 表示给整个参数对象添加 TypeScript 类型。
 +  * 函数体里可以直接使用 ''children''，不需要再写 ''props.children''。
 ==== 2.5.4 解构与类型注解 ==== ==== 2.5.4 解构与类型注解 ====
  
Detach Close

该主题尚不存在

您访问的页面并不存在。如果允许，您可以使用创建该页面按钮来创建它。

  • typescript/第二章_变量声明.1773040960.txt.gz
  • 最后更改: 2026/03/09 15:22
  • 由 张叶安