1. 程式人生 > 實用技巧 >ts簡單瞭解1

ts簡單瞭解1

TypeScript 是 JavaScript 的一個超集,支援 ECMAScript 6 標準。

執行步驟

 建立原始xx.ts檔案
 使用tsc xx.ts執行檔案生成xx.js檔案
 使用node xx.js命令執行js檔案
  • TS由模組 函式 變數 語句和表示式 註釋 組成

變數

  • 變數是一種使用方便的佔位符,用於引用計算機記憶體地址。我們可以把變數看做儲存資料的容器。
  • var [變數名] : [型別] = 值;

函式

function function_name(param1 [:datatype], ( param2 [:datatype])):return_type
{
    // 執行程式碼
}

物件

  1. Number

                               屬性
     MAX_VALUE   MIN_VALUE NaN NEGATIVE/POSTIVE_INFINITY 
     prototype(靜態屬性) [使用方式比較奇特]
     constructor:返回對建立此物件的 Number 函式的引用。
    
                         方法
       toExponential()把物件的值轉換為指數計數法。
       toFixed()把數字轉換為字串,並對小數點指定位數。
       toLocaleString()把數字轉換為字串,使用本地數字格式順序。
       toPrecision()把數字格式化為指定的長度。
       toString()把數字轉換為字串,使用指定的基數。數字的基數是 2 ~ 36 之間的整數。若省略該引數,則使用基數 10。
       valueOf()返回一個 Number 物件的原始數字值。
  1. String物件

                                屬性
             constructor:對建立該物件的函式的引用。
                 length:返回字串的長度。
             prototype:允許您向物件新增屬性和方法。
    
                                  方法
charAt():返回在指定位置的字元。
charCodeAt():返回在指定的位置的字元的 Unicode 編碼。
concat():連線兩個或更多字串,並返回新的字串。
indexOf():回某個指定的字串值在字串中首次出現的位置。
astIndexOf():從後向前搜尋字串,並從起始位置(0)開始計算返回字串最後出現的位置。
localeCompare()用本地特定的順序來比較兩個字串。
match()查詢找到一個或多個正則表示式的匹配。
replace()替換與正則表示式匹配的子串
search()檢索與正則表示式相匹配的值
slice()提取字串的片斷,並在新的字串中返回被提取的部分。
split()把字串分割為子字串陣列。
substr()從起始索引號提取字串中指定數目的字元。
substring()提取字串中兩個指定的索引號之間的字元。
toLocaleLowerCase()根據主機的語言環境把字串轉換為小寫,只有幾種語言(如土耳其語)具有地方特有的大小寫對映。
toLocaleUpperCase()據主機的語言環境把字串轉換為大寫,只有幾種語言(如土耳其語)具有地方特有的大小寫對映。
toLowerCase()字串轉換為小寫。
toString()返回字串。
toUpperCase()把字串轉換為大寫。
valueOf()返回指定字串物件的原始值。
  1. Array陣列物件
  • 定義

      var array_name[:datatype];        //宣告 
      array_name = [val1,val2,valn..]   //初始化    
      var array_name[:data type] = [val1,val2…valn]
     使用 Array 物件建立陣列。array 物件的建構函式接受以下兩種值:
     表示陣列大小的數值。var arr_names:number[] = new Array(4)  
     初始化的陣列列表,元素使用逗號分隔值。var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
     多維陣列:var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
    
  • 功能

陣列解構:把陣列元素賦值給變數
var arr = [12, 13];
var x = arr[0], y = arr[1]; // 將陣列的兩個元素賦值給變數 x 和 y

陣列迭代:就是遍歷陣列元素

                       方法
