轉自

引言：Angular2開始採用TypeScript進行編碼。本文講述如何在Angular4專案中呼叫原生的 js 程式碼。

本文程式碼

程式碼使用環境：webstrom

呼叫過程可以歸納為：

• 引入 js 檔案到專案中
• 編寫 TypeScript 宣告檔案
• 在 .angular-cli.json 或 index.html 中配置 js 檔案（可以沒有） 然後，就可以呼叫到原生的 js 程式碼了。

其中，第三步可以沒有的原因是，有的 js 程式碼編寫符合各種規範（AMD，UMD等），在編寫好宣告檔案之後，可以直接通過 import的方式使用。import方式，js 程式碼會被一塊打包到一個檔案中。

什麼是TypeScript 宣告檔案？

TypeScript 宣告檔案是以 .d.ts 結尾的 ts 檔案，是 TypeScript 和 JavaScript 之間的橋樑。

TypeScript 號稱 JavaScript 的超集，這麼說，TypeScript 是相容 JavaScript 的，但令人遺憾的是，直接將 .js 檔案改為 .ts 檔案，大多數情況下會產生很多錯誤。而如果 js 的內容比較少，也不復雜，還是比較容易改的。一些簡單的 js ，只要把 var 改為let 就能夠正常編譯和運行了。

許多第三方 js 庫，動輒幾千行程式碼，總不能使用 TypeScript 去重寫一遍，這時候就需要編寫 TypeScript 宣告檔案。

雖然許多常用 js 庫已經自帶.d.ts 檔案，但實際上，有時候我們還是無法避免要編寫宣告檔案。比如一些偏僻的 js 程式碼；比如自己寫的 js 程式碼。

.angular-cli.json 的作用

angular-cli 的配置檔案，可以配置專案的目錄結構，構建方式等。

.angular-cli.json的script屬性

這個屬性用於配置全域性的 js，類似於html中的標籤。

直接在index.html中引入js

當不通過模組載入器載入（import），也不配置.angular-cli.json的script屬性時，能通過index.html引入js嗎？

按道理說是可以的。但 js 所在必須在構建時被原樣匯出，否則專案構建後js 不在 build 路徑（dist）下，從而導致引用失敗。符合這個條件的如 src/asset 資料夾。

需要注意的是，asset資料夾是專門裝載資原始檔的，比如圖片什麼的，任何檔案都會被複制過去，用來放置 js 程式碼庫，雖然也可以，但總覺得有一點點奇怪。

這個問題，我們可以通過在 .angular-cli.json 中再配置一個具有assets特性的目錄來解決。不過，angular-cli.json的script標籤能夠解決js的引入，似乎在html中直接引入就不是必須的了。

題外話：

Ionic 專案雖然大量使用了Angular，但它沒有使用Angularcli進行構建，所以，Ionic 中在 index.html使用

.angular-cli.json 更多配置，參考它的官網

建立Angular 4 專案

在cmd命令介面中執行命令：

ng new myApp

這將會使用 AngularCli （Angular命令列工具）建立一個名為 myApp 的Angular專案。 如果沒有安裝過 AngularCli，使用以下命令安裝：

npm install -g @angular/cli

注意，@angular/cli 和 angular-cli 是不同的，一些文章的命令不帶@，不帶@的 cli 版本落後，是 1.0 正式版之前的版本。 如果總是安裝失敗，可能需要檢查網路是否通暢，Python2安裝（使用cnpm安裝時，似乎並非必須），TypeScript，nodejs版本。

最後到 npm 的node_module 刪除Angular 殘餘檔案，重新安裝。

網路不通的解決方法：

1、翻牆 2、配置代理 3、使用cnpm代替npm

其中代理配置有兩種方法，一種是使用命令配置：

npm config set registry https://registry.npm.taobao.org

執行完畢後，會在使用者目錄下生成npmrc檔案。在其中存在代理配置。

另一種是直接到npm的安裝目錄（一般在nodejs的安裝目錄下，或者在C:\Users\xxx\AppData\Roaming\npm\node_modules中）

在npmrc檔案中新增：

registry https://registry.npm.taobao.org

通過 import 的方式配置

在ts檔案中使用import的方式匯入。

（1） 在專案中引入 moment.js 檔案

以日期格式化庫——moment.js為例，將此 js 複製到src/libs 目錄中。

沒有就建立。

（2） 編寫TypeScript 宣告檔案——moment.d.ts

在src/libs目錄下建立moment.d.ts檔案。並根據moment.js 的程式碼，為其編寫宣告程式碼。

宣告檔案內容：

這裡使用寫好的宣告檔案。自己寫任務艱鉅，同時並不是那麼好寫的。但是對於為自己的 js 程式碼編寫 .d.ts 檔案來說，這些知名的第三方庫的 .d.ts 檔案很成熟，具有很大的參考價值。（TypeScript 官網的文件說的並不是那麼清晰、詳細）

TypeScript官網宣告檔案的書寫：

建議同時參考其他知名 js 庫的 .d.ts 檔案來學習。因為實際的編寫往往比較複雜。

（3） 使用 moment 庫

在AppComponent元件中，匯入moment庫：

import * as moment from '../../libs/moment';

然後使用它：

export class AppComponent implements OnInit {
  title = 'app';
  ngOnInit(): void {
    const formatDate = moment().format('YYYY年MM月DD日');
    console.log(formatDate);
  }
}

ng serve -o，在控制檯中就能看到今天的日期了。

2. 使用 .angular-cli.json的方式配置

（1） 新增doglog.js檔案

在src/libs中建立doglog.js檔案，內容如下：

var dogLog = {
    erha: function (mess) {
        console.log("二哈" + mess);
    },
    chaiquan: function (mess) {
        console.log("柴犬" + mess);
    },
    hudiequan: function (mess) {
        console.log("蝴蝶犬" + mess);
    },
    demu: function (mess) {
        console.log("德牧" + mess);
    },
    tugou: function (mess) {
        console.log("土狗" + mess);
    }
};

(2) 編寫宣告檔案——doglog.d.ts檔案

src/libs中建立doglog.d.ts檔案，內容如下：

declare let dogLog: {
    erha: (mess: string) => void;
    chaiquan: (mess: string) => void;
    hudiequan: (mess: string) => void;
    demu: (mess: string) => void;
    tugou: (mess: string) => void;
};

(3) .angular-cli.json 中配置doglog.js

在script屬性中新增doglog.js 所在的路徑：

...
 
 "scripts": [
        "./libs/doglog.js"
      ],
...

然後就可以正常使用 doglog.js 中定義的東西了。

比如:

    dogLog.erha(': 臥槽二哈');
    dogLog.tugou(': 阿黃');

專案構建會Angularcli會自動將doglog.js 寫入一個js中。

一個完整的 .angular-cli.json 形如:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "rsa-angular"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "./jslibs/test1.js",
        "./jslibs/test2.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

其他說明

comment.js 庫可以直接在npm配置檔案package.json配置依賴，並使用npm install 命令安裝。然後正常使用。

這裡為了行文方便，使用它來說明如何編寫.d.ts 檔案，配置和呼叫。