TypeScript 基础（一）

ゞ浴缸里的玫瑰 2022-08-28 02:52 562阅读 0赞

### 文章目录 ###

*  1.认识 TypeScript ：
 *  2.变量和常量：
 *   *  2.1 什么是变量？
     *  2.2 变量的声明：
     *  2.3 变量的命名规则和规范：
     *   *  1）变量的命名规则（必须遵守）：
         *  2）变量的命名规范：
 *  3. ts 语言的数据类型
 *  4.运算符和表达式
 *   *  4.1 运算符：
     *  4.2 算术运算符：
     *  4.3 赋值运算符：
     *  4.4 自增自减运算符：
     *  4.5 符号运算符：
     *  4.6 关系运算符：
     *  4.7 逻辑运算符（真为 1，假为 0）：
     *  4.8 运算符的优先级：
 *  5.流程控制
 *   *  5.1 我们常见的流程：
     *  5.2 分支结构（选择~）：
     *  5.3 循环结构：
     *  5.4 跳出循环：

# 1.认识 TypeScript ： #

*  TypeScript 是一种由微软开发的编程语言，它是 js 的一个超集，向 JavaScript 添加了静态类型和基于类的面向对象（ 面对对象的三个特征：封装、继承、多态 ）；
 *  2012 年 10 月微软发布的首个公开版本的 TypeScript；
 *  2013 年 6 月，微软发布了正式版 ts0.9；
 *  截至目前（ 2021.09.01），ts 的版本是 4.3，4.4 是 beta 版本。

# 2.变量和常量： #

## 2.1 什么是变量？ ##

变量是存储信息的容器，其中的值（内容）是可变的。

## 2.2 变量的声明： ##

*  我们使用 var 关键字来声明变量；

var a;  // 声明变量
    a = 9;  // 对变量 a 赋值
    a = 10;  // 可以修改

*  es6 之后推出一个新的关键字 let 来声明有代码块属性的变量；

let b = 9;
    b = 10;  // 错误，无法为常量赋值

*  使用等号（ = ）赋值；

var a = 3;
    // 如果只声明变量，并没有赋值的话该变量变成 undefined
    var b;

*  一条语句中可以声明多个变量。

var a,b,c;
    var a = 3, b, c = 5;

## 2.3 变量的命名规则和规范： ##

### 1）变量的命名规则（必须遵守）： ###

*  不允许使用语言的关键字和保留字作为变量名；

var var = 3;  // 错误

*  不能以数字开头；

var 3 = 3；  // 错误
    var 3a = 3;  // 错误
    var a3 = 3;  // 正确

*  可以使用字母、数字、下划线（ \_ ）、美元符号（ $ ），组合成变量名。

var a3 = 3;  // 正确
    var a_3 = 3;  // 正确
    var a-3 = 3;  // 错误

### 2）变量的命名规范： ###

*  变量的声明要见名知意；
 *  命名法：下划线命名法、小驼峰命名法、大驼峰命名法。

// 命名不规范,见名不知意
    var imgaaa;  
    
    // 命名规范,见名知意
    var imgwidth;
    
    // 下划线命名法
    var imgwitdhandheight;  // 可读性不高
    var img_witdh_and_height;  // 可读性高
    
    // 小驼峰命名法
    var imgwitdhandheight;  // 可读性不高
    var imgWidthAndHeight;  // 小驼峰
    
    // 大驼峰命名法
    var imgwitdhandheight;  // 可读性不高
    var ImgWidthAndHeight;  // 大驼峰

# 3. ts 语言的数据类型 #

number、string、boolean、enum、any、undefined、null。

number: 数字
    string: 字符串
    boolean: 布尔值
    Array: 数组（只能存储相同的类型数据的有序集）
    Tuple: 元组（可以存储不同类型数据的有序集)
    enum: 枚举
    any: 任意类型
    undefined: 未定义
    null: 空

*  number：

