{"id":22903481,"url":"https://github.com/sawyerbutton/how-to-import-non-type-js-package-to-angular","last_synced_at":"2026-01-08T17:32:23.790Z","repository":{"id":120749438,"uuid":"152394002","full_name":"sawyerbutton/How-to-import-non-type-JS-package-to-Angular","owner":"sawyerbutton","description":null,"archived":false,"fork":false,"pushed_at":"2018-10-11T01:01:28.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-07T04:40:51.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sawyerbutton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-10T09:02:37.000Z","updated_at":"2018-10-11T01:01:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"7b8bdb6a-1ca2-4cd6-9a8c-fa8aae7b6f63","html_url":"https://github.com/sawyerbutton/How-to-import-non-type-JS-package-to-Angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FHow-to-import-non-type-JS-package-to-Angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FHow-to-import-non-type-JS-package-to-Angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FHow-to-import-non-type-JS-package-to-Angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FHow-to-import-non-type-JS-package-to-Angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sawyerbutton","download_url":"https://codeload.github.com/sawyerbutton/How-to-import-non-type-JS-package-to-Angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246598990,"owners_count":20803120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-14T02:36:59.120Z","updated_at":"2026-01-08T17:32:23.753Z","avatar_url":"https://github.com/sawyerbutton.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# How-to-import-non-type-JS-package-to-Angular\n\n## 如何在Angular中导入和使用非@type类型的JS库\n\n\u003e TypeScript是JavaScript的超集,可编译为纯JavaScript\n\n\u003e 但是TypeScript有自己的语法,函数和规定类型的变量,但是当要使用外部库(比如underscore)时,需要声明TypeScript的类型定义\n\n\u003e 在JavaScript中参数类型并不重要,因为在编写代码时不会出错(虽然可能在编译阶段报错),但TypeScript不允许向一个接收Number类型的数组传入String类型的变量\n\n\u003e 但是这并不意味着需要将JavaScript类库重写为TypeScript类库,TypeScript提供声明文件`(* .d.ts)`用于定义类型并标准化既存的JavaScript文件/库\n\n\u003e 随着TypeScript的发展,越来越多的JavaScript文件/库已经提供了TypeScript类型声明文件,只需要在[Type Search](https://microsoft.github.io/TypeSearch/)中搜索所期待的库并通过npm或yarn下载即可\n\n### 如何向Angular中导入包含TypeScript类型声明的库以及如何导入不包含类型声明的库\n\n\u003e 以unders举例来说,先通过包管理器安装`types/underscore`\n\n```bash\nnpm install --save @types/underscore\n```\n\n\u003e 在组件中引入underscore的模块\n\n```typescript\nimport * as _ from 'underscore';\n/**\n* OR simply:\n* import 'underscore';\n*/\n\nlet array = [1,2,3,4,5];\nlet lastNumber = _.last(array);\nconsole.log(lastNumber);\n// 5\n```\n\u003e 假设库`your-library`无法下载到types版本,亦即没有`(*.d.ts)`文件,\n\n\u003e 那么检测是否存在文件`src/typings.d.ts`,如若不存在则创建,在文件存在的条件下添加\n\n```\ndeclare module 'your-library'\n```\n\n\u003e 之后希望在TypeScript文件中使用时只需要\n\n```typescript\nimport * as yourPreferedName from 'your-library';\nyourPreferedName.method();\n```\n\n### 如何向Angular中导入不存在于npm或yarn库中的库或模块\n\n\u003e 情况下,开发Angular默认会使用NPM或者YARN其中一个作为项目的库管理器,并从`node_modules`中导入相应的`@type模块`应用于组件之中\n\n\u003e 但是总有一些状况导致项目开发需要的库并不能由npm或yarn导入,比如未发布的库或者私人开发的js模块等\n\n\u003e 更常见的状况是需要在Angular项目中使用非`@type类型`的JS库\n\n\u003e 使用Angular-cli启动的项目可以通过`Angular.json`文件进行配置外源性库或模块\n\n\u003e 假设外源性库`customPkg`放置在于src目录下的`assets/packages`目录下,则可以进行如下配置(位于angular.json)文件\n\n```json\n \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist/subscribe-observables-inangular\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"src/tsconfig.app.json\",\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": [\"../src/assets/customPkg/dist/index.js\"]\n          },\n```\n\n\u003e Angular-Cli会将`Angular.json`中指定的脚本`\"scripts\": [\"../src/assets/customPkg/dist/index.js\"]`库含在`scripts.bundle.js`中并自动添加到Angular程序中\n\n\u003e 同样,设置于`\"styles\": [\"src/styles.css\"]`属性中的样式也会被库含在`styles.bundle.js`中并自动添加到Angular程序中\n\n\u003e 在`src`文件目录下创建`typings.d.ts`文件并申明你所希望引入的库\n\n```JavaScript\ndeclare module 'customPkg'\n```\n\n\u003e 现在就可以在项目的组件中引入库并使用了\n\n```TypeScript\nimport * as yourPreferedName from 'customPkg';\nyourPreferedName.method();\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fhow-to-import-non-type-js-package-to-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsawyerbutton%2Fhow-to-import-non-type-js-package-to-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fhow-to-import-non-type-js-package-to-angular/lists"}