How to use typescript JsonServiceClient in Serenity project

Clients JavaScript
1

Hi what is the manual procedure to use JsonServiceClient in project without jspm/npm? I have tried to include it to some test project based on http://serenity.is/ without success.

2

ServiceStack’s TypeScript JsonServiceClient is packaged in the servicestack-client npm package which is the official way to get it using either npm or jspm.

Otherwise you should be able to manually download the index.ts source file directly, but it has a dependency on isomorphic-fetch npm package so it can be used in both web and node projects. Since you don’t want to use npm you should be able to remove that import and use the ES6 fetch support in browsers but you’d need a fetch polyfill so it can work in older browsers.

3

@mythz I am following your instructions. I have included file into project but tsc.exe (v 2.1.5) gives me errors.

(1011,20): error TS2304: Cannot find name ‘Promise’
(164,25): error TS2304: Cannot find name ‘fetch’

and similar. Should I also include some typescript version of fetch? The tsconfig is

{
    "compileOnSave": true,
    "compilerOptions": {
        "preserveConstEnums": true,
        "experimentalDecorators": true,
        "declaration": true,
        "emitBOM": true,
        "sourceMap": true,
        "outFile": "Scripts/site/BananaAdmin.Web.js",
        "target": "es5"
    },
    "exclude": [
        "Scripts/site/BananaAdmin.Web.d.ts"
    ]
}
4

As mentioned above, you need a fetch polyfill and its fetch type definitions. You can get the TypeScript definition for promises by adding "lib": [ "es2015" ] to your tsconfig.json. Here’s an example of the tsconfig.json we use in our ServiceStackVS VS.NET Templates.

But not sure why you want to manually import dependencies and Type definitions yourself instead of letting the npm/jspm package managers do its job for you.

5

Actually serenity use package.json

{
  "name": "serene.web",
  "version": "1.0.0",
  "description": "BananaAdmin",
  "main": "index.js",
  "dependencies": {
    "@types/jquery": "^2.0.39",
    "@types/jquery.blockui": "0.0.27",
    "@types/jquery.cookie": "^1.4.28",
    "@types/jquery.validation": "^1.13.32",
    "@types/jqueryui": "^1.11.32",
    "@types/jspdf": "^1.1.31",
    "@types/sortablejs": "^1.3.31",
    "@types/toastr": "^2.1.32"
  },
  "devDependencies": {},
  "scripts": {
  },
  "author": "",
  "license": "ISC"
}

… and tsconfig.json citied in previous post where I have added “lib”: [ “es2015” ].

I was trying to run npm install servicestack-client --save and next when I run typings install servicestack-client --save I get

typings INFO globaldependencies “servicestack-client” lists global dependencies
on “es6-shim” and “isomorphic-fetch” that must be installed manually
servicestack-client@0.0.10
`-- (No dependencies)

When I try run tsc.exe I get (a lot of other errors) one of them

../../git/BananaAdmin.Web/typings/globals/isomorphic-fetch/index.d.ts
(153,15): error TS2300: Duplicate identifier 'Response'.

I would be very grateful for your help.

6

I’ve had a go installing the Serene VS.NET Extension and created a new project.
Here are the steps needed to install servicestack-client.

  1. Install TypeScript definitions for node:
npm install @types/node --save
  1. Install servicestack-client:
npm install servicestack-client --save

Change tsconfig.json to add es6 + browser DOM type definitions and because it has an outFile need to change module to system:

    "module": "system",
    "lib": [ "es2015", "dom"]
7

I have tried to repeat steps and after tsc.exe /Scripts/Site/BananaAdmin.Web.js contains now servicetsack-client module but there is error in app:

System.register is not a function

System.register("node_modules/servicestack-client/src/index", 
    ["isomorphic-fetch"], function (exports_1, context_1) {
        "use strict";
        var __moduleName = context_1 && context_1.id;
        var ResponseStatus, ResponseError, ErrorResponse, ReadyState, ServerEventsClient, HttpMethods, JsonServiceClient, createErrorResponse, toCamelCase, sanitize, nameOf, css, splitOnFirst, splitOnLast, splitCase, humanize, queryString, combinePaths, createPath, createUrl, appendQueryString, qsValue, bytesToBase64, uint6ToB64, _btoa, toDate, toDateFmt, padInt, dateFmt, dateFmtHM, timeFmt12;
        return {
      ...

What other steps I am missing?

8

Try installing System.JS:

npm install systemjs --save
9

@mythz I have installed systemjs but still have a problem (unable to reference JsonServiceClient). Could you take a look how to make JsonServiceClient available in Modules\Northwind\Customer\CustomerGrid.ts? I see that file Serenity.CoreLib.d.ts contains declarations for other typings (jquery, jqueryui …).

10

I can’t make any sense of how this Serene template is structured, it doesn’t seem to respect TypeScript modules or TypeScript references.

Do you have an example of how you’re meant to be able to import any external TypeScript modules in this Serene template? I don’t see any imports anywhere and most of the files are still raw .js scripts.

The only way I can see to make tsc/VS.NET intelli-sense happy is to import the TypeScript module directly with:

import { JsonServiceClient } from "../../../node_modules/servicestack-client/src/index";

var client = new JsonServiceClient("/");

If this used a module loader it would just be:

import { JsonServiceClient } from "servicestack-client";
11

Another thing you can try is changing TypeScript “moduleResolution”: “node”, e.g:

{
  "compileOnSave": true,
  "compilerOptions": {
    "preserveConstEnums": true,
    "experimentalDecorators": true,
    "declaration": true,
    "emitBOM": true,
    "sourceMap": true,
    "outFile": "Scripts/site/Serene1.Web.js",
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "lib": [ "es2015", "dom" ]
  },
  "exclude": [
    "Scripts/site/Serene1.Web.d.ts"
  ]
}

Which will let you import it as a module, e.g:

import { JsonServiceClient } from "servicestack-client";

var client = new JsonServiceClient("/");

tsc compiles, but I’m not sure what effect changing the module resolution will have to the rest of the template.

12

The problem is when I try to include

import { JsonServiceClient } from "servicestack-client";

to

Modules\Northwind\Customer\CustomerGrid.ts

I lose references to existing definitions (there are multiple)

Modules/Northwind/Customer/CustomerGrid.ts(6,59): error TS2304: Cannot find name
 'CustomerRow'.

As you have written - there is no usage of import clause in project.
There is simple external module here

\Scripts\typings\jspdf\jspdf.autotable.d.ts

And here is reference to jquery. But nowhere import is used…

\Scripts\site\BananaAdmin.Web.d.ts