A developer demonstrates generating TypeScript code from Protobuf files using ts-proto for a NestJS application. The process includes refactoring DTOs to implement generated interfaces for type safety and updating authentication guards to consume gRPC services, effectively abstracting remote procedure calls as local methods.
Length 10:16
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #typescript #nestjs #grpc #protobuf #coding #software development #programming #backend #authentication #refactoring
0:00 Okay, so now that we've generated the proto 0:02 definitions for our 0:03 services, let's go ahead and utilize ts proto to 0:07 generate the TypeScript code we need to integrate it easily within our 0:10 NestJS app. 0:13 So the command we'll run will be protoc 0:15 --plugin equal to, 0:20 and then we'll give it the path to our plugin. 0:21 So this will be in node 0:23 modules/.bin/protoc-gen-ts_proto. 0:32 Then we'll specify where we wanna generate the TypeScript code to by using the 0:36 ts_protoOut option, and I'll just 0:40 leave this equal to ./ 0:42 for the relative path. 0:44 And then finally, we'll use 0:46 --ts_proto_opt=nestjs=true, 0:54 which is gonna generate NestJS specific code for us. 0:58 Now let's specify the path to our proto file. 1:01 In this case, it'll be./proto, and then we'll start off with the 1:05 auth.proto. 1:07 Let's go ahead and run the same command and just swap out the path for the 1:11 payments proto now. 1:13 And finally, we'll rerun it for the 1:16 notifications proto. 1:19 So now if we go back to our project and open up the proto 1:23 folder, we can see we have three new definition... 1:27 We have three new files created, one for each proto, and if we 1:31 look inside, we can see all of the interfaces. 1:35 And if we look inside, we can see all this TypeScript code 1:38 that has been generated 1:39 for us based off of the proto file that we created. 1:44 So in the auth.ts, we can see we have interfaces 1:47 defined for each of the different message types that we created in our 1:51 auth.proto. We also have interfaces for the 1:55 client that will be calling our auth service and the 1:58 controller that will actually be implementing the auth service. 2:03 So this is gonna make it very easy for us to write clean, consistent 2:06 code that is always in line with our proto definition.
The rest of the transcript is for members.
Sign in 