Sign in to follow this  
Ember

[Tutorial] Using typescript for server side

Recommended Posts

Requirements

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.

bcc2fb2a23524b273f12d5758f40781c.png

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

62eab05c7c009dc8b674d8a2ac6403a2.png

 

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!

12869bb72006dd70e0fb605cf5fb3561.png

 

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

 

Edited by Mafiya
  • Like 4

Share this post


Link to post
Share on other sites

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" 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.