laravel中怎么用typescript？下面本篇文章给大家介绍一下在laravel中使用typescript的方法，希望对大家有所帮助！
越来越多的 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" 部分附加到组件脚本部分。
import { defineComponent } from "@vue/runtime-core";export default defineComponent({ ...});
你都准备好了吧！你可以继续按照以前的方式编写代码，并利用一些 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 声明，并使它们与你的迁移保持同步。
原文地址：https://laravel-news.com/typescript-laravel译文地址：https://learnku.com/laravel/t/67586
更多编程相关知识，请访问：编程视频！！
以上就是浅析Laravel中怎么用Typescript的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/66273.html
微信扫一扫 
支付宝扫一扫 
