6、TypeScript 交互

到目前为止，我们建造的“个人名片”页面已经非常漂亮了。但它是一个“静态模型”，像一个精致的建筑沙盘，你只能看，不能互动。

今天，我们就来为这个模型注入“灵魂”，学习如何让它响应用户的操作。

NextJS 中 JS 其实就是 JavaScript，随着时代的发展，人们优化了 JavaScript（JS） 的语法，让他更加适合大型项目，也就是我们现在用的 TypeScript（TS）。

为了做出更加复杂的功能，所以我们也要去了解一下，这一门相对复杂的语言，但是做作为这门 AI 编程课程来说，我们不需要去过度去学习这门语言，只要知道它的大致的功能就可以了。因为 TypeScript 无法用几篇文档讲清楚，所以大家遇到有不懂的问题的时候，建议问下 AI 可以了。

1、交互的“开关”：认识 'use client'

在 Next.js 的世界里，组件分为两种：服务端组件 (Server Components) 和 客户端组件 (Client Components)。

• 服务端组件：默认情况下，我们创建的所有组件都是服务端组件。它们在服务器上被渲染成 HTML，然后发送给浏览器。这让初始加载速度非常快，非常适合展示静态内容。但它们无法响应用户的交互（比如点击）。
• 客户端组件：这些组件会在用户的浏览器里被“激活”，它们可以使用 JavaScript 来处理用户的点击、输入等操作，并管理自己的“状态”。

如何把一个组件变成客户端组件？ 非常简单，只需要在文件的最顶部，加上一行代码：'use client';。

2、组件的“记忆”：使用 useState

要让组件能够交互，它必须拥有“记忆”的能力。比如，一个计数器组件，必须能“记住”当前的数字是多少。

在 React 中，我们使用一种叫做 “状态 (State)” 的东西来赋予组件记忆。而 useState 就是我们用来添加状态的“魔法工具”，它是一个 Hook (钩子，React 提供的特殊函数)。

它的用法是这样的： const [count, setCount] = useState(0);

• useState(0)：我们调用 useState，并告诉它，这个状态的初始值是 0。
• count：这是我们的“状态变量”，它保存着当前的值（也就是 0）。我们可以在 JSX 中直接使用它来显示数字。
• setCount：这是一个更新函数。我们不能直接修改 count，而是必须调用 setCount(newValue) 来更新它。当这个函数被调用时，React 会自动重新渲染组件，把最新的 count 值显示在屏幕上。

3、聆听用户的声音

现在组件有了记忆，我们还需要一种方式来让用户的操作去改变这个记忆。这就是事件处理 (Event Handling)。

最常用的事件就是 onClick。我们可以把它加在任何元素上，比如一个按钮： <Button onClick={handleClick}>点我</Button>

• onClick={handleClick}：我们告诉这个按钮，当用户点击它时，就去执行一个叫做 handleClick 的函数。
• handleClick 函数里，我们就可以调用 setCount 来更新状态，从而改变页面显示。

4、实战：添加一个可交互的“复制链接”功能

理论讲完了，我们来给“个人名片”添加一个实用的交互功