Angular: How to manually add typing file to typescript

Question

How can I manually add a typing file to typescript in my application?

I am trying to add the following utility to my Angular 5 project. WKT Parser

I am still new to Angular so I will list all the steps that I've taken to try to paint the picture of where I'm at.

So if I am understanding correctly I need to do the following:
1. Add the js files to my project.
2. Add the types to typescript in my project.
3. Import the library inside of Typescript and write my code.

After some research it appears that I can add the scripts in the angular-cli.json file.

  "scripts": [
    "../node_modules/terraformer/terraformer-1.0.8.min.js",
    "../node_modules/terraformer-wkt-parser/terraformer-wkt-parser.min.js"
  ],   

So far so good. The application doesn't show me any errors and I can see the scripts in the script.bundle when I debug in chrome.

I seem to be hung up on adding the typing file to my typescript.

I've tried installing the types by:

npm install @types/terraformer-wkt-parser

I get a 404. So I'm assuming the type package doesn't exist for me to use this way.

I've looked at TypeScript typings in npm @types org packages and Typescript and JS Libraries in Angular to see how I can manually add this, but I've had no success.

tsconfig.app.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [ "../node_modules/terraformer-wkt-parser/terraformer-wkt-parser.d" ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

I added the typing flie to the types section and the application will not load.

I believe that it's not picking up the types for when I try any of the following in my tyescript file the app will not load.

import WKT = require("terraformer-wkt-parser");
import WKT from 'terraformer-wkt-parser';

When I state it will not load:
* Page shows me "Cannot GET /"

• Console Error - Failed to load resource: the server responded with a status of 404 ()

I used yarn to originally install both packages and I do see they exist in my package.json file.

"terraformer": "^1.0.8",
"terraformer-wkt-parser": "^1.2.0",

ng version:

Angular CLI: 1.7.4
Node: 9.11.1
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 5.2.5
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 4.8.3

EDIT: - Changed tsconfig.json

"typeRoots": [
  "node_modules/@types",
  "node_modules/terraformer",
  "node_modules/terraformer-wkt-parser"
],

I still get the same error as above.

Answer 1

If you are trying to use the WKT then you just need to do the following:

1. Install

   • GeoJSON
   • terraformer-wkt-parser

2. All you need to do is to add the following to your TypeScript file:

   import GeoJSON = require("geojson"); import WKT = require("terraformer-wkt-parser");

   x = WKT.parse(someVar);