Skip to content

Commit 35a6637

Browse files
committed
Docs: Additional docs on TS/decorators usage [ci skip]
1 parent 7a6f98b commit 35a6637

File tree

1 file changed

+26
-31
lines changed

1 file changed

+26
-31
lines changed

README.md

+26-31
Original file line numberDiff line numberDiff line change
@@ -466,18 +466,23 @@ Note that the service API is meant for clients. Implementing a server-side endpo
466466

467467
### Usage with TypeScript
468468

469-
The library ships with its own [type definitions](https://github.com/dcodeIO/protobuf.js/blob/master/index.d.ts) and modern editors like [Visual Studio Code](https://code.visualstudio.com/) should automatically detect and use them for code completion when following this pattern:
469+
The library ships with its own [type definitions](https://github.com/dcodeIO/protobuf.js/blob/master/index.d.ts) and modern editors like [Visual Studio Code](https://code.visualstudio.com/) will automatically detect and use them for code completion.
470+
471+
**Note** that the npm package depends on [@types/node](https://www.npmjs.com/package/@types/node) because of `Buffer` and [@types/long](https://www.npmjs.com/package/@types/long) because of `Long`. If you are not building for node and/or not using long.js and want to exclude their full type definitions manually for whatever reason, there are two stubs available that can be referenced instead of the respective full type definition:
470472

471473
```ts
472-
// node.js
473-
import * as protobuf from "protobufjs";
474-
import * as Long from "long"; // optional
474+
/// <reference path="./node_modules/protobufjs/stub-long.d.ts" />
475+
/// <reference path="./node_modules/protobufjs/stub-node.d.ts" />
476+
```
475477

476-
// browser only (alternatively)
477-
// import * as protobuf from "./node_modules/protobufjs/index.js";
478-
// import * as Long from "./node_modules/long/dist/long.js"; // optional
478+
#### Using the JS API
479479

480-
protobuf.load("awesome.proto", function(err, root) {
480+
The API shown above works pretty much the same with TypeScript. However, because everything is typed, accessing fields on instances of dynamically generated message classes requires either (1) using bracket-notation (i.e. `message["awesomeField"]`), (2) explicit casts or (3) the use of a [typings file generated for its static counterpart](#pbts-for-typescript).
481+
482+
```ts
483+
import { load } from "protobufjs"; // respectively "./node_modules/protobufjs"
484+
485+
load("awesome.proto", function(err, root) {
481486
if (err)
482487
throw err;
483488

@@ -495,37 +500,27 @@ protobuf.load("awesome.proto", function(err, root) {
495500
});
496501
```
497502

498-
**Note:** Dynamically generated message classes cannot be typed, technically, so you must either access its fields using `message["awesomeField"]` notation or you can utilize [typings of its static counterpart](#pbts-for-typescript) for full typings support.
503+
#### Using generated static code
499504

500-
If you generated static code to `bundle.js` using the CLI and its type definitions to `bundle.d.ts` instead, then you can just do:
505+
If you generated static code to `bundle.js` using the CLI and its type definitions to `bundle.d.ts`, then you can just do:
501506

502507
```ts
503-
import * as root from "./bundle.js";
508+
import { AwesomeMessage } from "./bundle.js";
504509

505510
// example code
506-
var AwesomeMessage = root.AwesomeMessage;
507-
var message = AwesomeMessage.create({ awesomeField: "hello" });
508-
var buffer = AwesomeMessage.encode(message).finish();
509-
...
510-
```
511-
512-
**Note** that the npm package depends on [@types/node](https://www.npmjs.com/package/@types/node) because of `Buffer` and [@types/long](https://www.npmjs.com/package/@types/long) because of `Long`.
513-
514-
If you are not building for node and/or not using long.js and want to exclude their full type definitions manually for whatever reason, there are two stubs available that can be referenced instead of the respective full type definition:
515-
516-
```ts
517-
/// <reference path="./node_modules/protobufjs/stub-long.d.ts" />
518-
/// <reference path="./node_modules/protobufjs/stub-node.d.ts" />
511+
let message = AwesomeMessage.create({ awesomeField: "hello" });
512+
let buffer = AwesomeMessage.encode(message).finish();
513+
let decoded = AweesomeMessage.decode(buffer);
519514
```
520515

521-
#### Experimental decorators
516+
#### Using decorators
522517

523-
**WARNING:** Just introduced, not well tested, probably buggy.
518+
The library also includes an early implementation of [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html).
524519

525-
protobuf.js ships with an initial implementation of decorators, but note that decorators in TypeScript are an experimental feature and are subject to change without notice - plus - you have to enable the feature explicitly with the `experimentalDecorators` option:
520+
**Note** that this API is rather new in protobuf.js (and probably buggy) and that decorators are an experimental subject-to-change-without-notice feature in TypeScript. Also note that declaration order is important depending on the JS target. For example, `@Field.d(2, AwesomeArrayMessage)` requires that `AwesomeArrayMessage` has been defined earlier when targeting `es5`.
526521

527522
```ts
528-
import { Message, Type, Field, OneOf } from "protobufjs/light";
523+
import { Message, Type, Field, OneOf } from "protobufjs/light"; // respectively "./node_modules/protobufjs/light.js"
529524

530525
@Type.d()
531526
export class AwesomeArrayMessage extends Message<AwesomeArrayMessage> {
@@ -560,9 +555,9 @@ export class AwesomeMessage extends Message<AwesomeMessage> {
560555

561556
}
562557

563-
let awesomeMessage = new AwesomeMessage({ awesomeField: "hi" });
564-
let awesomeBuffer = AwesomeMessage.encode(awesomeMessage).finish();
565-
let awesomeDecoded = AwesomeMessage.decode(awesomeBuffer);
558+
let message = new AwesomeMessage({ awesomeField: "hi" });
559+
let buffer = AwesomeMessage.encode(message).finish();
560+
let decoded = AwesomeMessage.decode(buffer);
566561
```
567562

568563
Command line

0 commit comments

Comments
 (0)