「極速上手TypeScript」TypeScript基礎語法

ice_moss發表於2021-10-24
TypeScript
系列文章：
「極速上手TypeScript」TypeScript基礎語法 「極速上手TypeScript」TypeScript進階“物件” 「極速上手TypeScript」TypeScript函數語言程式設計 「極速上手TypeScript」TypeScript之Promise 「極速上手TypeScript」TypeScript之介面、類、泛型
[TOC]

一、TypeScript

介紹：

  • TypeScript是微軟開發的一門程式語言(簡稱TS)，是JavaScript的一個超集。
  • TypeScript擴充套件了JavaScript的語法，新增了一些新的遵循ES6規範的語法，具有基於類的物件導向程式設計的特性。任何已經存在的JavaScript程式可以不加任何改動的在TypeScript執行環境下執行。

  • TypeScript的優勢

    1. 支援部分ES6規範
    2. 型別檢查
    3. 物件導向的特性

    二、基本資料型別

    在程式語言都有:整型、浮點、布林、字元、字串、複數、抽象資料型別
    但在TS中我們將整型和浮點歸為:number

    在TS中·有如下型別：
    布林型別 boolean
    數字型別 number
    字串型別 string
    陣列型別 array
    元組型別 tuple
    列舉型別 enum
    任意型別 any
    null 和 undefined
    void型別
    never型別

  1. 常量(const)
    常量的定義和賦值我們使用關鍵字const,使用const的常量不能被重新賦值，例如下面程式碼中，anExampleVariable不可以被給予其他賦值

    const anExampleVariable = "Hello World"
console.log(anExampleVariable)

    列印結果：

    Hello World

    注：console.log()為列印函式

  2. 變數

    let num = 123   //let num: number = 123
num = 3.14
console.log(num)

    列印結果：3.14
    接著看小面：

    let anExampvalue = 'ice_moss'
console.log(anExampvalue)
anExampvalue = "TypeScript"
console.log(anExampvalue)

    列印結果：

    ice_moss
TypeScript

  3. literal type
    literal 型別使我們能具體規定變數允許的資料型別
    看例子：

    let answer:'yes'| 'no'| 'maybe' = 'no'
console.log(answer)
answer = 'maybe'
console.log(answer)

    列印結果：

    no
maybe

    又或者：

    let httpstatus: '400' | '404' | '500' = '500'
console.log(httpstatus)
httpstatus = '404'
console.log(httpstatus)
let s: string = httpstatus  //使用該方法可以將literal type變為string，但不能變為其他資料型別(如：number、boolean)
s = 'ice_moss'
console.log(s)

    列印結果：
    500
    404
    ice_moss
    當然不同型別也可混用literal type

    //不同型別也可混用literal type
let httpstatusvalue: 404 | "ice_moss" | boolean | undefined = 404
console.log(httpstatusvalue)

  4. any
    我們知道TS是JS的超集，但JS沒有過多的語法約束和提示，這使得JS開發人員的很多的工作量都在尋找JS的語法上，這也是TS誕生的原因；迴歸正題any就是將TS是語法約束去掉。下面看程式碼：

    //any of type 會失去語法約束
