typescript 點滴

1 extend的用法

const x = extend({ a: 'hello' }, { b: 42 });

 2只有在d.ts，你才能夠使用  export as 這樣子的語法。並且必須有namespace.

export const aaa = 132;
export const bbb = 132;
export as namespace ccc;

3 至今也不知道 安裝了@types/sizzle後。

export = Sizzle;

4 

class _BB {}
// 命名空間聲明，用於代碼提示
declare global {
　　declare namespace nn {
　　　　let BB: typeof _BB;
　　}
}
// 命名空間實際定義
window['nn'] = window.nn || {};
nn.BB = _BB

5

typeScript 有兩種模塊化方式，一種是使用 ES6 的 import/export 及其 TS 對這種語法的微小擴展；另外一種方式是使用 TS 特有的 namespace (命名空間)。在分析這兩種模塊化方式以前，我先推薦使用第一種方式，由於第二種方式涉及到模塊引用順序的問題(能夠經過 /// <reference path="..." /> 來解決，但感受不如 import 爽。

若是使用 namespace 方式的模塊化，那麼全部東西都是全局的，內部引用直接使用便可，TS 能識別出同一命名空間下 export 的內容；外部引用導入便可；全局使用(好比在頁面上的 <script> 內，把命名空間寫完整就好(僅仍然只能使用 export 的內容。

若是使用 ES6 模塊方式的模塊化，目前最好的方式可能就是掛到 window 上了，若是是在 Node 下，就須要掛到 global 上。若是要兼容，就得寫點代碼來判斷全局對象。通常來講，用 TypeScript 寫代碼，就已經決定了要模塊化，除非不多的時候須要在頁面的 <script> 中調用腳本中的某些對象，這種狀況往 window 上掛就行。若是是要作爲庫來發布，tsc 是能夠編譯生成 .d.ts 文件的，若是是引用 js，那就不存在靜態類型檢查的問題；若是是引用 ts，那就以模塊化的方式引用；若是想以全局的方式引用 ts，那就在在全局對象上掛一個入口對象，而後在文檔裏說明，使用前本身申明這個對象(不須要提供 .d.ts)，也就幾行代碼的事情，也不算麻煩。好比

declare global {
    interface Window {
        myEntry: EntryClass;
    }
} 

declare namespace Aaa{
    interface bbb {
    }
}
export {  Aaa }

第一種方式引入。

import { Aaa } from './m1.d';
const aaa: Aaa.bbb;

第二種方式引入。

例子

declare namespace Aaa{
    interface bbb {
    }
}
// export {  Aaa } 第二種方式引入這裏若是不註釋爲何會報錯。

/// <reference path="./m1.d.ts" />
這個/// 不寫好像也能檢測到，只是爲了代表前後順序。

const aaa: Aaa.bbb;

 

 

6  declare 和declare global

兩個的做用是同樣的,可是在vue-cli的中用的是declare global並且不能去掉globa.

7 不使用declare也是能夠的呀。也能夠在其餘模塊中使用呀。在簡單的typescript環境中。

能夠全局使用,可是在vue-cli中則不能夠全局使用。

8  namespace默認是全局的。

9 declare

你能夠經過 declare 關鍵字，來告訴 TypeScript，你正在試圖表述一個其餘地方已經存在的代碼（如：寫在 JavaScript、CoffeeScript 或者是像瀏覽器和 Node.js 運行環境裏的代碼）：
declare的後邊不能使用=後，只能生命其餘地方已經有的代碼，寫=號會報錯。

環境聲明就好像你與編譯器之間的一個約定，若是這些沒有在編譯時存在，可是你卻使用了它們，則事情將會在沒有警告的狀況下中斷。
環境聲明就好像是一個文檔。若是源文件更新了，你應該同步更進。因此，當你使用源文件在運行時的新行爲時，若是沒有人更新環境聲明，編譯器將會報錯。

　　

10 如下兩個是等效聲明, 第一個使用內聯註解，第二個使用接口：

如下兩個是等效聲明, 第一個使用內聯註解，第二個使用接口：

// Sample A
declare const myPoint: { x: number; y: number };

// Sample B
interface Point {
  x: number;
  y: number;
}
declare const myPoint: Point;

 11 生命一樣的接口

// Lib a.d.ts
interface Point {
  x: number,
  y: number
}
declare const myPoint: Point

// Lib b.d.ts
interface Point {
  z: number
}

// Your code
let myPoint.z // Allowed!

 

 12 enum的實現源碼

 

 13 type 的enum

enum Color {
  Red,
  Green,
  Blue
}

enum Color {
  DarkRed = 3,
  DarkGreen,
  DarkBlue
}

 

14 生命函數的兩種方式，一種是，註解方式，一種接口方式。

內聯類型註解

// variable annotation 變量註解
let sampleVariable: { bar: number };

// function parameter annotation 函數註解
function foo(sampleParameter: { bar: number }) {}

interface Foo {
  foo: string;
}

// Return type annotated as `: Foo`
function foo(sample: Foo): Foo {
  return sample;
}

interface ReturnString {
  (): string;
}
// 它能夠表示一個返回值爲 string 的函數：

declare const foo: ReturnString;

const bar = foo(); // bar 被推斷爲一個字符串。

爲了使指定可調用的類型簽名更容易，TypeScript 也容許你使用簡單的箭頭函數類型註解。例如，在一個以 number 類型爲參數，以 string 類型爲返回值的函數中，你能夠這麼寫：
const simple: (foo: number) => string = foo => foo.toString();

可實例化僅僅是可調用的一種特殊狀況，它使用  作爲前綴。它意味着你需用使用  關鍵字去調用它：
interface CallMeWithNewToGetString {
  new (): string;
}

// 使用
declare const Foo: CallMeWithNewToGetString;
const bar = new Foo(); // bar 被推斷爲 string 類型newnew

 15. keyof

http://www.softwhy.com/article-9151-1.html

16 字面量類型  使用實例

// 用於建立字符串列表映射至 `K: V` 的函數
function strEnum<T extends string>(o: Array<T>): { [K in T]: K } {
  return o.reduce((res, key) => {
    res[key] = key;
    return res;
  }, Object.create(null));
}

// 建立 K: V
const Direction = strEnum(['North', 'South', 'East', 'West']);

// 建立一個類型
type Direction = keyof typeof Direction;

// 簡單的使用
let sample: Direction;

sample = Direction.North; // Okay
sample = 'North'; // Okay
sample = 'AnythingElse'; // ERROR!

 17  當輸入參數是一個函數的時候，若是用ts約定。

const iTakeSomethingAndPassItAnErr = (x: (err: Error, data: any) => void) => {
  /* 作一些其餘的 */
};
iTakeSomethingAndPassItAnErr(() => null); // ok
iTakeSomethingAndPassItAnErr(err => null); // ok
iTakeSomethingAndPassItAnErr((err, data) => null); // ok

// Error: 參數類型 `(err: any, data: any, more: any) => null` 不能賦值給參數類型 `(err: Error, data: any) => void`
// iTakeSomethingAndPassItAnErr((err, data, more) => null);

 18 使用mixins

// 全部 mixins 都須要
type Constructor<T = {}> = new (...args: any[]) => T;

/////////////
// mixins 例子
////////////

// 添加屬性的混合例子
function TimesTamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

// 添加屬性和方法的混合例子
function Activatable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    isActivated = false;

    activate() {
      this.isActivated = true;
    }

    deactivate() {
      this.isActivated = false;
    }
  };
}

///////////
// 組合類
///////////

// 簡答的類
class User {
  name = '';
}

// 添加 TimesTamped 的 User
const TimestampedUser = TimesTamped(User);

// Tina TimesTamped 和 Activatable 的類
const TimestampedActivatableUser = TimesTamped(Activatable(User));

//////////
// 使用組合類
//////////

const timestampedUserExample = new TimestampedUser();
console.log(timestampedUserExample.timestamp);

const timestampedActivatableUserExample = new TimestampedActivatableUser();
console.log(timestampedActivatableUserExample.timestamp);
console.log(timestampedActivatableUserExample.isActivated);

 

19 typescript中局部變量變爲全局變量的方法。

const { called } = new class {
  count = 0;
  called = () => {
    this.count++;
    console.log(`Called : ${this.count}`);
  };
}();

called(); // Called : 1
called(); // Called : 2

 

20 tslint 對ts語法中不容許帶數字，字符串，布爾聲明後直接賦值。由於ts已經能夠直接判斷出類型了。

Type boolean trivially inferred from a boolean literal, remove type annotation

 

21

interface DataHandleFunctionType {
  (param: []): [];
};
type DataHandleFunctionType = (param: []) => [];

 

 

 22 enum和接口的區別和聯繫

aa: CloudTypeEnum.Huawei = CloudTypeEnum.Huawei;

CloudTypeInterface.Huawei 接口這個使用只能表明字符串