Une brève analyse de la façon d'utiliser Typescript dans Laravel

Comment utiliser Typescript dans Laravel ? L'article suivant vous présentera comment utiliser Typescript dans Laravel. J'espère qu'il vous sera utile !

De plus en plus de développeurs PHP et, plus particulièrement, Laravel ont commencé à écrire du code plus fortement typé, tandis que les développeurs full-stack ont ​​tendance à ne pas appliquer les mêmes pratiques à leur code front-end. Parmi eux, TypeScript est considéré comme une manière « différente » d’écrire des composants frontaux. [Recommandations associées : Tutoriel vidéo laravel]

La plupart des malentendus à propos de TypeScript sont qu'il est trop complexe pour les développeurs back-end et ne fera qu'augmenter la taille du code sans fournir aucune valeur supplémentaire.

En fait, TypeScript ne vous oblige pas à déclarer des types. Voici la partie importante : TypeScript est un sur-ensemble de JavaScript qui vous permet d'ajouter des éléments par-dessus, mais tout JS valide est également un TS valide.

L'impact pratique de ceci est que vous pouvez renommer le fichier de .js en .ts et ajouter progressivement des types ou commencer à utiliser des types dans le nouveau fichier. Votre base de code n'a pas besoin d'avoir une couverture de type à 100 %. Vous pouvez utiliser TypeScript selon votre choix. .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: &#39;Taylor Otwell&#39; }

function getUser(): User {
    ...
}

因此，当你访问 user

Pourquoi utiliser TypeScript

TypeScript fournit un typage statique facultatif, qui vous permet de créer et de vérifier votre code pendant la phase de compilation. Il apporte également une prise en charge de l'auto-complétion et de la validation de l'IDE ainsi que des capacités de navigation dans le code. En bref, TypeScript améliore la lisibilité du code et améliore le processus de débogage.

Ajouter la prise en charge de TypeScript à votre projet Laravel est simple, ne prend que quelques minutes, mais peut améliorer votre expérience front-end. Passons en revue le processus en réinstallant Laravel Breeze avec Vue 3.

1. Installer les dépendances

Commençons par installer le compilateur TypeScript et le chargeur Webpack correspondant.

rrreee

2. Configurer la configuration TypeScript

Le compilateur TypeScript nécessite un fichier de configuration contenant les options requises. Une saisie semi-automatique appropriée de l’IDE ​​est également souhaitable.

🎜tsconfig.json🎜🎜rrreee

🎜3. Configuration de Laravel Mix🎜

🎜L'installation initiale de Laravel est livrée avec un exemple d'entrée JavaScript qui doit être converti en TypeScript. Tout ce que vous avez à faire est de renommer .js en .ts. 🎜rrreee🎜Ensuite, faites savoir à Mix qu'il doit gérer le code JavaScript en tant que TypeScript. Laravel Mix est livré avec la prise en charge intégrée de TypeScript. 🎜🎜🎜webpack.mix.js🎜🎜rrreee🎜Vous devez également indiquer au compilateur et à l'IDE que le code du composant doit être traité comme TypeScript. Ajoutez la section lang="ts" à la section de script du composant. 🎜rrreee🎜Vous êtes tous prêts ! Vous pouvez continuer à coder comme avant, profiter de certaines fonctionnalités de TypeScript et améliorer votre expérience front-end. 🎜

🎜Exemple d'utilisation🎜

🎜TypeScript vous permet de taper des variables et des méthodes en utilisant des types simples et des constructions complexes. Puisque nous nous concentrons principalement sur l'interaction avec le backend, regardons un exemple d'interaction avec le modèle. 🎜🎜Créons un fichier contenant toutes les déclarations de type nécessaires - resources/js/types.d.ts. 🎜🎜Supposons que vous ayez un utilisateur modèle avec lequel vous pouvez interagir depuis le frontend. Il s'agit d'une représentation TypeScript de base du modèle utilisateur par défaut. Il décrit les propriétés qu'un objet peut avoir et le type de ces propriétés. 🎜🎜🎜resources/js/types.d.js🎜🎜rrreee🎜Vous pouvez désormais utiliser cette interface lors de l'attribution de variables ou du renvoi de valeurs à partir de méthodes. 🎜rrreee🎜Ainsi, lorsque vous accédez à la variable user, votre IDE vous proposera les propriétés de l'objet correspondantes. Il vous permet également de savoir lorsqu'une erreur de type se produit avant de compiler votre code. 🎜🎜Écrire des interfaces pour tous les modèles et les maintenir synchronisés avec le code backend nécessite du temps supplémentaire. Vous voudrez peut-être envisager d'utiliser l'extension 🎜laravel-typescript🎜, qui vous permet de convertir des modèles Laravel en déclarations TypeScript et de les synchroniser avec vos migrations. 🎜🎜🎜Adresse originale : https://laravel-news.com/typescript-laravel🎜🎜Adresse traduite : https://learnku.com/laravel/t/67586🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!