「极速上手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 协议》,转载必须注明作者和本文链接
刻意学习
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
118
粉丝
88
喜欢
173
收藏
245
排名:367
访问:2.6 万
私信
所有博文
社区赞助商