我的TypeScript筆記

       去年換工作去參加其他公司面試,很多公司都問你會ts嗎?瞭解ts嗎?,第一家問的我一臉矇蔽樣,很老實的我回答說我不知道沒有了解過,面試官一副鄙視樣很受打擊,回來之後我就網上查詢搜索ts,搜索出來的原來ts是TypeScript ,是javascript的超集,所有使用JavaScript實現的東西TypeScript都能實現 ,  TypeScript現在用的已經很廣泛了,無論你使用ng、React還是Vue都可以使用TypeScript來實現的你JavaScript代碼,原來我真的落後咯,於是我就開始好好的學習TypeScript,只要你有javascript基礎就可以很愉快的學習這門新技術。

      TypeScript不同於javascript的是它是強類型的,必須要定義類型(其實不用定義也可以,他會被當作javascript編譯,但是這樣就會顯得我們不專業),以下就是我學習typescript總結的一些筆記,希望對應看到我博客的碼農有所幫助(文采不好,希望理解)。

  1. 安裝、
  1. 先按照node
  2. npm install  typescript  -g 全局安裝
  3. tsc --version
  1. 搭建typescript項目
    1. 新建一個文件夾然後,npm init -y來初始化項目,生成package.json文件。
    2. 創建tsconfig.json文件,在終端中輸入tsc --init:它生成一個TypeScript項目的配置文件,可以通過讀取它來設置TypeScript編譯器的編譯參數
    3. 裝@types/node,使用npm install @types/node --dev-save進行安裝。這個主要是解決模塊的聲明文件問題。
    4. 編寫HelloWorld.ts文件,然後進行保存,代碼如下。

             var a:string = "HelloWorld"

              console.log(a)

    1. 在Vscode的任務菜單下,打開運行生成任務,(新版本在終端->運行生成任務,快捷鍵爲:ctrl+shift+b)然後選擇tsc:構建-tsconfig.json,這時候就會生成一個helloWorld.js文件
    2. 在終端中輸入node helloWorld.js就可以看到結果了。
  1. TypeScript 數據類型

Undefined :定義了一個變量,但沒有給他賦予任何值的時候,他就是Undefined類型

Number:數值類型;

string : 字符串類型;

Boolean: 布爾類型;

enum:枚舉類型;

enum fruit{

    nan = '蘋果',

    nv = '香蕉',

    yao= '哈密瓜'

}

 

any : 任意類型,一個牛X的類型;

void:空類型;如果是函數裏面使用就不返回任何東西

Array : 數組類型;

Tuple : 元祖類型;

Null :空類型。

  1. TypeScript函數

function findShuaiguo(age:number):string{

    return '找到了'+age+'歲的小帥哥'

}

var age:number = 18

var result:string = findShuaiguo(age)

console.log(result)

可選參數函數  ?

function findShuaiguo2(age:number  , stature?:string):string{

 

    let yy:string = ''

    yy = '找到了'+age+'歲'

    if(stature !=undefined){

        yy = yy + stature

    }

    return yy+'的小帥哥'

}

var result:string  =  findShuaiguo2(22,'身材高挑')

console.log(result)

有默認參數

function findShuaiguo2(age:number=18,stature:string='身材高挑'):string{

 

    let yy:string = ''

    yy = '找到了'+age+'歲'

    if(stature !=undefined){

        yy = yy + stature

    }

    return yy+'的小帥哥'

}

var result:string  =  findShuaiguo2()

console.log(result)

有剩餘參數的函數傳遞給函數的參數個數不確定

function findShuaiguo3(...xuqiu:string[]):string{

    let  yy:string = '找到了'

    for (let i =0;i<xuqiu.length;i++){

        yy = yy + xuqiu[i]

        if(i<xuqiu.length){

            yy=yy+'、'

        }

    }

    yy=yy+'的小帥哥'

    return yy

}

var result:string  =  findShuaiguo3('22歲','大長腿','瘦高瘦高','有型')

console.log(result)

  1. TypeScript有3種函數的定義方式

(1)、函數表達式

function add(n1:number,n2:number):number{

    return n1+n2

}

(2)、函數聲明式

var add = function(n1:number,n2:number):number{

    return n1+n2

}

console.log(add(1,4))

  1. 、箭頭函數

var add = (n1:number,n2:number):number=>{

    return n1+n2

}

console.log(add(1,4))

  1. 引用類型數組
  1. 、number類型的數組

Let  arr1:number[]

  1. 、字符串類型

Let  arr1:Array<string>

  字面量賦值法

Let  arr1:number[] = []

Let  arr2:number[] = [1,2,3,4,5]

Let  arr3:Array<string> = [“aaa”,”bbs”,”cccc”]

Let  arr4:Array<boolean> = [true,false,true]

構造函數賦值法

Let  arr1:number[] = new Array()

Let  arr2:number[] = new Array(1,2,3,4,5)

Let  arr3:Array<string> =new Array(“aaa”,”bbs”,”cccc”)

Let  arr4:Array<boolean> = new Array(true,false,true)

Let  arrtest:number[] = [1,2,true]  //錯誤的不允許這樣寫

元組

Let x:[string,number] 鍵值對應類型的

字符串的兩種類型

基本類型字符串:由單引號或者雙引號括起來的一串字符串。

引用類型字符串:用new 實例化的 String類型

let lydia:string = '哈哈哈'  //哈哈哈

let lydiaa:String = new String("lydia.com")   // [String: lydia.com]

  1. typescript引用類型日期對象

a、不傳任何參數  let  datetime:Date = new Date()  //打印當前日期時間

b、傳遞一個整數  let datetime2:Date = new Date(2000)   

//時間是從1970-01-01 00: 00:00 開始算的    這裏的2000就代表時間爲   1970-01-01 00:00:02 (2秒)

c、傳遞一個字符串

       Let datetime3:Date = new Date(‘2019-04-28 10:30:45’)   

       Let datetime4:Date = new Date(‘2019/04/28 10:30:45’)  

   Let datetime4:date = new Date(‘2019-04-28T10:30:45’) //T代表時間

   上面3個打印出來的結果是一樣的  

       let d:Date = new Date(year,month,day,hours,minutes,seconds,ms); //很少用找個

  1. typescript 正則使用

創建正則表達式也提供了兩種方法,一種是才採用new 關鍵字,另一種是採用字面量 的方式。RegExp接收2個參數,第一個代表條件  第二個代表時修飾符

修飾符:g是全局修飾符,i是忽略大小寫,m是多行模式。 

  1. let reg = new RegExp(‘abc’  ,  ’gi’)  //表示字符串規則裏面要包好abc字符
  2. Let reg2 = /abc/gi

RegExp中的常用方法

RegExp對象包含兩個方法:test( )和exec( )用於測試字符串匹配。

test(string) :在字符串中查找是否存在指定的正則表達式並返回布爾值,如果存在 則返回 true,不存在則返回 false。

exec(string) : 用於在字符串中查找指定正則表達式,如果 exec() 方法執行成功, 則返回包含該查找字符串的相關信息數組。如果執行失敗,則返回 null。

 

例如:reg.test(‘sdkfjskdfjsabc’)   返回true

          reg.exec(‘sdkfjskdfjsabc’’)   [ abc, index: 11, input: 'sdkfjskdfjsabc’' ]

以上是我的部分typescript筆記,後面我還會寫一個關於class和接口的筆記。敬請期待

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章