int a = 3;  // Java 语言中声明整数
    float b = 3.3;  // Java 语言中声明浮点数
    var b: number = 4;  // ts 声明一个 number 数据类型的 b，并赋值

*  string：

var str: string = '你好！';  // 正确
    var str: string = "你好！";  // 正确
    // 在 ts 中单引号和双引号没有区别，都表示字符串
    var sta: string = '你好！";  // 错误，单双引号不能混用

*  boolean：

// true  false
    var a: boolean = true;

*  enum：

enum PRICE{
        
        "apple",
        "orange"
    }
    console.log(PRICE.apple)  // 输出 0 
    console.log(PRICE.orange)  // 输出 1

*  any：

var a: numble = 9;
    a = 'hello';  // 报错
    var b: any = 9;
    b = 'hello';  // 不报错，any 数据类型的变量，可以再次赋值为任意类型的值

*  undefined：

var a;  // a 的值就是 undefined

*  null：

// 与 undefined 相似，都是代表空，null 代表引用类型为空
    var n = null;

# 4.运算符和表达式 #

## 4.1 运算符： ##

*  \+，-，\*，/，%，>，<，&&，! 这些都是运算符；
 *  变量（常量）、运算符组成的式子就是表达式；

## 4.2 算术运算符： ##

*  运算符：+，-，\*，/，%（取余）；
 *  表达式：a + b；a \* b；50 / 3；6 % 4；
 *  功能：进行数学运算；
 *  注意：+ 这个符号的两侧如果出现字符串，则该 + 就变成了【字符串连接符】。

var a = 3;
    a + 3;  // 7
    a + '4'  // '34' 字符串的优先级最高，不管是什么类型通通转为字符串

## 4.3 赋值运算符： ##

*  运算符：“ = ”；
 *  表达式：a = 5;；
 *  功能：是把等号右边的值赋值给等号左边的变量；
 *  表达式的值：赋值之后变量的值；
 *  注意：等号左边必须是变量。

## 4.4 自增自减运算符： ##

*  运算符：“ ++ ”，“ – ”；
 *  表达式：a++，++a，a–，--a；
 *  功能：让变量进行自增或者递减；
 *  表值：a++（ ++ 在后，先赋值在递增 ），++a（ ++在前面，先递增再赋值 ）。

var a = 1;
    var b = a++;  // 1
    var c = 1;
    var d = ++c;  // 2

## 4.5 符号运算符： ##

*  运算符：+=，-=，\*=，/=；
 *  表达式：a += 3；类似于（ a = a + 3 ）；
 *  功能：先进行算术运算，再进行赋值运算；
 *  表达式的值：最后赋值之后变量的值。
 *  注意：在复合运算符 符号 之间不能出现空格。

## 4.6 关系运算符： ##

*  运算符：>，<，>=，<=，==，!=；
 *  表达式：a > 3；a == b；
 *  功能：进行大小关系的比较
 *  表达式的值：关系成立，表达式的值为 true，否则表达式的值是 false；
 *  注意：
    
     *  不同数据类型的值不能进行大小关系的比较
     *  当运算符的两边的都是字符串的时候，会按照字符串比较规则进行比较；

var a = 3;
    a > 4;  // false
    a < 4;  // true

## 4.7 逻辑运算符（真为 1，假为 0）： ##

*  运算符：&&，||，！（ 与，或，非 ）；
 *  表达式：3 && 5；
 *  功能：进行逻辑运算；
 *  表达式的值：
    
     *  && 两侧有一个为假时 式子就为假，两侧都为真时式子才为真；
     *  || 两侧有一个为真时 式子就为真，当两侧都为假时式子才为假；
     *  ！非真即假，非假即真。
 *  注意：所有代码层面的运算符号，统统为英文符号；
 *  逻辑运算符的短路现象：

var a = 3;
    a > 3 && a++;
    console.log(a);  //3
    // 在 && 运算符的表达式，当左侧表达式不成立时，右边的表达式不再运算；
    // 在 || 运算符的表达式，当左侧表达式成立时，右边的表达式不再运算；

