typescript總結筆記二

一、泛型的認識

泛型可以簡單了解為類型變量，它是一種特殊的變量，隻用于表示類型而不是值。

二、定義一個簡單的泛型

• 1、定義泛型

  function identity<T>(arg: T): T {
      return arg;
  }           

  identity

  就叫泛型函數

• 2、直接調用這個函數(推薦)

  console.log(identity('hello'));
  console.log(identity(20));           

• 3、指定類型的調用

  console.log(identity<string>('hello'));
  console.log(identity<number>(20));
  console.log(identity<Array<number>>([1,2,3,4]));           

三、

Symbol

的使用

傳統的

javascript

中資料類型有七種

string

,

number

boolean

null

undefined

object

,及

ES6

中的

Symbol

,數組屬于

object

,函數屬于

object

資料類型

• 1、

  Symbol

  表示唯一的,建立一個

  Symbol

  必須建立對象的方式建立

  let sym1 = Symbol();
  let sym2 = Symbol('key'); //可以不寫key
  let sym3 = Symbol('key');           

• 2、兩個

  Symbol

  進行比較是

  false

  console.log(sym2== sym3); //false           

• 3、如果用

  Symbol

  表示對象的

  key

  隻能用

  []

  通路

  let obj1 = {
      [sym1]:'hello word',
      name:'zhansan'
  };
  console.log(obj1['name']);
  console.log(obj1[sym1]);           

• 4、可以用

  Symbol

  來做類裡面的函數名稱

  class C1{
      [sym1](){
          return 'C1'
      }
  }
  let c1 = new C1();
  console.log(c1[sym1]());           

• 5、使用

  Symbol.for()

  建立兩個相同的

  Symbol

  let sym4 = Symbol.for('key1');
  let sym5 = Symbol.for('key1');
  console.log(`sys4是否等于sym5:${sym4==sym5}`);           

• 6、

  Symbol.keyFor(xx)

  擷取一個

  Sysmbol

  的

  key

  console.log(`${Symbol.keyFor(sym4)}`); //結果是key1             

• 7、

  match

  對象的Symbol.match屬性，指向一個函數。當執行str.match(myObject)時

  class MyMatcher {
      [Symbol.match](string) {
          return 'hello world'.indexOf(string);
      }
      foo(string){
          return 'hello world'.indexOf(string);
      }
  }
  console.log('h'.match(new MyMatcher())) // 0
  console.log((new MyMatcher()).foo('h')) // 0           

• 8、更多關于

  Symbol

  的請查閱ES6中Symbol

四、關于疊代中的

for...of

與

for...in

的差別

• for..in

  疊代的是對象的鍵的清單
• 2、

  for..on

  疊代的出來的是值
• 3、

  ES3

  或者

  ES5

  中使用

  for..of

  會報錯

五、子產品的認識

javascript

開發過程中要使用子產品化開發一般使用

seajs

、

Require.js

類的處理,子產品在其自身的作用域裡執行,而不是在全局作用域裡,這意味着定義在一個子產品裡的變量,函數,類等等在子產品外部是不可見的。

• 1、兩個子產品之間的關系是通過在檔案級别上使用

  imports

  和

  exports

  建立的
• 2、任何聲明（比如變量，函數，類，類型别名或接口）都能夠通過添加

  export

  關鍵字來導出

  // 導出一個變量
  export const numberRegexp = /^\d+$/;
  
  //導出一個接口
  export interface StringValidator {
      isAcceptable(s: string): boolean;
  }
  
  // 導出一個類
  export class Person {
      name: string;
      age: number;
  
      constructor(name: string, age: number) {
          this.name = name;
          this.age = age;
      }
  
      say(): string {
          return `我的名字叫:${this.name}--,我今年:${this.age}`;
      }
  }
  
  // 導出一個函數
  export const foo = function foo(...arg): number {
      return arg.reduce((pre, next) => {
          return (pre + next)
      })
  }
  
  // 預設導出,一個檔案隻能有一個預設導出
  export default class Animal {
      private name: string;
      private color: string;
  
      constructor(name: string, color: string) {
          this.name = name;
          this.color = color;
      }
  
      cay():string{
          return `${this.color}的${this.name}在叫`;
      }
  }           

• 3、别的檔案引入這個檔案

  import Animal,{numberRegexp, StringValidator, Person, foo} from '檔案路徑';
  
  console.log(numberRegexp.test('123'));
  console.log(foo(1,2,3,4));
  
  let person = new Person('李四',20);
  console.log(person.say());
  
  let dog = new Animal('大黃狗','黃色');
  console.log(dog.cay());           

• 4、導入的時候定義别名,避免名字一樣的沖突

  import Animal,{numberRegexp as numReg, StringValidator, Person, foo} from '檔案路徑';           

六、使用命名空間

namespace

javascript

開發中一般定義一個對象,或者即使函數,

typescript

解決了這個問題,在命名空間裡面的東西,需要對外暴漏的就使用

export

,不需要的就不暴漏出去

• 1、定義的格式

  // 在命名空間裡面定義一系列的驗證器  
  namespace Validation {
      //定義一個數字的驗證器
      export const numberRegexp = /^[0-9]+$/;
      //定義一個字母的驗證器
      export const lettersRegexp = /^[A-Za-z]+$/;
  }           

• 2、使用

  // 使用 
  console.log(Validation.numberRegexp.test('123'));
  console.log(Validation.lettersRegexp.test('123'));           

• 3、命名空間分檔案的使用
  • 1、定義一個接口的命名空間

    ***Validation.ts檔案***
    namespace Validation {
        export interface StringValidator {
            isAcceptable(s: string): boolean;
        }
    }           

  • 2、定義一個實作上面這個命名空間的接口檔案

    ***LettersOnlyValidator.ts檔案***
    //下面三個正斜杠表示引入别的檔案
    /// <reference path="Validation.ts" />
    namespace Validation {
        const lettersRegexp = /^[A-Za-z]+$/;
        export class LettersOnlyValidator implements StringValidator {
            isAcceptable(s: string) {
                return lettersRegexp.test(s);
            }
        }
    }
    
    let letter = new Validation.LettersOnlyValidator();
    console.log(letter.isAcceptable('asdA'));           

• • ***Validation.ts檔案***
    export namespace Validation1{
        export const numberRegexp = /^[0-9]+$/;
    }           

  • import * as test from './Validation';
    console.log(test.Validation1.numberRegexp.test('123'));