Angular：如何手动将打字文件添加到打字稿

Posted 2023-03-13

【中文标题】Angular：如何手动将打字文件添加到打字稿

【英文标题】：Angular: How to manually add typing file to typescript

【发布时间】：2018-11-01 13:47:23

【问题描述】：

如何在我的应用程序中手动将打字文件添加到打字稿？

我正在尝试将以下实用程序添加到我的 Angular 5 项目中。 WKT Parser

我还是 Angular 的新手，所以我将列出我为尝试描绘我所处的位置所采取的所有步骤。

因此，如果我理解正确，我需要执行以下操作： 1.将js文件添加到我的项目中。 2. 在我的项目中将类型添加到 typescript。 3. 导入Typescript里面的库，写我的代码。

经过一些研究，我似乎可以在 angular-cli.json 文件中添加脚本。

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

到目前为止一切顺利。该应用程序没有显示任何错误，当我在 chrome 中调试时，我可以在 script.bundle 中看到脚本。

我似乎对将打字文件添加到我的打字稿感到犹豫。

我尝试通过以下方式安装类型：

npm install @types/terraformer-wkt-parser

我得到一个 404。所以我假设类型包不存在供我使用这种方式。

我看过TypeScript typings in npm @types org packages 和Typescript 和JS Libraries in Angular 看看我如何手动添加它，但我没有成功。

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"
  ]

我将打字稿添加到类型部分，应用程序将无法加载。

我相信，当我在我的 tyescript 文件中尝试以下任何操作时，应用程序不会加载该类型。

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

当我声明它不会加载时： * 页面显示“无法获取 /”

控制台错误 - 加载资源失败：服务器响应状态为 404 ()

我最初使用 yarn 来安装这两个包，我确实看到它们存在于我的 package.json 文件中。

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

ng 版本：

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

编辑： - 更改了 tsconfig.json

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

我仍然遇到与上述相同的错误。

【问题讨论】：

Add custom typings files to Angular CLI的可能重复

不重复查看编辑。

【参考方案1】：

如果您尝试使用 WKT，那么您只需执行以下操作：

安装

GeoJSON terraformer-wkt-parser

您需要做的就是将以下内容添加到您的 TypeScript 文件中：

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

x = WKT.parse(someVar);