在Laravel框架中使用Typescript

Laravel  /  管理员 发布于 2年前   671

越来越多的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
# or
yarn add ts-loader typescript -D

2. 设置 TypeScript 配置

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

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,                 //启用严格的类型检查选项
    "skipLibCheck": true,           //跳过声明文件的类型检查
    "noImplicitAny": false          //绕过在“任何”类型上引发错误
  },
  "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>
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包:

https://www.zongscan.com/demo333/95841.html

它可以让您将 Laravel 模型转换为 TypeScript 声明，并使它们与您的迁移保持同步。

转：

https://laravel-news.com/typescript-laravel