[Tutorial] Using typescript for server side

[Ember]

Requirements

• Rage MP server files
• NodeJS
• VS Code (or preferred IDE/text editor)
• Basic typescript knowledge
  • typescript in 5 minutes
  • typescript overview
• Basic js/nodeJs knowledge
• Rage:MP TypeScript type definition for Server-side (credit: CocaColaBear)

Introduction
We are going to setup a simple rage mp server using typescript

Getting Started

Install typescript globally

> npm install -g typescript

 

Verify that you installed typescript correctly

> tsc -v

//version 2.9.2 (or whatever version you installed)

 

Download Rage MP Typescript type files from: https://github.com/CocaColaBear/types-ragemp-s

Place the the following files inside server-files folder

• index.d.ts
• vehicle_hashes.d.ts
• ped_hashes.d.ts
• weapon_hashes.d.ts
• enums.d.ts

Setting Up Environment

Go inside server-files and initiate a new npm project

> npm init

keep pressing enter until it asks "is this ok" and type yes or press enter.

Now you should have a package.json in your server-files folder.

Next install typescript dev dependencies

> npm install --save-dev typescript

After the install is complete, open your package.json and you should see typescript under devDependencies

 

Next create a tsconfig.json file by running the following command

> tsc --init

You should now have a tsconfig.json file in your server-files directory.

Open tsconfig.json and replace with:

{
  "compileOnSave": true,
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "resolveJsonModule": true,                /* needed to read json*/
    "esModuleInterop": true,                  /* needed to read json*/
    "outDir": "./packages/mygamemode",          /* Redirect output structure to the directory. */

    "strict": true                            /* Enable all strict type-checking options. */
  },
  "files": [
        "index.d.ts",
        "vehicle_hashes.d.ts",
        "weapon_hashes.d.ts",
        "ped_hashes.d.ts",
        "enums.d.ts"
    ],
  "include": [
      "src/**/*"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ]
}

 

Next create a new folder called "src" inside server-files

Inside of src folder create another folder called "mygamemode" or whatever your gamemode will be.
Note*: make sure your  "outDir": "./packages/[GAMEMODENAMEHERE]" matches your gamemode folder name in tsconfig.json

Within the mygamemode create a typescript file called index.ts(this will be your initial index.js file)

mygamemode/index.ts

import './commands';

 

Next create a folder within mygamemode called commands and inside this new commands folder create a new typescript file called index.ts

mygamemode/commands/index.ts

function setArmour(player: PlayerMp) {
    player.armour = 100;
}
mp.events.addCommand('armour', setArmour);

 

Compiling

Now we will compile the typescript files to output to packages/mygamemode

open command and type

> tsc -w

what this command does is it compiles your whole project first and then watches for all .ts file changes and compiles/outputs them to packages/mygamemode which is specified in the tsconfig.json.
Note*: Whenever you edit a .ts file, the typescript watch (tsc -w) will automatically compile the files to packages/mygamemode.

Finally run your server.exe and enjoy coding in typescript!

 

GitHub link: https://github.com/tameemi/ragemp-typescript

 

Edited July 20, 2018 by Mafiya

[Coquelin]

Hey, thank you for the tutorial! 

Just a thing, when you try to set it up on a linux server, server-files is not natively created or at least not with the same name. I suggest to create a server-files folder within the default rage-mp folder and then modify the "outDir" to be "../packages/mygamemode"