theBowja / genshin-db

npm package with searching functions for Genshin Impact data of all in-game languages. Data parsed/organized directly from GenshinData repo.
MIT License
362 stars 69 forks source link

Any plans to add TypeScript support? #7

Closed meimisaki closed 3 years ago

meimisaki commented 3 years ago

It's nice to see such a great database for genshin, well-structured game info, pretty images, and even multi-languages support!

I'm currently developing a genshin build planner(i.e. damage calculator) written in TypeScript, and I would like to use this package as main data source(for those non-numerical properties). So I just wonder if you have any plans to add TypeScript support? Actually I have already written a simple type definition for it, if you don't mind, I might send you a pull request later.

Anyway, thanks for your great work!

theBowja commented 3 years ago

I'm unfamiliarity with TypeScript. What has to be done for Typescript to be supported?

theBowja commented 3 years ago

I have to say that even though there is support for multiple languages, I don't have any data besides English hah.

meimisaki commented 3 years ago

I'm unfamiliarity with TypeScript. What has to be done for Typescript to be supported?

Well it's quite simple, just need to add a standalone type definition file, and a few lines modification in package.json. You can take a review on my pull request later.

Though the exported TypeScript APIs might be more restrictive than it originally was in JavaScript(mainly due to the fancy overloading), I would try my best to make it generic and robust.

meimisaki commented 3 years ago

I have to say that even though there is support for multiple languages, I don't have any data besides English hah.

Hah don't worry about that, I invited one of my developer friends(who's also playing this game) to help collecting data from miHoYo official wiki for Chinese version. He is planning to write some scripts to automate the process, I really hope there are some open source projects that can help to decrypt and extract raw data from game resources.

I also speak some Japanese, not a native but good enough to understand most game contents. I could assist you with JP version once I finish the basic functions of my build planner.

meimisaki commented 3 years ago

Hi, any comments on the pull request? (I noticed new attributes on the weapon object, and may provide you further update later)

theBowja commented 3 years ago

Haven't had time to look at it. I'll try get around to it this week.

theBowja commented 3 years ago

how do i test myself if the index file works?

meimisaki commented 3 years ago

Assume you have never experienced with typescript, just follow the steps below to check how it works:

  1. Create a test project and setup basic environments:

    mkdir ~/test-genshin-db
    cd ~/test-genshin-db
    npm i typescript @types/node genshin-db
  2. Download index.d.ts from my fork:

    curl https://raw.githubusercontent.com/meimisaki/genshin-db/main/index.d.ts --output node_modules/genshin-db/index.d.ts
  3. Add an index.ts file with the following content, here I made a typo intentionally:

    const genshindb = require("genshin-db");
    console.log(genshindb.character("Amber"));
  4. Use tsc to transpile typescript to javascript, then execute it with node:

    npx tsc index.ts && node index.js

    You can expect a runtime error since there is no function called character, the node-style require have no idea what has been exported from the module at compile time.

  5. Change to ES6-style import, so index.d.ts will be loaded as type definitions for src/main.js:

    import * as genshindb from "genshin-db";
    console.log(genshindb.character("Amber"));
  6. Try step 4 again, now the compiler will reject you before the code being executed:

    index.ts:2:23 - error TS2551: Property 'character' does not exist on type 'typeof import("genshin-db/index")'. Did you mean 'characters'?
  7. Fix the typo to make it works, and you can try other APIs yourself:

    // the type assertion is a tradeoff as I mentioned in the pull request
    const amber = genshindb.characters("Amber") as genshindb.Character;
    console.log(amber.images.portrait);
    const rust = genshindb.weapons("rust") as genshindb.Weapon;
    console.log(rust.description);
  8. If you are using editors like VSCode, index.d.ts also helps auto complete the code. When you enter a prefix amber.images., it will show up three candidate properties in a popup menu, card, image, and portrait which are all of type string.

theBowja commented 3 years ago

supported in v3.5.0