浅析laravel中怎么用typescript-ag真人官方网

越来越多的 phper，更具体地说，laravel 开发人员已经开始编写更强类型的代码，而全栈开发人员往往不会将相同的实践应用于他们的前端代码。其中，typescript 被认为是编写前端组件的一种「不同」方式。【相关推荐：laravel视频教程】

大多数对 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"部分附加到组件脚本部分。

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

示例用法

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

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

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

resources/js/types.d.js

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

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

let user = { id: 1, name: "taylor otwell" }function getuser(): user {    ...}

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

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

更多编程相关知识，请访问：编程视频！！

以上就是浅析laravel中怎么用typescript的详细内容，更多请关注php中文网其它相关文章！

关键词：