let a: any
console.log(a)
a = 1
console.log(a)
a = 2
console.log(a)
let b: undefined
console.log(b)
列印結果：
```ts
undefined 
1
2
undefined

    undefined：不明確的型別

三、邏輯控制

下面我們來了解一下邏輯控制，在TS中有if、if-else、switch、for、while、try-catch
下面我們來一一介紹：
在介紹之前我們需要先來了解一下函式定義的基本語法

//函式
function Test(){
……
//函式體
……
}

其實也沒什麼特別的地方

  1. if/if-else
function processHttpStatus(s:
200 | 404 | 500 | '200' | '404' | '500'){
//一律使用===，!==
    if(s === 200){
        console.log('ok')
    }else  if(s === 404){
        console.log('not found')
    }else  if(s === 500){
        console.log('internrl server error')
    }else  if(s === '200'){
        console.log('ok')
    }else  if(s === '404'){
        console.log('not found')
    }else  if(s === '500'){
        console.log('internrl server error')
    }//else { 這裡不需要，引數列表中沒有，呼叫其他值，會報錯
    // console.log('unknwn error')
    //}
}

當然，對應這個函式我們有最佳化的方法：

function processHttpStatusdata(s:
200 | 404 | 500 | '200' | '404' | '500'){
//把number轉成string
    let statusStr = ''
    if (typeof s === 'number'){  //需要使用關鍵字typeof
        statusStr = s.toString()
    }else{
        statusStr = s
    }
    if(statusStr === '200'){
        console.log('ok')
    }else  if(statusStr === '404'){
        console.log('not found')
    }else  if(statusStr === '500'){
        console.log('internrl server error')
      }
}

我們呼叫函式：
processHttpStatusdata(404)
輸出結果：

not found

這就是if/if-else

  1. switch

我們還是使用上面例子來講解

function processHttpStatusValue(s:
200 | 404 | 500 | '200' | '404' | '500'){
//把string轉成number
    let statusStr = 0
    if (typeof s === 'string'){
        statusStr = parseInt(s)
    }else{
        statusStr = s
    }
    switch(statusStr){
        case  200:
            console.log('ok')
            break
        case  404:
            console.log('not found')
            break
        case  500:
            console.log('internl server error')
            break
      }
}

函式呼叫：
processHttpStatusValue(‘500’)
輸出結果：

internl server error

  1. for/while
    下面是一個求1~100之和的例子
    （1). 基於for

    function mulData(){
    let sum = 0
    for(let i = 0; i <= 100; i++){
        sum += i
    }
console.log(sum)
}

    呼叫：mulData()
    輸出：5050

    （2). 基於while

    function sumValue(){
 let sum = 0
 let i = 1
 while(i <= 100){
     sum += i
     i++
 }
 console.log(sum)
}

    呼叫： sumValue
    輸出：5050

  2. try-catch

function cycle(){
    let sum = 0
    for(let i = 0; i <= 100; i++){
        try{
            sum += i
            if (i % 5 === 0){
                throw  `bad number ${i}`
            }
    }catch (err){
        console.error(err)
        console.log('this is err')
    }
 }
console.log(sum)
}

四、列舉型別

我們定義一個：

enum  HTTPStatus{
OK,
NOT_FOUND,
INTERNAR_SERVER_ERROR,
}

接著定義一個函式：

function processHTTPStatus(s:HTTPStatus){
    if(s === HTTPStatus.OK){
        console.log('good response')
    }else{
        console.log('bad response')
      }
    console.log(s)
    }
//呼叫：
processHTTPStatus(HTTPStatus.OK)
//輸出：
good response
0

輸出0的原因是在enum HTTPStatus中：

OK,  //0
NOT_FOUND,  //1
INTERNAR_SERVER_ERROR,  //2

當然，我們還可以直接在enum HTTPStatus{}給成員賦值，看下面：

enum  HTTPStatusValue{
OK = 200,
NOT_FOUND = 404
INTERNAR_SERVER_ERROR = 500
}

function processHTTPStatusValue(s:HTTPStatusValue){
    if(s === HTTPStatusValue.OK){
        console.log('good response')
    }else{
        console.log('bad response')
    }
    console.log(s)
}

呼叫：

processHTTPStatusValue(HTTPStatusValue.OK)
// 輸出：
 good response
 200

那麼有人會問，如果我不像讓數字輸出，我們只希望輸出我們成員的名稱怎麼辦；這裡的方法也簡單，看下面：

 function processHttpStatusvalue(s: HTTPStatusValue){
    //I WANT PRINT INTERNAR_SERVER_ERRO
    console.log(HTTPStatusValue[s])
    const str: string = HTTPStatus[s]
    }
//呼叫
processHttpStatusvalue(HTTPStatusValue.INTERNAR_SERVER_ERROR)
// 輸出結果：
 'INTERNAR_SERVER_ERROR'
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章