• TypeScript基础内容（1）

    目录

    一：TypeScript 变量声明

    类型断言（Type Assertion）

    TypeScript 是怎么确定单个断言是否足够

    类型推断

    变量作用域

    二：TypeScript 运算符

    算术运算符

    关系运算符

    逻辑运算符

    短路运算符(&& 与 ||)

    位运算符

    赋值运算符

    三元运算符 (?)

    类型运算符

    typeof 运算符

    instanceof

    其他运算符

    负号运算符(-)

    字符串运算符: 连接运算符 (+)

    一：TypeScript 变量声明

    变量是一种使用方便的占位符，用于运用计算机内存地址。

    我们可以把变量当做存储数据的容器。

    TypeScript变量的命名规则是：

    • 变量名称可以包含数字和字母。
    • 除了下划线_和美元$ 符号外，不能包含其他特殊字符，包括空格。
    • 变量名不能以数字开头。

    变量使用前必须先声明，我们可以使用var来声明变量。

    我们可以使用以下四种方式来声明变量。

    声明变量的类型及初始值：

    var [变量名]:[类型]=值;

    例如：

    var uname:string ="Runoob";

    声明变量并初始化值，但不设置类型，该变量可以是任意类型：

    var [变量名]=值;

    例如：

    var uname="Runoob";

    声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值是undefined:

    var [变量名];

    例如：

    var uname;

    实例：

    1. var uname:string ="Runoob";
    2. var score1:number=50;
    3. var score2:number=32.5;
    4. var sum = score1+score2;
    5. console.log("名字: "+uname)
    6. console.log("第一个科目成绩: "+score1)
    7. console.log("第二个科目成绩: "+score2)
    8. console.log("总成绩: "+sum)

    注意：变量不使用name否则会与DOM中的全局window对象下的name属性出现了重名。

    使用tsc命令编译以上代码，得到如下JavaScript代码：

    1. var uname = "Runoob";
    2. var score1 = 50;
    3. var score2 = 42.50;
    4. var sum = score1 + score2;
    5. console.log("名字: " + uname);
    6. console.log("第一个科目成绩: " + score1);
    7. console.log("第二个科目成绩: " + score2);
    8. console.log("总成绩: " + sum);

    执行该JavaScript代码输出结果为：

    1. 名字: Runoob
    2. 第一个科目成绩: 50
    3. 第二个科目成绩: 42.5
    4. 总成绩: 92.5

    TypeScript遵循强类型，如果将不同的类型赋值给变量会编译错误，如下实例：

    var num :number="hello";//编译错误

    类型断言（Type Assertion）

    类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

    语法格式：

    <类型>值

    或：

    值 as 类型

    实例：

    1. var str ='1';
    2. var str2:number=<number><any> str  //str、str2 是 string 类型
    3. console.log(str2)

    TypeScript 是怎么确定单个断言是否足够

    当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。

    它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。

    编译后，以上代码会生成如下 JavaScript 代码：

    1. var str = '1';
    2. var str2 = str;  //str、str2 是 string 类型
    3. console.log(str2);

    执行输出结果为：

    1

    类型推断

    当类型没有给出时，TypeScript编译器利用类型推断来推断类型。

    如果由于缺乏声明而不能推断出类型，那么它的类型被视作为默认的动态any类型、

    1. var num=2;     // 类型推断为 number
    2. console.log("num变量的值为"+num);
    3. num="12";      // 编译错误
    4. console.log(num);

    • 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。

    • 第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会出错。因为变量已经设置为number类型了。

    error TS2322: Type '"12"' is not assignable to type 'number'.

    变量作用域

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

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

    TypeScript有以下几种作用域：

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

    以下实例说明了三种作用域的使用：

    1. var global=12;//全局变量
    2. class Numbers{
    3.     num=13;//实例变量
    4.     static sval=10;//静态变量
    5.     
    6.  
    7.     storeNum():void{
    8.         var local=10;//局部变量
    9.     }
    10. }
    11. console.log("全局变量为: "+global_num)  
    12. console.log(Numbers.sval)   // 静态变量
    13. var obj = new Numbers(); 
    14. console.log("实例变量: "+obj.num_val)

    以上代码使用 tsc 命令编译为 JavaScript 代码为：

    1. var gobal=12;//全局变量
    2. var Numbers= (function () {
    3.     function Numbers() {
    4.         this.num_val = 13; // 实例变量
    5.     }
    6.     Numbers.prototype.storeNum = function () {
    7.         var local_num = 14; // 局部变量
    8.     };
    9.     Numbers.sval = 10; // 静态变量
    10.     return Numbers;
    11. }());
    12. console.log("全局变量为: " + global_num);
    13. console.log(Numbers.sval); // 静态变量
    14. var obj = new Numbers();
    15. console.log("实例变量: " + obj.num_val);

    执行以上 JavaScript 代码，输出结果为：

    1. 全局变量为: 12
    2. 10
    3. 实例变量: 13

    如果我们在方法外部调用局部变量 local_num，会报错：

    error TS2322: Could not find symbol 'local_num'.

    二：TypeScript 运算符

    运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。

    考虑以下计算：

    7 + 5 = 12

    以上实例中 7、5 和 12 是操作数。

    运算符 + 用于加值。

    运算符 = 用于赋值。

    TypeScript 主要包含以下几种运算：

    • 算术运算符
    • 逻辑运算符
    • 关系运算符
    • 按位运算符
    • 赋值运算符
    • 三元/条件运算符
    • 字符串运算符
    • 类型运算符

    算术运算符

    假定 y=5，下面的表格解释了这些算术运算符的操作：

    运算符描述例子x 运算结果y 运算结果
    +加法x=y+275
    -减法x=y-235
    *乘法x=y*2105
    /除法x=y/22.55
    %取模（余数）x=y%215
    ++自增x=++y66
    x=y++56
    --自减x=--y44
    x=y--54

    实例：

    1. var num1:number = 10 
    2. var num2:number = 2
    3. var res:number = 0
    4.     
    5. res = num1 + num2 
    6. console.log("加:        "+res); 
    7.  
    8. res = num1 - num2; 
    9. console.log("减: "+res) 
    10.  
    11. res = num1*num2 
    12. console.log("乘:    "+res) 
    13.  
    14. res = num1/num2 
    15. console.log("除:   "+res)
    16.     
    17. res = num1%num2 
    18. console.log("余数:   "+res) 
    19.  
    20. num1++ 
    21. console.log("num1 自增运算: "+num1) 
    22.  
    23. num2-- 
    24. console.log("num2 自减运算: "+num2)

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var num1 = 10;
    2. var num2 = 2;
    3. var res = 0;
    4. res = num1 + num2;
    5. console.log("加:        " + res);
    6. res = num1 - num2;
    7. console.log("减: " + res);
    8. res = num1 * num2;
    9. console.log("乘:    " + res);
    10. res = num1 / num2;
    11. console.log("除:   " + res);
    12. res = num1 % num2;
    13. console.log("余数:   " + res);
    14. num1++;
    15. console.log("num1 自增运算: " + num1);
    16. num2--;
    17. console.log("num2 自减运算: " + num2);

    执行以上 JavaScript 代码，输出结果为：

    1. 加:        12
    2. 减: 8
    3. 乘:    20
    4. 除:   5
    5. 余数:   0
    6. num1 自增运算: 11
    7. num2 自减运算: 1

    关系运算符

    关系运算符用于计算结果是否为 true 或者 false。

    x=5，下面的表格解释了关系运算符的操作：

    运算符描述比较返回值
    ==等于x==8false
    x==5true
    != 不等于x!=8true
    > 大于x>8false
    < 小于x<8true
    >= 大于或等于x>=8false
    <= 小于或等于x<=8true

    实例： 

    1.  
    2. var num1:number = 5;
    3. var num2:number = 9;
    4.  
    5. console.log("num1 的值为: "+num1); 
    6. console.log("num2 的值为:"+num2);
    7.  
    8. var res = num1>num2 
    9. console.log("num1 大于n num2: "+res)
    10.  
    11. res = num1
    12. console.log("num1 小于 num2: "+res)  
    13.  
    14. res = num1>=num2 
    15. console.log("num1 大于或等于  num2: "+res)
    16.  
    17. res = num1<=num2
    18. console.log("num1 小于或等于 num2: "+res)  
    19.  
    20. res = num1==num2 
    21. console.log("num1 等于 num2: "+res)  
    22.  
    23. res = num1!=num2  
    24. console.log("num1 不等于 num2: "+res)

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var num1 = 5;
    2. var num2 = 9;
    3. console.log("num1 的值为: " + num1);
    4. console.log("num2 的值为:" + num2);
    5. var res = num1 > num2;
    6. console.log("num1 大于n num2: " + res);
    7. res = num1 < num2;
    8. console.log("num1 小于 num2: " + res);
    9. res = num1 >= num2;
    10. console.log("num1 大于或等于  num2: " + res);
    11. res = num1 <= num2;
    12. console.log("num1 小于或等于 num2: " + res);
    13. res = num1 == num2;
    14. console.log("num1 等于 num2: " + res);
    15. res = num1 != num2;
    16. console.log("num1 不等于 num2: " + res);

    执行以上 JavaScript 代码，输出结果为：

    1. num1 的值为: 5
    2. num2 的值为:9
    3. num1 大于n num2: false
    4. num1 小于 num2: true
    5. num1 大于或等于  num2: false
    6. num1 小于或等于 num2: true
    7. num1 等于 num2: false
    8. num1 不等于 num2: true

    逻辑运算符

    逻辑运算符用于测定变量或值之间的逻辑。

    给定 x=6 以及 y=3，下表解释了逻辑运算符：

    运算符描述例子
    &&and(x < 10 && y > 1) 为 true
    ||or(x==5 || y==5) 为 false
    !not!(x==y) 为 true

    实例：

    1. var avg:number = 20; 
    2. var percentage:number = 90; 
    3.  
    4. console.log("avg 值为: "+avg+" ,percentage 值为: "+percentage);
    5.     
    6. var res:boolean = ((avg>50)&&(percentage>80)); 
    7. console.log("(avg>50)&&(percentage>80): ",res);
    8.  
    9. var res:boolean = ((avg>50)||(percentage>80)); 
    10. console.log("(avg>50)||(percentage>80): ",res);
    11.  
    12. var res:boolean=!((avg>50)&&(percentage>80)); 
    13. console.log("!((avg>50)&&(percentage>80)): ",res);

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var avg = 20;
    2. var percentage = 90;
    3. console.log("avg 值为: " + avg + " ,percentage 值为: " + percentage);
    4. var res = ((avg > 50) && (percentage > 80));
    5. console.log("(avg>50)&&(percentage>80): ", res);
    6. var res = ((avg > 50) || (percentage > 80));
    7. console.log("(avg>50)||(percentage>80): ", res);
    8. var res = !((avg > 50) && (percentage > 80));
    9. console.log("!((avg>50)&&(percentage>80)): ", res);

    执行以上 JavaScript 代码，输出结果为：

    1. avg 值为: 20 ,percentage 值为: 90
    2. (avg>50)&&(percentage>80):  false
    3. (avg>50)||(percentage>80):  true
    4. !((avg>50)&&(percentage>80)):  true

    短路运算符(&& 与 ||)

    && 与 || 运算符可用于组合表达式。 && 运算符只有在左右两个表达式都为 true 时才返回 true。

    考虑以下实例：

    1. var a = 10 
    2. var result = ( a<10 && a>5)

    以上实例中 a < 10 与 a > 5 是使用了 && 运算符的组合表达式，第一个表达式返回了 false，由于 && 运算需要两个表达式都为 true，所以如果第一个为 false，就不再执行后面的判断(a > 5 跳过计算)，直接返回 false。

    || 运算符只要其中一个表达式为 true ，则该组合表达式就会返回 true。

    考虑以下实例：

    1. var a = 10 
    2. var result = ( a>5 || a<10)

    以上实例中 a > 5 与 a < 10 是使用了 || 运算符的组合表达式，第一个表达式返回了 true，由于 || 组合运算只需要一个表达式为 true，所以如果第一个为 true，就不再执行后面的判断(a < 10 跳过计算)，直接返回 true。

    位运算符

    位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

    运算符描述例子类似于结果十进制
    &AND，按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。x = 5 & 10101 & 00010001 1
    |OR，按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。x = 5 | 10101 | 00010101 5
    ~取反，取反是一元运算符，对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0，0 成为 1。x = ~ 5 ~01011010 -6
    ^异或，按位异或运算，对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1，否则该位为 0。x = 5 ^ 10101 ^ 00010100 4
    <<左移，把 << 左边的运算数的各二进位全部左移若干位，由 << 右边的数指定移动的位数，高位丢弃，低位补 0。x = 5 << 10101 << 11010 10
    >>右移，把 >> 左边的运算数的各二进位全部右移若干位，>> 右边的数指定移动的位数。x = 5 >> 10101 >> 100102
    >>>无符号右移，与有符号右移位类似，除了左边一律使用0 补位。x = 2 >>> 10010 >>> 100011

    实例：

    1. var a:number = 2;   // 二进制 10 
    2. var b:number = 3;   // 二进制 11
    3.     
    4. var result; 
    5.         
    6. result = (a & b);     
    7. console.log("(a & b) => ",result)
    8.             
    9. result = (a | b);          
    10. console.log("(a | b) => ",result)  
    11.         
    12. result = (a ^ b);  
    13. console.log("(a ^ b) => ",result);
    14.     
    15. result = (~b); 
    16. console.log("(~b) => ",result);
    17.  
    18. result = (a << b); 
    19. console.log("(a << b) => ",result); 
    20.  
    21. result = (a >> b); 
    22. console.log("(a >> b) => ",result);
    23.  
    24. result = (a >>> 1); 
    25. console.log("(a >>> 1) => ",result);

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var a = 2; // 二进制 10 
    2. var b = 3; // 二进制 11
    3. var result;
    4. result = (a & b);
    5. console.log("(a & b) => ", result);
    6. result = (a | b);
    7. console.log("(a | b) => ", result);
    8. result = (a ^ b);
    9. console.log("(a ^ b) => ", result);
    10. result = (~b);
    11. console.log("(~b) => ", result);
    12. result = (a << b);
    13. console.log("(a << b) => ", result);
    14. result = (a >> b);
    15. console.log("(a >> b) => ", result);
    16. result = (a >>> 1);
    17. console.log("(a >>> 1) => ", result);

    执行以上 JavaScript 代码，输出结果为：

    1. (a & b) =>  2
    2. (a | b) =>  3
    3. (a ^ b) =>  1
    4. (~b) =>  -4
    5. (a << b) =>  16
    6. (a >> b) =>  0
    7. (a >>> 1) =>  1

    赋值运算符

    赋值运算符用于给变量赋值。

    给定 x=10 和 y=5，下面的表格解释了赋值运算符：

    运算符例子实例x 值
    = (赋值)x = yx = yx = 5
    += (先进行加运算后赋值)x += yx = x + yx = 15
    -= (先进行减运算后赋值)x -= yx = x - yx = 5
    *= (先进行乘运算后赋值)x *= yx = x * yx = 50
    /= (先进行除运算后赋值)x /= yx = x / yx = 2

    类似的逻辑运算符也可以与赋值运算符联合使用：<<=, >>=, >>>=, &=, |= 与 ^=。

    实例：

    1. var a: number = 12 
    2. var b:number = 10  
    3.  
    4. a = b 
    5. console.log("a = b: "+a)
    6.  
    7. a += b
    8. console.log("a+=b: "+a)
    9.  
    10. a -= b 
    11. console.log("a-=b: "+a)
    12.  
    13. a *= b 
    14. console.log("a*=b: "+a)
    15.  
    16. a /= b 
    17. console.log("a/=b: "+a)    
    18.  
    19. a %= b 
    20. console.log("a%=b: "+a)

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var a = 12;
    2. var b = 10;
    3. a = b;
    4. console.log("a = b: " + a);
    5. a += b;
    6. console.log("a+=b: " + a);
    7. a -= b;
    8. console.log("a-=b: " + a);
    9. a *= b;
    10. console.log("a*=b: " + a);
    11. a /= b;
    12. console.log("a/=b: " + a);
    13. a %= b;
    14. console.log("a%=b: " + a);

    执行以上 JavaScript 代码，输出结果为：

    1. a = b: 10
    2. a+=b: 20
    3. a-=b: 10
    4. a*=b: 100
    5. a/=b: 10
    6. a%=b: 0

    三元运算符 (?)

    三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量

    Test ? expr1 : expr2
    • Test − 指定的条件语句
    • expr1 − 如果条件语句 Test 返回 true 则返回该值
    • expr2 − 如果条件语句 Test 返回 false 则返回该值

    让我们看下以下实例：

    1. var num:number = -2 
    2. var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
    3. console.log(result)

    以上实例输出结果如下：

    小于 0，或等于 0

    类型运算符

    typeof 运算符

    typeof 是一元运算符，返回操作数的数据类型。

    查看以下实例:

    1. var num = 12 
    2. console.log(typeof num);   //输出结果: number

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var num = 12;
    2. console.log(typeof num); //输出结果: number

    以上实例输出结果如下：

    number

    instanceof

    instanceof 运算符用于判断对象是否为指定的类型

    其他运算符

    负号运算符(-)

    更改操作数的符号，查看以下实例：

    1. var x:number = 4 
    2. var y = -x; 
    3. console.log("x 值为: ",x);   // 输出结果 4 
    4. console.log("y 值为: ",y);   // 输出结果 -4

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var x = 4;
    2. var y = -x;
    3. console.log("x 值为: ", x); // 输出结果 4 
    4. console.log("y 值为: ", y); // 输出结果 -4

    以上实例输出结果如下：

    1. x 值为:  4
    2. y 值为:  -4

    字符串运算符: 连接运算符 (+)

    + 运算符可以拼接两个字符串，查看以下实例：

    1. var msg:string = "RUNOOB"+".COM" 
    2. console.log(msg)

    使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

    1. var msg = "RUNOOB" + ".COM";
    2. console.log(msg);

    以上实例输出结果如下：

    RUNOOB.COM

    本文参考了有关TypeScript相关文章

  • 相关阅读:
    pytorch第一天（tensor数据和csv数据的预处理）lm老师版
    【C++系列P5】‘类与对象‘-三部曲——[对象&特殊成员](3/3)
    理解一致性哈希算法
    SpringBoot -集成Druid
    并发原理—如何保证多条指令的原子性（二）
    RustDay05------Exercise[31-40]
    Java项目：SSM公司人力资源管理系统
    C++ - std::string字符串格式化方法总结
    MobileViT模型简介
    Spring MVC更多家族成员----文件上传---06
  • 原文地址：https://blog.csdn.net/weixin_63267832/article/details/132915737