concat()連線兩個或更多的陣列,並返回結果。
every()檢測數值元素的每個元素是否都符合條件。
filter()檢測數值元素,並返回符合條件所有元素的陣列。
forEach()陣列每個元素都執行一次回撥函式。
indexOf()搜尋陣列中的元素,並返回它所在的位置。
join()把陣列的所有元素放入一個字串。
lastIndexOf()返回一個指定的字串值最後出現的位置,在一個字串中的指定位置從後向前搜尋。
map()通過指定函式處理陣列的每個元素,並返回處理後的陣列。
pop()刪除陣列的最後一個元素並返回刪除的元素。
push()向陣列的末尾新增一個或更多元素,並返回新的長度。
reduce()將陣列元素計算為一個值(從左到右)。
reduceRight()將陣列元素計算為一個值(從右到左)。
reverse()反轉陣列的元素順序。
shift()刪除並返回陣列的第一個元素。
slice()選取陣列的的一部分,並返回一個新陣列
some()檢測陣列元素中是否有元素符合指定條件。
sort()對陣列的元素進行排序。
splice()從陣列中新增或刪除元素。
toString()把陣列轉換為字串,並返回結果。
unshift()向陣列的開頭新增一個或更多元素,並返回新的長度。
  1. 元組

     var tuple_name = [value1,value2,value3,…value n]
     push() 向元組新增元素,新增在最後面。
     pop() 從元組中移除元素(最後一個),並返回移除的元素。
     解構元組:我們也可以把元組元素賦值給變數,var a=["name",12],var [x,y]=a
    
  2. 聯合型別

    聯合型別(Union Types)可以通過管道(|)將變數設定多種型別,賦值時可以根據設定的型別來賦值。Type1|Type2|Type3

  3. 介面

    • 介面是一系列抽象方法的宣告,是一些方法特徵的集合,這些方法都應該是抽象的,需要由具體的類去實現,然後第三方就可以通過這組抽象方法呼叫,讓具體的類執行具體的方法。
      interface interface_name { }

    • 例如定義了一個介面 IPerson,接著定義了一個變數 customer,它的型別是 IPerson。customer 實現了介面 IPerson 的屬性和方法。

    • 介面繼承 關鍵字:extend

      Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN

  4.   class class_name { 
         // 類作用域
                       }
    

    與c++一樣,資料成員具有欄位 屬性 方法 建構函式,同樣使用new關鍵字進行類的例項化。也支援繼承,不能繼承父類的私有屬性與方法以及建構函式。
    static 關鍵字:static 關鍵字用於定義類的資料成員(屬性和方法)為靜態的,靜態成員可以直接通過類名呼叫。

  5. 類和介面

    • 類可以實現介面,使用關鍵字 implements,並將 interest 欄位作為類的屬性使用。
  6. 鴨子型別(Duck Typing)[多型]

  7. 名稱空間

  • 如果我們需要在外部可以呼叫名稱空間中的類和介面,在類和介面新增 export 關鍵字。
  • 如果一個名稱空間在一個單獨的 TypeScript 檔案中,則應使用三斜槓 /// 引用它
  1. 模組
    模組使用模組載入器去匯入其它的模組。 在執行時,模組載入器的作用是在執行此模組程式碼前去查詢並執行這個模組的所有依賴。 大家最熟知的JavaScript模組載入器是服務於 Node.js 的 CommonJS 和服務於 Web 應用的 Require.js。
  • 模組匯出使用關鍵字 export 關鍵字,匯入模組需要使用import關鍵字
  1. 宣告檔案

有時需要使用其他的js庫,但是這些庫與ts的特性不相容,所以就需要將這些庫裡的函式和方法體去掉後只保留匯出型別宣告,而產生了一個描述 JavaScript 庫和模組資訊的宣告檔案。通過引用這個宣告檔案,就可以借用 TypeScript 的各種特性來使用庫檔案了。
declare 關鍵字來定義它的型別
宣告檔案以 .d.ts 為字尾
TypeScript 引入宣告檔案語法格式:/// <reference path = " runoob.d.ts" />

新增

  • 型別斷言(Type Assertion)型別斷言可以用來手動指定一個值的型別,即允許變數從一種型別更改為另一種型別。語法格式:

  • 除了全域性以及區域性的作用域 新增了類作用域

  • instanceof 運算子:用於判斷物件是否為指定的型別

  • for…of 、forEach、every 和 some 迴圈

  • 可選引數,可選引數使用問號標識?可選引數必須跟在必需引數後面。

          function buildName(firstName: string, lastName?: string) 
    
  • 預設引數 function function_name(param1[:type],param2[:type] = default_value) 也就是定義的時候賦初值

  • 剩餘引數:我們不知道要向函式傳入多少個引數,這時候我們就可以使用剩餘引數來定義。

    剩餘引數語法允許我們將一個不確定數量的引數作為一個數組傳入。
    函式的最後一個命名引數 restOfName 以 ... 為字首,它將成為一個由剩餘引數組成的陣列,索引值從0(包括)到 restOfName.length(不包括)
    標誌就是...restOfName
    
  • Lambda 函式(箭頭函式):( [param1, parma2,…param n] )=>statement;

  • 函式過載:如果引數型別不同,則引數型別應設定為 any。引數數量不同你可以將不同的引數設定為可選。

1人點贊 小白的前端之路