「极速上手TypeScript」TypeScript基础语法

一、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

2. 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

3. 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

4. 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 协议》，转载必须注明作者和本文链接