TypeScript經常使用知識之--模塊和類型組合

這是我參與8月更文挑戰的第8天，活動詳情查看：8月更文挑戰

由於Typescript的持續火爆，分享下TS的經常使用知識點，咱們一塊兒學習交流，一塊兒加油！

模塊

1.模塊在其自身的做用域裏執行，而不是在全局做用域裏；這意味着定義在一個模塊裏的變量，函數，類等等在模塊外部是不可見的，除非你明確地使用 export形式之一導出它們。

相反，若是想使用其它模塊導出的變量，函數，類，接口等的時候，你必需要導入它們，可使用 import形式之一。

2.模塊的導入使用import 而導出使用export

3.若是沒有import 或者 export 被 import "./a.ts" 將改變全局變量產生反作用，因此不推薦

1.導出

export const a: string = "1";
  // 導出函數
  export const fn = function (a: string) {};
  // 默認導出 字符串 (名字能夠省略)
  // export default "string";

  // 默認導出 對象 (名字能夠省略)
  // export default {
  // a:1,
  // b:'s'
  // }

  // 導出接口
  export interface Person {
    name: string;
  }

  // 導出類型
  export type Fish = {};

  // 導出類
  export class PoliceMan implements Person {
    name: string = "policeMan";
  }

  //導出重命名
  export {PoliceMan as PlM}

  //從新導出
  //先引入在更名從新導出
  export {A as B} from "./a";

  // 把多個模塊合併到一塊兒，先把其餘的地方的模塊引入進來，在聯合導出
  export * from "./StringValidator";
  export * from "./LettersOnlyValidator";
  export * from "./ZipCodeValidator";

  // commonjs 導出 validator.ts
  class Validator {
       isAcceptable(s: string) {
           return s.length === 5
       }
   }
  export = Validator;
複製代碼

2.導入

// 針對 export const a ='str' 的導入
 import { a } from './a'

// 針對 export default的導入
 import B from './b'

// 導入的重命名
 import {Aclass as A } from './a';
 A.fn();

// 具備反作用的導入,不推薦這樣可能會修改全局變量
 import "./my-module.js";

// commonjs 導入
 import zip = require("./validator.ts");
複製代碼

3.命名空間

export namespace zoom {
    export class Dog {
        eat() {}
    }

    export namespace moneyArea {
        export class Monkey {
            eat() {}
        }
    }
}
let dogOfZoom = new zoom.Dog();
let dogOfZoom1 = new zoom.moneyArea.Monkey();
    
// 命名空間別名
namespace Shapes {
    export namespace Polygons {
         export class Triangle {}
            export class Square {}
        }
 }

import polygons = Shapes.Polygons;
let sq = new polygons.Square();    
複製代碼

類型組合

類型在TS中很重要，因此有時候經過一些類型的組合會產生新的類型

1. any 組合類型

any和任何元素組合的都是any類型

function addOne(a: any) {
    return a + 1;
}

function sum(a: number, b: number) {
    return a + addOne(b);
}

let res2 = sum(1, 2); // any 類型

複製代碼

2.交叉類型

當交叉屬性的時候是取並集，可是當交叉對象的時候是取交集

interface X {
    name: string;
    age: number;
}

interface Y {
    gender: string;
}

// 這個時候取並集
type C = X & Y;

let res3: C = {
    name: "z",
    age: 11,
    gender: "male",
};

// 這個時候是取交集
type XX = string | boolean;
type YY = number | boolean;

type CC = XX & YY; // CC是boolean
let res4: CC = true;
複製代碼

3.聯合類型

interface X1 {
    name: string;
    age: number;
}

interface Y2 {
    gender: string;
    hasName: boolean;
}

// 這個時候取並集
type C1 = X1 | Y2;

// 能夠是 Y2 也能夠是X1類型
let res5: C1 = {
    hasName: false,
    gender: "male",
};

let res6: C1 = {
    name: "name",
    age: 11,
};
複製代碼

4.嵌套類型

interface DD {
    name: "z";
    age: 11;
    person: {
        canSwim: boolean;
    };
}

let d: DD["person"] = {
    canSwim: true,
};

複製代碼

5.克隆類型

經過keyof來克隆一個類型

interface Person6 {
    name: string;
    age: number;
    canSwim: boolean;
}

type ClonePerson6 = {
    // 必定要加keyof
    [key in keyof Person6]: Person6[key];
};
let res7: ClonePerson6 = {
    name: "string",
    age: 1,
    canSwim: false,
};
複製代碼

相關資料

• TypeScript 官網

你們喜歡的能夠看看個人專欄 (TypeScript經常使用知識) 我會盡可能保持天天晚上更新，若是喜歡的麻煩幫我點個贊，十分感謝

你們若是喜歡「算法」的話，能夠看看我分享的另一個專欄（前端搞算法）裏面有更多關於算法的題目的分享,但願能幫助你們更深的理解算法

文章內容目的在於學習討論與分享學習算法過程當中的心得體會，文中部分素材來源網絡，若有侵權，請聯繫刪除，郵箱 182450609@qq.com