淺析Laravel中怎么用Typescript-環球信息

          來源:php中文網 | 2022-12-27 20:51:22 |

          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 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 聲明,并使它們與你的遷移保持同步。

          更多編程相關知識,請訪問:編程視頻!!

          以上就是淺析Laravel中怎么用Typescript的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: Laravel Typescript

          亚洲AV无码专区在线播放中文| 日本系列1页亚洲系列| 国产一区二区三区亚洲综合| 亚洲第一网站免费视频| 亚洲av综合av一区| 亚洲精品无码高潮喷水在线| 国产午夜亚洲精品理论片不卡| 亚洲色偷偷狠狠综合网| 亚洲AV无码乱码在线观看裸奔| 亚洲色中文字幕无码AV| 中文字幕中韩乱码亚洲大片| 国产亚洲大尺度无码无码专线 | 久久久久亚洲爆乳少妇无| 亚洲色偷偷狠狠综合网| 国产亚洲成人在线播放va| 青青草原亚洲视频| 久久久久亚洲AV综合波多野结衣| 亚洲综合AV在线在线播放| 国产精品亚洲片在线| 亚洲国产人成网站在线电影动漫| 亚洲综合自拍成人| 亚洲欧洲国产综合| 在线aⅴ亚洲中文字幕| 亚洲欧美日韩中文高清www777| 亚洲sm另类一区二区三区| 在线观看亚洲电影| 久久亚洲国产成人精品无码区| 亚洲熟妇中文字幕五十中出| 久久亚洲精品无码| 亚洲第一成年人网站| 亚洲精品美女网站| 无码一区二区三区亚洲人妻 | 亚洲美女视频一区二区三区| 亚洲乱码中文字幕小综合| 亚洲色欲色欱wwW在线| 色欲aⅴ亚洲情无码AV| 久久国产成人精品国产成人亚洲| 亚洲国产精彩中文乱码AV| 久久亚洲AV无码精品色午夜麻豆| 亚洲香蕉久久一区二区| 国产亚洲欧美日韩亚洲中文色|