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” 部分附加到組件腳本部分。
<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>
因此，當你訪問 user 變量時，你的 IDE 會建議相應的對象屬性。它還會在你編譯代碼之前讓你知道何時出現類型錯誤。
為所有模型編寫接口并使其與后端代碼保持同步需要額外的時間。你可能需要考慮使用 laravel視頻教程 擴展，它可以讓你將 Laravel 模型轉換為 TypeScript 聲明，并使它們與你的遷移保持同步。
原文地址：https://laravel-news.com/typescript-laravel譯文地址：https://learnku.com/laravel/t/67586
更多編程相關知識，請訪問：laravel視頻教程！！
