TypeScript学习之路一：安装.基础类型.变量声明.运算符.条件语句

素颜马尾好姑娘i 2021-08-14 00:27 260阅读 0赞

## 1：安装TypeScript ##

有两种主要的方式来获取TypeScript工具：

*  通过npm（Node.js包管理器）
 *  安装Visual Studio的TypeScript插件

针对使用npm的用户：

> npm install -g typescript

针对 Visual Studio用户

1、下载 [Visual Studio Code][]。

2：在左侧窗口中点击当期编辑的代码文件，选择 **open in command prompt**（在终端中打开）

# 2：TypeScript 基础类型 #

类型分类：

>               任意类型        声明为 any 的变量可以赋予任意类型的值   any
> 
>               数字类型         它可以用来表示整数和分数。   let binaryLiteral: number = 6; // 二进制
> 
>               字符串类型     let name: string = "Runoob";   一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（\`）来定义多行文本和内嵌表达式。
> 
>               布尔类型        表示逻辑值：true 和 false     let flag: boolean = true;       
> 
>               数组类型        声明变量为数组。
> 
>                                      // 在元素类型后面加上\[\]    let arr: number\[\] = \[1, 2\];
> 
>                                      // 或者使用数组泛型         let arr: Array<number> = \[1, 2\];
> 
>               元组             元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
> 
>                                   let x: \[string, number\];
> 
>                                    x = \['Runoob', 1\]; // 运行正常
> 
>                                    x = \[1, 'Runoob'\]; // 报错 
> 
>                                    console.log(x\[0\]); // 输出 Runoob
> 
>               枚举              枚举类型用于定义数值集合。
> 
>     enum Color {Red, Green, Blue};
>     
>                       let c: Color = Color.Blue;
>     
>                       console.log(c);    // 输出 2
> 
>               null                表示对象值缺失。
> 
>               undefined     用于初始化变量为一个未定义的值
> 
>               never             never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
> 
>               void              用于标识方法返回值的类型，表示该方法没有返回值。
> 
>     function hello(): void {
>        
>                       alert("Hello Runoob");
>                  
>                    }

Null 和 Undefined
    null
    
    在 JavaScript 中 null 表示 "什么都没有"。
    
    null是一个只有一个值的特殊类型。表示一个空对象引用。
    
    用 typeof 检测 null 返回是 object。
    undefined
    
    在 JavaScript 中, undefined 是一个没有设置值的变量。
    
    typeof 一个没有值的变量会返回 undefined。
    
    Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型，示例代码如下：
    
    // 启用 --strictNullChecks
    let x: number;
    x = 1; // 运行正确
    x = undefined;    // 运行错误
    x = null;    // 运行错误
    
    上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型，示例代码如下：
    
    // 启用 --strictNullChecks
    let x: number | null | undefined;
    x = 1; // 运行正确
    x = undefined;    // 运行正确
    x = null;    // 运行正确

never 类型
    
    never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：
    
    let x: never;
    let y: number;
    
    // 运行错误，数字类型不能转为 never 类型
    x = 123;
    
    // 运行正确，never 类型可以赋值给 never类型
    x = (()=>{ throw new Error('exception')})();
    
    // 运行正确，never 类型可以赋值给 数字类型
    y = (()=>{ throw new Error('exception')})();
    
    // 返回值为 never 的函数可以是抛出异常的情况
    function error(message: string): never {
        throw new Error(message);
    }
    
    // 返回值为 never 的函数可以是无法被执行到的终止点的情况
    function loop(): never {
        while (true) {}
    }

###  3：TypeScript 变量声明 ###

var uname = "Runoob";
    var score1 = 50;
    var score2 = 42.50;
    var sum = score1 + score2;
    console.log("名字: " + uname);
    console.log("第一个科目成绩: " + score1);
    console.log("第二个科目成绩: " + score2);
    console.log("总成绩: " + sum);
    
    
    名字: Runoob
    第一个科目成绩: 50
    第二个科目成绩: 42.5
    总成绩: 92.5

## 变量作用域 ##

变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：

*  **全局作用域** − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
 *  **类作用域** − 这个变量也可以称为 **字段**。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
 *  **局部作用域** − 局部变量，局部变量只能在声明它的一个代码块

# 4:TypeScript 运算符 #

算术运算符
    
    var num1:number = 10
    var num2:number = 2
    var res:number = 0
       
    res = num1 + num2
    console.log("加:        "+res);
    
    res = num1 - num2;
    console.log("减: "+res)
    
    res = num1*num2
    console.log("乘:    "+res)
    
    res = num1/num2
    console.log("除:   "+res)
       
    res = num1%num2
    console.log("余数:   "+res)
    
    num1++
    console.log("num1 自增运算: "+num1)
    
    num2--
    console.log("num2 自减运算: "+num2)
    
    加:        12
    减: 8
    乘:    20
    除:   5
    余数:   0
    num1 自增运算: 11
    num2 自减运算: 1

关系运算符
     
    var num1:number = 5;
    var num2:number = 9;
     
    console.log("num1 的值为: "+num1); 
    console.log("num2 的值为:"+num2);
     
    var res = num1>num2 
    console.log("num1 大于n num2: "+res)
     
    res = num1<num2 
    console.log("num1 小于 num2: "+res)  
     
    res = num1>=num2 
    console.log("num1 大于或等于  num2: "+res)
     
    res = num1<=num2
    console.log("num1 小于或等于 num2: "+res)  
     
    res = num1==num2 
    console.log("num1 等于 num2: "+res)  
     
    res = num1!=num2  
    console.log("num1 不等于 num2: "+res)
    
    
    num1 的值为: 5
    num2 的值为:9
    num1 大于n num2: false
    num1 小于 num2: true
    num1 大于或等于  num2: false
    num1 小于或等于 num2: true
    num1 等于 num2: false
    num1 不等于 num2: true

逻辑运算符
    
    var avg:number = 20; 
    var percentage:number = 90; 
     
    console.log("avg 值为: "+avg+" ,percentage 值为: "+percentage);
        
    var res:boolean = ((avg>50)&&(percentage>80)); 
    console.log("(avg>50)&&(percentage>80): ",res);
     
    var res:boolean = ((avg>50)||(percentage>80)); 
    console.log("(avg>50)||(percentage>80): ",res);
     
    var res:boolean=!((avg>50)&&(percentage>80)); 
    console.log("!((avg>50)&&(percentage>80)): ",res);
    
    
    avg 值为: 20 ,percentage 值为: 90
    (avg>50)&&(percentage>80):  false
    (avg>50)||(percentage>80):  true
    !((avg>50)&&(percentage>80)):  true

位运算符
    
    var a:number = 2;   // 二进制 10 
    var b:number = 3;   // 二进制 11
        
    var result; 
            
    result = (a & b);     
    console.log("(a & b) => ",result)
                
    result = (a | b);          
    console.log("(a | b) => ",result)  
            
    result = (a ^ b);  
    console.log("(a ^ b) => ",result);
        
    result = (~b); 
    console.log("(~b) => ",result);
     
    result = (a << b); 
    console.log("(a << b) => ",result); 
     
    result = (a >> b); 
    console.log("(a >> b) => ",result);
     
    result = (a >>> 1); 
    console.log("(a >>> 1) => ",result);
    
    
    (a & b) =>  2
    (a | b) =>  3
    (a ^ b) =>  1
    (~b) =>  -4
    (a << b) =>  16
    (a >> b) =>  0
    (a >>> 1) =>  1

赋值运算符
    
    
    var a: number = 12 
    var b:number = 10  
     
    a = b 
    console.log("a = b: "+a)
     
    a += b
    console.log("a+=b: "+a)
     
    a -= b 
    console.log("a-=b: "+a)
     
    a *= b 
    console.log("a*=b: "+a)
     
    a /= b 
    console.log("a/=b: "+a)    
     
    a %= b 
    console.log("a%=b: "+a)
    
    
    a = b: 10
    a+=b: 20
    a-=b: 10
    a*=b: 100
    a/=b: 10
    a%=b: 0

三元运算符 (?)
    
    
    var num:number = -2 
    var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
    console.log(result)
    
    
    小于 0，或等于 0

类型运算符
    
    var num = 12 
    console.log(typeof num);   //输出结果: number
    
    
    其他运算符
    
    var x:number = 4 
    var y = -x; 
    console.log("x 值为: ",x);   // 输出结果 4 
    console.log("y 值为: ",y);   // 输出结果 -4
    
    
    x 值为:  4
    y 值为:  -4
    
    
    字符串运算符: 连接运算符 (+)
    
    var msg:string = "RUNOOB"+".COM" 
    console.log(msg)
    
    
    RUNOOB.COM

# TypeScript 条件语句 #

*  **if 语句** \- 只有当指定条件为 true 时，使用该语句来执行代码
 *  **if...else 语句** \- 当条件为 true 时执行代码，当条件为 false 时执行其他代码
 *  **if...else if....else 语句**\- 使用该语句来选择多个代码块之一来执行
 *  **switch 语句** \- 使用该语句来选择多个代码块之一来执行

if
    
    var  num:number = 5
    if (num > 0) { 
       console.log("数字是正数") 
    
    
    
    数字是正数
    
    
    
                    if-else
    
    
    var num:number = 12; 
    if (num % 2==0) { 
        console.log("偶数"); 
    } else {
        console.log("奇数"); 
    }
    
    偶数、
    
    
    
                     if...else if....else 语句
    
    var num:number = 2 
    if(num > 0) { 
        console.log(num+" 是正数") 
    } else if(num < 0) { 
        console.log(num+" 是负数") 
    } else { 
        console.log(num+" 不是正数也不是负数") 
    }
    
    2 是正数
    
    
    
                    switch…case 
    
    
    
    var grade:string = "A"; 
    switch(grade) { 
        case "A": { 
            console.log("优"); 
            break; 
        } 
        case "B": { 
            console.log("良"); 
            break; 
        } 
        case "C": {
            console.log("及格"); 
            break;    
        } 
        case "D": { 
            console.log("不及格"); 
            break; 
        }  
        default: { 
            console.log("非法输入"); 
            break;              
        } 
    }
    
    优

[Visual Studio Code]: https://code.visualstudio.com/