AI辅助Web开发技巧

皮卡丘的好朋友
126 阅读4分钟

我们将研究如何利用最新的机器学习（ML）和人工智能（AI）工具，如CoPilot和ChatGPT，以减少编程所需的击键次数，并为我们的应用程序创建更强大和可靠的代码基础。

通过将这些先进的技术纳入我们的开发过程，我们可以简化我们的工作流程，最大限度地减少错误的风险，并创建更智能、更适应的软件。

这篇文章将探讨AI和ML在前端开发中的应用，使用TypeScript作为主要语言。而方法也可能从非AI辅助开发中适用。

让我们从以下几点开始

首先定义类型

通过先期定义类型，我们可以：

  • 让AI工具更容易理解代码库的结构和要求

  • 定义类型还可以导致生成更全面和有效的测试案例。

例如，下面是生成的带类型和不带类型的代码：

// No User type defined
function updatePaymentInfo(user: {[key: string]: any}, paymentInfo: {[key: string]: any}) {
  for (const key in paymentInfo) {
    user[key] = paymentInfo[key];
  }
}

const user = {
  name: 'John Smith',
  paymentNumber: '123456',
  cardExpiry: '01/2022'
};

const paymentInfo = {
  paymentNumber: '654321',
  cardExpiry: '05/2022'
};

updatePaymentInfo(user, paymentInfo);
console.log(user);

进入全屏模式 退出全屏模式

如果不定义User 类型，如上图所示，AI会尝试猜测用户对象中的内容。反之：

type User = {
  id: number;
  username: string;
  paymentInfo: string;
};

function updatePaymentInfo(user: User, newPaymentInfo: string): void {
  user.paymentInfo = newPaymentInfo;
}

updatePaymentInfo({ id: 1, username: 'johnsmith', paymentInfo: 'abc123' }, 'def456');

进入全屏模式 退出全屏模式

正如你所看到的，通过定义User 类型，我们可以清楚地指定传递给updatePaymentInfo 函数的用户对象的结构，这样 AI 就不必猜测数据类型，当你以后需要参考数据类型时，就会变得更容易。

此外，它可以节省大量的精力来告诉AI如何实现这个函数。通过定义类型，我们可以简单地告诉人工智能："给我写一个函数来更新用户的paymentInfo"。而不是做：

"给我写一个函数来更新用户的支付信息"
[AI生成了一个有错误字段的函数]
"给我写一个函数来更新用户的支付信息，用户对象包含...，支付信息是一个字符串。"
[AI生成了一个缺少...的函数]

总之，让AI理解你的想法要比你的同事困难得多，所以只要在你的请求上更具体一些，将非常有助于得到正确的结果。

每个功能的简单过程

这一点应该是非常明显的，因为这也是编程的一般规则。但是我们应该在这里多花点功夫，让任务变得简单，让AI能够理解这个任务。

下面是一些使任务对人工智能简单化的提示：

  • 将任务分解成更小、更容易管理的块状。

  • 使用清晰、简明的命名规则：为变量、函数和其他代码元素选择描述性和有意义的名称。有很长的名字也是可以的，尤其是你不是那个输入它的人。

  • 记录你的代码：在你的代码中添加注释和文档，可以帮助你的代码更加清晰和易懂--不仅对人工智能，而且对你和你的队友也是如此

这些提示将使AI更容易理解每个元素的目的，以及它是如何融入整个任务的。再次，节省你纠正代码的时间。

首先实施实用程序

与类型类似，有一个定义好的、实施好的(Can be done by AI as well)函数也可以帮助AI理解什么以及如何生成代码来修改数据。

按步骤黏贴你的代码

对于每一个实现来说，有了你定义好的类型和实用程序，你应该能够简单地要求AI在步骤中实现你的业务逻辑，可以生成代码，比如：

"写一个paymentHandler，它将："
"从支付请求中获取用户"
"从支付请求中获取支付金额"
"..."

function async paymentHandler(req:PaymentRequest, res:PaymentResponse){
  try {
    const user: User = getUserIdFromPaymentRequest(req);
    const paymentAmount = getPaymentAmountFromPaymentRequest(req);
    const shippingMethod = getShippingMethodFromPaymentRequest(req);
    const transactionId  = await processPayment(user, paymentAmount);
    const shippingId = await processShipping(transactionId);

    res.send(confirmationMessage(transactionId, shippingId));
  }catch(e){
    res.send(generateErrorMessage(e))
  }

进入全屏模式 退出全屏模式

这样一来，不仅人工智能容易生成代码，而且也使人类的调试难度降低。

要求人工智能审查代码

就像我们人类所做的那样，你也应该要求你的人工智能工具在发送给人类审查之前审查代码，因为它可以及早发现明显的问题，这样你就可以减少与你的队友之间的交锋。

总结

总之，在软件开发中使用人工智能可以极大地提高我们代码库的效率和可靠性。作为开发者，我们应该迅速了解和适应现有的新工具，用适合解决方案的做法来提高我们的生产力。

希望这些提示可以帮助你少走弯路，取得更大的成就

avatar
文章
阅读
粉丝