## 4.8 运算符的优先级： ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-D5Y-w5aW9_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 5.流程控制 #

计算机执行程序的时候，是按照从上到下，从左到右，逐行进行。

## 5.1 我们常见的流程： ##

*  顺序；
 *  分支；
 *  循环。

## 5.2 分支结构（选择~）： ##

*  单分支  
    // 语法结构：

if(表达式){
        
        代码块
    }
    // 执行逻辑：当程序遇到 if 结构，首先会判断表达式的值，
    // 如果表达式的值为真，则执行大括号里的代码块；
    // 如果表达式的值为假，则直接跳过 if 结构，不执行大括号里的代码块。

*  二分支：

// 语法结构：
    if(表达式){
        
        代码块1
    }else{
        
        代码块2
    }
    // 执行逻辑：
    // 当程序遇到 if-else 结构时，首先计算表达式的值，
    // 如果表达式为真，则执行代码块 1；
    // 如果表达式为假，则执行代码块 2。

*  多分支：

// 语法结构：
    if(表达式1){
        
        代码块1
    }else if(表达式2){
        
        代码块2
    }else if(表达式3){
        
        代码块3
    }
    // 执行逻辑：
    // 当程序遇到 if-else if 结构时，首先会计算表达式 1 的值，
    // 如果表达式 1 为真，则执行代码块 1 ；
    // 如果表达式 1 为假，继续判断表达式 2 的值；
    // 如果表达式 2 为假，继续判断表达式 3 的值；
    // 如果表达式 3 为假，则继续执行其它分支 else 的代码。
    
    // 例子：
    // 成绩分布评级
    var a = 60;
    if(a > 80){
        
        console.log('优秀')；
    }else if(a >= 60){
        
        console.log('良好')；
    }else{
        
        console.log('不及格')；
    }

*  switch-case 语句：

// 语法结构：
    switch(val值){
        
        case val_1:
            代码块1；
            break；
        case val_2:
            代码块2；
            break；
        case val_3:
            代码块3；
            break；
    }
    // 执行逻辑：
    // 如果 val 值等于 val_1，则执行代码块 1；
    // 如果 val 值等于 val_2，则执行代码块 2；
    // 如果 val 值等于 val_3，则执行代码块 3；

## 5.3 循环结构： ##

*  while 循环结构；

// 语法结构：
    while(条件表达式){
        
        循环结构
    }
    // 执行逻辑：
    // 首先判断条件表达式，如果条件表达式为真，
    // 则执行循环语句，之后判断条件表达式，直到为假才停止。
    
    var a = 0;
    while(a < 0){
        
        console.log(a);
        a++;
    }

*  do-while 语句：

// 语法结构：
    do{
        
        循环语句
    }while(循环条件)

*  while 和 do-while 的区别：
    
     *  while 循环，先判断，后执行；
     *  do-while 循环，先执行，后判断；
     *  do-while 至少执行一次循环语句，而 while 不一定
 *  for 循环；

// 语句结构：
    for(表达式1; 表达式2; 表达式3){
        
        循环语句
    }
    // 执行逻辑：
    // 第一步：首先执行表达式 1；
    // 第二步：判断表达式 2 ，如果值为真，则执行循环语句，如果值为假，跳出循环；
    // 第三步：执行循环语句之后，在执行表达式 3 ；
    // 回到第二步，继续判断表达式 2 。

## 5.4 跳出循环： ##

*  break ：直接跳出当前循环；
 *  continue ：直接跳过本次循环（ continue 关键字以下的循环语句不再执行 ），继续下次循环
 *  return ：函数一旦遇到 return 语句就立即返回，后面的所有语句都不会被执行到了。从这个角度看，return 语句还有强制结束函数执行的作用。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-D5Y-w5aW9_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/fe28657e5c4543558c8285b3e76f846e.png