typescript(六) 類型聲明及擴展

ts的類型聲明有兩個特征：

• 在ts開發中，為了使用一些只有js版本的庫，可以通過使用類型聲明，在ts文件中直接使用庫。
• 類型聲明的代碼在編譯后會被刪除，不會影響真正的代碼

1. 類型聲明

1. 基本類型聲明

對於變量，函數，類，type，接口的聲明

declare let name: string;
declare function getName(params: string):void;
declare class  Animal{name: string}
interface Person{
  name: string
}
type User = {
  name: string
}

2. 外部枚舉聲明

declare enum Season {
  SPRING,
  SUMMER,
  AUTUMN,
  WINTER
}
let seacons = [
  Season.SPRING,
  Season.SUMMER,
  Season.AUTUMN,
  Season.WINTER
]
// 常量枚舉
declare const enum Season2 {
  SPRING,
  SUMMER,
  AUTUMN,
  WINTER
}

3. 命名空間聲明-namespace

主要用於自定義聲明含有很多屬性的全局變量，如jquery庫的$

// $作為對象時
declare namespace $ {
  function ajax(url: string, settings:any):void;
  let name: string;
  namespace fn {
    function extend(object: any):void
  }
}
// 示例
$.ajax('./url', {})
// $作為函數時
declare function $(selector: string): HTMLElement;
// 示例
$('#root')

2. 類型聲明文件

類型聲明的文件的后綴為 .d.ts。

對應的tsconfig.json中的相關配置參數有：

include: [
    "./src/**/*" // 表示ts編譯時針對src文件夾下的所有的.ts后綴的文件,
    "./types/**/*"
]    

如果不設置該屬性，則默認編譯所有文件夾下的文件。

1. 自定義第三方類型聲明文件

在引入文件定義查找路徑的規則時，需要在tsconfig.json中的compilerOptions中配置paths+baseUrl。

"baseUrl": "./",  /* 解決相對路徑；設置paths時，該屬性必須存在*/
"paths": {
    "*": ["types/*"]
},     /* import引入文件查找對應的聲明文件時的相對於baseUrl的路徑*/
    

src/index.ts

import * as jQuery from 'jquery';

jQuery.default.ajax('/users', {});

安裝jquery

npm install -S jquery

自定義jquery的聲明文件： types/jquery.d.ts

declare function jQuery(params:string): HTMLElement;
declare namespace jQuery {
  function ajax(url: string, setting: any): void;
}
export default jQuery;

2. 第三方類型聲明文件庫

類型聲明文件的查找優先級

1. 根據配置文件的paths查找自定義的類型聲明文件，如果無，向下
2. 查找node_modules/XXX/package.json中types字段，如果無，向下
3. 查找node_modules/XXX/index.d.ts
4. 查找node_modules/@types/XXX/index.d.ts

對於常用的js庫的類型聲明文件，有現成的聲明文件@types/*。

示例：

1. 安裝@types/jquery

2.直接使用

⚠️： 如果自定義的類型聲明文件也存在時，會使用自定義的類型聲明文件

import * as jQuery from 'jquery';

jQuery.ajax('./uers');

3. 類型聲明擴展

本質上是擴展目標對象的屬性值

1. 擴展全局變量-declare global

當前文件中使用了export關鍵字，為局部文件，需要在該文件中擴展全局變量

export{};
declare global {
  interface String {
    double(): string;
  }
  interface Window {
    myname: string;
  }
}

String.prototype.double = function(){
  return this.toLowerCase() + this;
}
console.log('lee'.double());


window.myname = "hello world"

2. 使用命名空間擴展

• 使用命名空間擴展類

給類添加屬性

class Form {
  username: Form.Item = ""; //Form在此處用作命名空間
  password: Form.Item = "";
}

// 使用declare時，內部不需要export；
// declare已經表明可以被外部使用
declare namespace Form {
  class Item{}
}
// 或者
/*
namespace Form {
  export class Item{}
}
*/
let form: Form = {
  username: "",
  password: ""
}

• 使用命名空間擴展函數

給函數添加屬性

declare function JQuery(selector: string): HTMLElement;
declare namespace JQuery {
  let name: string;
}

• 使用命名空間擴展枚舉

擴展枚舉值的選項

enum Color {
  RED=1,
  BLUE
}
declare namespace Color {
  const GREEN = 3;
  const VIOLET = 4;
}
let color = Color.GREEN;
console.log(color)