在 Laravel 中使用 Typescript

Laravel

越来越多的 PHPer,更具体地说,Laravel 开发人员已经开始编写更强类型的代码,而全栈开发人员往往不会将相同的实践应用于他们的前端代码。其中,TypeScript 被认为是编写前端组件的一种「不同」方式。

大多数对 TypeScript 的误解,就是认为它对后端开发人员来说太复杂了,而且只会膨胀代码规模,而没有提供任何额外的价值。

实际上,TypeScript 并不强制你声明类型。这是重要的部分:TypeScript 是一个 JavaScript 超集,可以让你在上面添加东西,但是任何有效的 JS 也是有效的 TS

这样做的实际影响是,你可以将文件从 .js 重命名为 .ts,并逐渐添加类型或开始在新文件中使用类型。你的代码库不必达到 100% 的类型覆盖率。你可以根据自己的选择使用 TypeScript。

为什么使用 TypeScript

TypeScript 提供了可选的静态类型,它允许你在编译阶段构建和验证你的代码。它还带来了 IDE 自动完成和验证支持以及代码导航功能。简而言之,TypeScript 增强了代码的可读性并改进了调试过程。

为你的 Laravel 项目添加 TypeScript 支持非常简单,只需几分钟,但可以提升你的前端体验。让我们用 Vue 3 重新安装 Laravel Breeze 来回顾一下这个过程。

1. 安装依赖

让我们从安装 TypeScript 编译器和相应的 Webpack 加载器开始。

npm install ts-loader typescript --save-dev
# 或者
yarn add ts-loader typescript -D

2. 设置 TypeScript 配置

TypeScript 编译器需要一个包含所需选项的配置文件。适当的 IDE 自动完成也是可取的。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,                 // Enable strict type-checking options
    "skipLibCheck": true,           // Skip type checking of declaration files
    "noImplicitAny": false          // Bypass raising errors on `any` type
  },
  "include": ["resources/js/**/*"]  // 前端路径模式
}

3. 配置 Laravel Mix

初始 Laravel 安装带有一个 JavaScript 入口示例,需要将其转换为 TypeScript。您只需将 .js 重命名为 .ts

-resources/js/app.js
+resources/js/app.ts

然后,让 Mix 知道它应该将 JavaScript 代码作为 TypeScript 处理。 Laravel Mix 带有内置的 TypeScript 支持。

webpack.mix.js

-mix.js('resources/js/app.js', 'public/js')
+mix.ts('resources/js/app.ts', 'public/js')

你还需要告诉编译器和 IDE,组件的代码必须被视为 TypeScript。将 lang="ts" 部分附加到组件脚本部分。

<script lang="ts">
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    ...
});
</script>

你都准备好了吧!你可以继续按照以前的方式编写代码,并利用一些 TypeScript 功能并改善你的前端体验。

示例用法

TypeScript 允许你使用简单类型和复杂结构来类型提示变量和方法。由于我们主要关注与后端交互,让我们看一下与模型交互的示例。

让我们创建一个包含所有必要类型声明的文件 —— resources/js/types.d.ts

假设你有一个模型用户,你可以从前端与之交互。这是默认用户模型的基本 TypeScript 表示。它描述了一个对象可以具有哪些属性以及这些属性应该是什么类型。

resources/js/types.d.js

declare interface User {
    id: number;
    name: string;
    email: string;
}

现在,你可以在分配变量或从方法返回值时使用此接口。

let user = <User>{ id: 1, name: 'Taylor Otwell' }

function getUser(): User {
    ...
}

因此,当你访问 user 变量时,你的 IDE 会建议相应的对象属性。它还会在你编译代码之前让你知道何时出现类型错误。

为所有模型编写接口并使其与后端代码保持同步需要额外的时间。你可能需要考虑使用 laravel-typescript 扩展,它可以让你将 Laravel 模型转换为 TypeScript 声明,并使它们与你的迁移保持同步。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://laravel-news.com/typescript-lara...

译文地址:https://learnku.com/laravel/t/67586

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 1

laravel9.2 vite 下 如何 typesctipt 如何配置?

2周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!