在 Laravel 中使用 typescript

很多 PHP 开发者已经开始编写更为强类型的代码, 而全栈开发者倾向于在前端代码中采用不同的策略。其中一个原因是 TypeScript 被认为采用了另一个中方法编写前端组件。

主要的误解在于，TypeScript 对很多后端开发者来说太过复杂，只会膨胀代码而不能提供额外价值。

实际上，TypeScript 并不强制你声明类型。TypeScript 是 JavaScript 的超集，任何有效的 JS 代码在 TS 中同样有效。

实际工作中，你可以将你的 .js 文件 重命名为 .ts 文件，逐渐在新文件中添加和或者使用类型。你的基础代码不需要达到 100% 类型覆盖，你可以在你选择的范围内使用 TypeScript。 

为什么使用 TypeScript

TypeScript 提供可选的静态类型声明，使你可以在组织和编译阶段验证你的代码。它同时提供 IDE 代码自动补全、代码验证异界代码导航功能。简单地说， TypeScript 提高了编码可行性，改进了调试过程。

为你的 Laravel 项目添加 TypeScript 支持相当简单，只要几分钟你就可以提高你的前端经验。

1. 安装依赖

首先，安装 TypeScript 编译器和相应的 Webpack 加载器。 

npm install ts-loader typescript --save-dev
# or
yarn add ts-loader typescript -D

2. 配置 TypeScript 

TypeScript 编译器需要一个包含必要选项的配置文件。

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/**/*"]  // Frontend paths pattern
}

3. 配置 Laravel Mix

Laravel 初始化安装时，有一个Javascript 模板入口，需要将其转换成 TypeScript. 你只需要将 .js 重命名为 .ts 。

-resources/js/app.js
+resources/js/app.ts

接下来，让 Mix 按照 TypeScript 来处理 Javascript。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 标签中。

<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
 
export default defineComponent({
	...
});
</script>

好了，全部就绪。你可以按照以前的方式编写代码，使用一些 TypeScript 特性改进你前端经验。

用例

TypeScript 让你以简单的类型和复杂的结构使用类型提示变量和方法。由于我们主要聚焦于和后端互动，我们就以和模型互动为例。

首先，我们创建一个包含所有必要的类型声明的文件- resources/js/types.d.ts.

假设你前端有一个 User 模型用于交互。以下是用 TypeScript 对默认 User 模型的基本描述。它描述了一个对象有哪些属性，这些属性是什么类型。

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 声明，在你的 migration 中保持更新。