Utilize GRPC TypeScript tools to transform a proto file into a TypeScript file

Currently, I am working with a monorepo that is utilizing nxCloud. Within the root directory of this repository, I have created a proto file inside a specific folder. This proto file is essential for its functionality but in order to utilize its functions, I need to import it as a TypeScript file. To achieve this conversion, I am attempting to write an sh script which will be executed using git bash. However, I am encountering errors related to the paths of my source and destination folders. My lack of expertise in .sh files is hindering me from pinpointing the exact issue. I require assistance in executing this script.

Below is the snippet of the sh code:

#!/bin/bash

BASEDIR=$(dirname "$0")

cd ${BASEDIR}/../

PROTO_DEST=./src/proto

mkdir -p ${PROTO_DEST}

# JavaScript code generation
yarn run grpc_tools_node_protoc \
    --js_out=import_style=commonjs,binary:${PROTO_DEST} \
    --grpc_out=${PROTO_DEST} \
    --plugin=protoc-gen-grpc=./node_modules/.bin/grpc_tools_node_protoc_plugin.cmd \
    -I ./proto \
    proto/*.proto
echo issueOccuredHere
# TypeScript code generation
yarn run grpc_tools_node_protoc \
    --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts.cmd \
    --ts_out=${PROTO_DEST} \
    -I ./proto \
    proto/*.proto

The error messages are visible in the screenshots provided below:

https://i.sstatic.net/ZY01f.png

To better understand the file levels within this project, refer to the image linked here:

https://i.sstatic.net/niEKO.png

typescriptgrpcgrpc-node

Answer №1

I recently completed this task by utilizing ts-node and protoc for the installation process.

To install ts-node in the directory where your .proto file is located, follow these steps:

npm i ts-node

Next, execute the following command (assuming you have already installed protoc):

protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=. ./simple.proto

Answer №2

It seems to me that the problem may be related to the directory structure. You can try the following:

#!/bin/bash

BASEDIR=$(dirname "$0")

cd ${BASEDIR}/../

PROTO_DEST=./src/proto
PROTO_DIR=./protos/download-center
mkdir -p ${PROTO_DEST}

# JavaScript code generation
yarn run grpc_tools_node_protoc \
    --js_out=import_style=commonjs,binary:${PROTO_DEST} \
    --grpc_out=${PROTO_DEST} \
    --plugin=protoc-gen-grpc=./node_modules/.bin/grpc_tools_node_protoc_plugin \
    -I ${PROTO_DIR} \
    ${PROTO_DIR}/*.proto
echo issueOccuredHere
# TypeScript code generation
yarn run grpc_tools_node_protoc \
    --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
    --ts_out=${PROTO_DEST} \
    -I ${PROTO_DIR} \
    ${PROTO_DIR}/*.proto

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for combining two interface declarations into a single interface?

I have a question regarding organizing the properties of an interface: export interface IInvoicesData { invoice: IInvoice; invoiceWithTotals: IInvoice & IInvoiceTotals; } Currently, everything is functioning smoothly and I am able to consolid ...

typescript

What is causing this issue in TypeScript version 4.8?

After updating to TypeScript 4.8 in VSCode, I have encountered an error in one of my React projects that was not present before. Strangely, this error does not prevent the code from compiling successfully when building the project. It's challenging to ...

reactjstypescripttypescript-generics

How to modify CSS style in SVG using Angular2?

I have been working on adding SVG to an Angular2 component's template and I've encountered some challenges. Here is the code snippet I am using: <object type="image/svg+xml" data="kiwi.svg" class="logo"> Kiwi Logo </object> To dyn ...

angulartypescriptdomsvgangular2-template

React Native error: encountering the error message "undefined is not an object '_this3.props.navigation()'"

I am encountering an error in the navigationOptions() function when running my React app, but everything is working correctly in the render() function. App.js import React, { Component } from 'react'; import { AppRegistry, View } from 'r ...

javascripttypescriptreact-native

The method of evaluating in-line is distinct from evaluating outside of the

What causes the compiler to produce different results for these two mapped types? type NonNullableObj1<O> = {[Key in keyof O] : O[Key] extends null ? never : O[Key]} type NotNull<T> = T extends null ? never : T; type NonNullableObj2<T> = ...

typescriptmapped-types

When clicking on OpenLayers Map in Angular, the value may not update as expected or may be set back

My initial project incorporates OpenMaps / Openlayers. The specific component I am referring to appears as follows: import {AfterViewInit, ChangeDetectionStrategy, Component} from '@angular/core'; import {Map, MapBrowserEvent, View} ...

angulartypescriptopenlayersgettersetter

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

After attempting several methods, I am struggling to display the books in the desired format. My objective is to showcase products within a specific category, such as: http://localhost:4200/books/category/1. Initially, it worked without specifying a catego ...

htmlangularspringtypescript

Utilizing TypeScript union types in React: A step-by-step guide

I'm currently working on applying types to ReactJS props using an interface that includes a union type. In the example below, you can see that the tags type is a union type. export interface TagInterface { id: number; name: string; } export inter ...

reactjstypescript

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

I've been working on creating a single-page website with a customized navbar using React instead of native JavaScript, similar to the example I found in this reference. My current setup includes a NavBar.tsx and App.tsx. The NavBar.tsx file consists o ...

reactjstypescriptreact-router

Failed to retrieve information from the Service for the component

My goal is to retrieve data from a service and display it in a component. Below is the code for my service: Service.ts export class PrjService { tDate: Observable<filModel[]>; prjData:Observable<filModel[]>; entityUrl; constructor(){ this ...

javascriptangulartypescriptangular7angular-routing

React Native: Issue with the data section in FlatList

I encountered an issue while using Flatlist to address a problem, but I ran into an error with the data property of my Flatlist. The error message is not very clear and I'm having trouble understanding it ( No overload matches this call. Overload 1 of ...

reactjstypescriptreact-nativereact-native-flatlist

Using "undefined" as the discriminator in a discriminated union

My idea is to implement a discriminated union using null as the discriminator: type Result<T> = { result: T; error: null } | { result: null; error: string } If the function register() returns a Result, I could handle it like this: const { error, res ...

typescriptnulldiscriminated-union

Embarking on a New Project with Cutting-Edge Technologies: Angular, Node.js/Express, Webpack, and Types

Recently, I've been following tutorials by Maximilian on Udemy for guidance. However, I have encountered a roadblock while trying to set up a new project from scratch involving a Node/Express and Angular 4 application. The issue seems to stem from the ...

javascriptnode.jsangulartypescriptwebpack

Working with Angular 6 and Electron: The limitations of using a mocked class for unit testing and extending the real class

I encountered a problem while trying to write a unit test for my Electron app using Jasmine and Angular 6. The issue arises from the fact that I have a service which is not required to be tested in the specific test scenario of another service. To handle t ...

angulartypescriptunit-testingjasmineelectron

transformation of categorized unions in software development

Experimenting with routing-controllers and its built-in class-transformer feature, I tried creating an interface for executing a search query based on either a location id or location coordinate. My aim was to utilize a discriminated union as a body parame ...

typescriptclass-transformer

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Hello, I am diving into the world of Typescript/Javascript and encountering some challenges when it comes to manipulating arrays of data. Please bear with me as I navigate through my learning curve. Imagine having an array of objects structured like this: ...

javascriptarraysangulartypescript

A Typescript Function for Generating Scalable and Unique Identifiers

How can a unique ID be generated to reduce the likelihood of overlap? for(let i = 0; i < <Arbitrary Limit>; i++) generateID(); There are several existing solutions, but they all seem like indirect ways to address this issue. Potential Solu ...

javascriptreactjstypescript

What is the best way to store the output of a function in a local variable?

In my Type Script code, I am looking to store the return value of a function in a local variable. The process is outlined below: getdetail1(store){ let Cust_id=this.sharedata.latus_lead.m_type let url="http:domain.com" console.lo ...

angulartypescriptionic2

Tips for troubleshooting 'npm ERR! 403: The requested package version is not permitted by your security policy. Typically, this issue arises when you or one of your dependencies are attempting to access a restricted package version.'

Currently, I am in the process of setting up a Jenkins and a private npm repository called Sonatype Nexus. I am encountering an error when attempting to publish to the repository within a Jenkins build pipeline. + npm publish --registry https://<my-priv ...

typescriptnpmjenkins-pipelinenexus

Transformed Vue code with TypeScript using a more aesthetically pleasing format, incorporating ref<number>(0)

Original Format: const activeIndex = ref<number>(0) Formatted Version: const activeIndex = ref < number > 0 Prettier Output: click here for image description Prettier Configuration: { "$schema": "https://json.schemastore.org ...

typescriptwebvuejs3code-formattingprettier