Skip to content

ragempcommunity/ragemp-types

Repository files navigation


Community-driven type definitions for RAGE Multiplayer

NPM version NPM Downloads Continuous Delivery - Server

NPM version NPM Downloads Continuous Delivery - Client

NPM version NPM Downloads Continuous Delivery - CEF

Twitter Discord Server

Remember to 🌟 this GitHub if you 💖 it.

📥 Installation

🔥 Use github:ragempcommunity/ragemp-types#types-server to latest build

# With npm
> npm i --save-dev @ragempcommunity/types-server

# With yarn
> yarn add -D @ragempcommunity/types-server

# With pnpm
> pnpm add -D @ragempcommunity/types-server

🔥 Use github:ragempcommunity/ragemp-types#types-client to latest build

# With npm
> npm i --save-dev @ragempcommunity/types-client

# With yarn
> yarn add -D @ragempcommunity/types-client

# With pnpm
> pnpm add -D @ragempcommunity/types-client

🔥 Use github:ragempcommunity/ragemp-types#types-cef to latest build

# With npm
> npm i --save-dev @ragempcommunity/types-cef

# With yarn
> yarn add -D @ragempcommunity/types-cef

# With pnpm
> pnpm add -D @ragempcommunity/types-cef

🤓 Usage

To make these types detectable, you need to add the types property below to tsconfig.json on each side of your project.

// e.g server-side
{
 "compilerOptions": {
  "types": ["{RELATIVE_PATH_TO_NODE_MODULES}/@ragempcommunity/types-server"]
 }
}

❌ Avoiding Conflict between Server <-> Client Types

To avoid conflicts between server and client types, they must be installed and set as follows:

Step #1: install the types in package.json from the project root

> npm i --save-dev @ragempcommunity/types-server
> npm i --save-dev @ragempcommunity/types-client

Step #2: for this step, your project should be structured as follows:

├───my-awesome-ragemp-server
│   └───src
│        # Server - Contains code relating to the database, player spawning, etc.# Client - Contains code to display things to the user and do things to them.
│         ├───client
│          │   ├───@types
│          │   │   └───index.d.ts
│          │   ├───src
│          │   └───tsconfig.json
│          │
│         server
│    │   ├───@types
│     │   │   └───index.d.ts
│          │   ├───src
│          │   └───tsconfig.json
│          └───
├───package.json
└───tsconfig.base.json

Now that we know what our server structure should look like, let's start setting the types properly.

  1. tsconfig.base.json - this is our base tsconfig, from which we extend the client/server part (to avoid making redundant code)
{
 "exclude": ["node_modules", "dist"],
 "compileOnSave": true,
 "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "moduleResolution": "node",
  "lib": ["es6", "esnext", "DOM"],
  "rootDir": ".",
  "outDir": "dist",
  "baseUrl": "./"
 }
}
  1. client/tsconfig.json - this is our tsconfig for the client side, extended from the basic tsconfig and containing the types for the client
{
 // NOTE: This tsconfig will work assuming your project is structured as described above.
 "extends": "../../tsconfig.base.json",
 "compilerOptions": {
  // [RELATIVE_PATH_TO_NODE_MODULES]/@ragempcommunity/types-client
  "types": ["../../node_modules/@ragempcommunity/types-client", "./@types"]
 },
 "include": ["./**/*.ts"]
}
  1. server/tsconfig.json - this is our tsconfig for the server side, extended from the basic tsconfig and containing the types for the server
{
 // NOTE: This tsconfig will work assuming your project is structured as described above.
 "extends": "../../tsconfig.base.json",
 "compilerOptions": {
  // [RELATIVE_PATH_TO_NODE_MODULES]/@ragempcommunity/types-server
  "types": ["../../node_modules/@ragempcommunity/types-server", "./@types"]
 },
 "include": ["./**/*.ts"]
}

For those who didn't understand, I made a gamemode from which you can better orient yourself:

ragemp-typescript & ragemp-javascript

👨‍💻 Contributing

To contribute to this repository, feel free to create a new fork of the repository and submit a pull request.

  1. Fork / Clone and select the main branch.
  2. Create a new branch in your fork.
  3. Make your changes.
  4. Commit your changes and push them.
  5. Submit a Pull Request here!

🎉 Thanks

📋 License

This project is licensed under the MIT License — see the LICENSE file for details.