Laravel에서 Typescript를 사용하는 방법에 대한 간략한 분석

Laravel에서 Typescript를 어떻게 사용하나요? 다음 글에서는 Laravel에서 Typescript를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

점점 더 많은 PHP, 특히 Laravel 개발자는 더욱 강력한 형식의 코드를 작성하기 시작한 반면, 풀 스택 개발자는 프런트엔드 코드에 동일한 방식을 적용하지 않는 경향이 있습니다. 그중 TypeScript는 프런트 엔드 구성 요소를 작성하는 "다른" 방법으로 간주됩니다. [관련 권장 사항: laravel 비디오 튜토리얼]

TypeScript에 대한 대부분의 오해는 TypeScript가 백엔드 개발자에게 너무 복잡하고 추가 가치를 제공하지 않고 코드 크기만 확장한다는 것입니다.

사실 TypeScript는 유형 선언을 강요하지 않습니다. 중요한 부분은 다음과 같습니다. TypeScript는 그 위에 항목을 추가할 수 있는 JavaScript의 상위 집합이지만 유효한 JS도 유효한 TS입니다.

이의 실질적인 영향은 파일 이름을 .js에서 .ts로 바꾸고 점차적으로 유형을 추가하거나 새 파일에서 유형을 사용할 수 있다는 것입니다. 코드베이스가 100% 유형 범위를 가질 필요는 없습니다. 원하는 대로 TypeScript를 사용할 수 있습니다. .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

TypeScript를 사용하는 이유

TypeScript는 선택적 정적 타이핑을 제공하므로 컴파일 단계에서 코드를 빌드하고 확인할 수 있습니다. 또한 IDE 자동 완성 및 유효성 검사 지원과 코드 탐색 기능도 제공합니다. 즉, TypeScript는 코드 가독성을 높이고 디버깅 프로세스를 향상시킵니다.

1. 종속성 설치

TypeScript 컴파일러와 해당 Webpack 로더를 설치해 보겠습니다.

rrreee

TypeScript 컴파일러에는 필수 옵션이 포함된 구성 파일이 필요합니다. 적절한 IDE 자동 완성도 바람직합니다.

🎜3. Laravel Mix 구성🎜

🎜사용 예🎜

위 내용은 Laravel에서 Typescript를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!