Typescript

Setting Up Typescript

Typescript is implemented quite differently depending on your project's requirements. Since there is such a wide range of possible implementations, configuring a project built with gitpod-laravel-starter to use Typescript has been left up to you, the developer.

Example

Add Typescript to a `gitpod-laravel-starter` react preset example.

For those of you that have not set up Typescript in a Laravel project, an example is provided here. These steps are specific to setting up Typescript with React but you can apply the ideas found here to anything you like.

Set up Typescript with the `gitpod-laravel-starter` preset React example.

Setup a new project repository named: lgs-typescript-example (or anything you want to call it really)
Create a gitpod workspace from your new project repository using EXAMPLE 1
- Your gitpod workspace url should look something like this: https://gitpod.io/#EXAMPLE=1/https://github.com/GITHUBUSERNAME/GITHUBREPONAME
When the system is ready, install the Typescript dependencies:
- Install the Node and React/React DOM types, run: yarn add @types/node @types/react @types/react-dom
- Install the Typescript loader and Babel support for jsx, run: yarn add ts-loader typescript @babel/preset-react --dev
Rename the entry point for your application to use Typescript by changing its file extention from .js to .tsx.
- Rename resources/js/app.js to resources/js/app.tsx
Configure webpack to compile from .tsx rather than .js
- Edit webpack.mix.js by changing mix.js('resources/js/app.js', 'public/js') to mix.ts('resources/js/app.tsx', 'public/js')

You have successfully setup Typescript for React 🚀.

You can now incrementally migrate your project to Typescript. Just rename the react files you add types to from .jsx or .js to .tsx or from .js to .ts for javascript files that do not contain jsx tags.

For example resources/js/components.App.js is the main component for your application, while this file does really need any types in it right now, it can be safely renamed to resources/js/components.App.tsx.