Angualr中如何引入 · 原生js · 文件

Angualr中如何引入 · 原生js · 文件

这里算是一个记录吧，我从网上看了一点别人的关于这方面解释的文章：

• 有些文章写的不太对头。
• 有些文章写的还是 Angualr 1 的东西。
• 有些文章写的有些麻烦，改这个，改那个，看了不太对劲。

这里记录一下我成功的方法，用的是 AngualrCLI 版本 v12，也并没有出现 奇奇怪怪的编译不通过这啊那啊 的问题。

---

先贴一下我的tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  }
}

我没怎么具体配置过这个文件，一般都是走的默认配置。

---

OK，我们开始：

• 我们都知道，原生js加载之后，所有的通过function或者var定义的东西都会被提升到全局，也就是说我们在任何地方理应都是可以访问到这个函数或变量的。
• 所以，接下来无非就是引入了js，我怎么让typescript知道有这个玩意，并且我能用。

整体来说就两步：

第一步：在angular.json中引入js文件

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            
            ...
           
            "styles": [
              "src/assets/lib/cm/UI/css/render.css",
            ],
            "scripts": [
              "src/assets/lib/cm/UI/render.js" // 引入的js文件
            ]
              
            ...
            
          }
            
        ...
}

第二步：在使用declare到的组件中声明定义一下

1. 比如你在js文件中写了：

   function myFun() { }
   

   那就可以在angular的组件中声明：

   declare function myFun():void;
   

2. 如果是一个变量：

   var name = "";
   

   那就可以在angular的组件中声明：

   declare var name:string;
   

比如，jQuery的使用:

如果你不是通过npm下载的，那你就可以引入jQuery源文件，然后声明：

declare var $: unknown;
// 或者
declare jQuery: unknown;

接着正常使用就完事了。

具体的关于typescript如何声明可以看官网：typescript声明文件