TypeScript - 变量



根据定义,变量是“内存中命名的空间”,用于存储值。换句话说,它充当程序中值的容器。TypeScript 变量必须遵循 JavaScript 命名规则:

  • 变量名可以包含字母和数字。

  • 它们不能包含空格和特殊字符,除了下划线 (_) 和美元符号 ($) 之外。

  • 变量名不能以数字开头。

在使用变量之前必须声明它。使用var关键字声明变量。

TypeScript 中的变量声明

在 TypeScript 中声明变量的类型语法是在变量名后包含一个冒号 (:),后跟其类型。就像在 JavaScript 中一样,我们使用var关键字声明变量。

声明变量时,您有四个选项:

  • 在一个语句中声明其类型和值。

Declare Type
  • 声明其类型但不声明值。在这种情况下,变量将设置为 undefined。

Undefined
  • 声明其值但不声明类型。变量类型将设置为分配的值的数据类型。

Any
  • 既不声明值也不声明类型。在这种情况下,变量的数据类型将为 any,并将初始化为 undefined。

Any and Undefined

下表说明了如上所述的变量声明的有效语法:

序号 变量声明语法 & 描述
1.

var name:string = ”mary”

变量存储类型为字符串的值

2.

var name:string;

变量是字符串变量。变量的值默认为 undefined

3.

var name = ”mary”

变量的类型从值的数据类型推断而来。在这里,变量的类型为字符串

4.

var name;

变量的数据类型为 any。其值默认为 undefined。

示例:TypeScript 中的变量

var name:string = "John"; 
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2 
console.log("name"+name) 
console.log("first score: "+score1) 
console.log("second score: "+score2) 
console.log("sum of the scores: "+sum)

编译后,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var name = "John";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("name" + name);
console.log("first score: " + score1);
console.log("second score : " + score2);
console.log("sum of the scores: " + sum);

上面程序的输出如下:

name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

如果我们尝试将值分配给与之类型不同的变量,TypeScript 编译器将生成错误。因此,TypeScript 遵循强类型。强类型语法确保赋值运算符 (=) 两侧指定的类型相同。这就是以下代码会导致编译错误的原因:

var num:number = "hello"     // will result in a compilation error

TypeScript 中的类型断言

TypeScript 允许将变量从一种类型更改为另一种类型。TypeScript 将此过程称为类型断言。语法是在变量或表达式前面放置< >符号并将目标类型放在其中。以下示例解释了这个概念:

示例

var str = '1' 
var str2:number = <number> <any> str   //str is now of type number 
console.log(typeof(str2))

如果将鼠标指针悬停在 Visual Studio Code 中的类型断言语句上,它将显示变量数据类型的更改。基本上,它允许类型从 S 到 T 的断言成功,如果 S 是 T 的子类型或 T 是 S 的子类型。

它之所以不称为“类型转换”,是因为转换通常意味着某种运行时支持,而“类型断言”纯粹是编译时构造,并且是您向编译器提供提示以说明您希望如何分析代码的方式。

编译后,它将生成以下 JavaScript 代码。

"use strict";
var str = '1';
var str2 = str; //str is now of type number 
console.log(typeof (str2));

它将产生以下输出:

string

TypeScript 中的类型推断

鉴于 TypeScript 是强类型的,此功能是可选的。TypeScript 还鼓励变量的动态类型。这意味着 TypeScript 鼓励在没有类型的情况下声明变量。在这种情况下,编译器将根据分配给它的值确定变量的类型。TypeScript 将在代码中找到变量的第一次使用,确定它最初设置为的类型,然后在代码块的其余部分为该变量假定相同的类型。

以下代码片段解释了相同的内容:

示例:类型推断

var num = 2;    // data type inferred as  number 
console.log("value of num "+num); 
num = "12";
console.log(num);

在上面的代码片段中:

  • 代码声明了一个变量并将其值设置为 2。请注意,变量声明没有指定数据类型。因此,程序使用类型推断来确定变量的数据类型,即它分配变量设置为的第一个值类型。在这种情况下,num设置为数字类型。

  • 当代码尝试将变量的值设置为字符串时。编译器会抛出一个错误,因为变量的类型已设置为数字。

它将产生以下输出:

error TS2011: Cannot convert 'string' to 'number'.

TypeScript 变量作用域

变量的作用域指定变量定义的位置。变量在程序中的可用性由其作用域决定。TypeScript 变量可以具有以下作用域:

  • 全局作用域 - 全局变量在编程结构之外声明。这些变量可以在代码中的任何位置访问。

  • 类作用域 - 这些变量也称为字段。字段或类变量在类中但方法之外声明。可以使用类的对象访问这些变量。字段也可以是静态的。可以使用类名访问静态字段。

  • 局部作用域 - 正如其名称所示,局部变量在方法、循环等结构中声明。局部变量仅在其声明的结构中可访问。

以下示例说明了 TypeScript 中的变量作用域。

示例:变量作用域

var global_num = 12          //global variable 
class Numbers { 
   num_val = 13;             //class variable 
   static sval = 10;         //static field 
   
   storeNum():void { 
      var local_num = 14;    //local variable 
   } 
} 
console.log("Global num: "+global_num)  
console.log(Numbers.sval)   //static variable  
var obj = new Numbers(); 
console.log("Global num: "+obj.num_val) 

在转译时,将生成以下 JavaScript 代码:

var global_num = 12;              //global variable 
var Numbers = (function () {
   function Numbers() {
      this.num_val = 13;          //class variable 
   }
   Numbers.prototype.storeNum = function () {
      var local_num = 14;        //local variable 
   };
   Numbers.sval = 10;            //static field 
   return Numbers;
}());

console.log("Global num: " + global_num);
console.log(Numbers.sval);       //static variable  

var obj = new Numbers();
console.log("Global num: " + obj.num_val);

它将产生以下输出:

Global num: 12
10
Global num: 13

如果尝试在方法外部访问局部变量,则会导致编译错误。

error TS2095: Could not find symbol 'local_num'.
广告