TypeScript 使用var声明变量

本节我们讲变量的声明,变量从字面意思来理解,就是可以改变的量。而从编程角度来说,变量就是内存中的命名空间,主要用于存储值,我们可以把它理解为程序中值的容器。

我们知道 TypeScript 有一个特定就是变量是强类型的,也就是说在声明变量的时候必须给这个变量指定一个类型。这与 JavaScript 不同, JavaScript 是弱类型语言,在 JavaScript 中声明变量时不需要指定类型。

声明变量的方式

JavaScript 中可以通过关键字 varletconst 来声明变量,当然 TypeScript 中同样也可以。

这三种声明变量的方式各有不同,如下所示:

  • 使用 var 关键字声明变量,其作用于为该语句所在的函数内, 且存在变量提升现象。
  • let 的声明类似于 var,但是它的作用域为该语句所在的代码块内,不存在变量提升。注意它们一个是函数内,一个是代码块内,代码块就是直接使用 {} 括起来的代码。
  • constlet 的一个扩展,它可以防止重新分配变量,一般用来声明常量,在后面出现的代码中不能再修改常量的值。

变量命名规则

在讲如何声明变量之前,我们先来看一下 TypeScript 的变量命名规则,如下所示:

  • 变量名称可以包含数字、字母、下划线 _ 和美元 $ 符号,其他都不可以,例如 aabcAAa_ 都符合命名规范。
  • 变量名不能以数字作为开头,例如 7a 就不符合变量的命名规范,而 a7 是可以的。

使用关键字 var 声明变量

首先在 JavaScript 语言中我们都是使用关键字 var 来声明变量的。那么为什么在 TypeScript 中我们更偏向于使用 let,下面我们会讲到原因。

TypeScript 中声明变量其实就和 JavaScript 很类似。但因为一个是强类型语言一个是弱类型语言,所以两者在声明变量的格式上会有一些不同。

TypeScript 中声明变量,一共有四种方式:

  • 第一种,声明变量的类型及初始值,需要在变量名后面加上变量 : 和变量类型:
var [变量名] : [类型] = 值;

// 例如
var a : number = 1;
  • 第二种,声明变量的类型,但是不赋初始值。在这种情况下,该变量的值默认为 undefined
var [变量名] : [类型];

// 例如
var a:number;
  • 第三种,声明变量并赋初始值,但不声明类型,此时变量类型将被设置为any(任意类型),这种声明方式和 JavaScript 中的类似:
var [变量名] = 值;

// 例如 
var a = 1;
  • 第四种,不声明变量类型,且不赋初始值。在这种情况下,变量的数据类型为 any,初始化值为 undefined
var [变量名];

// 例如
var a;
示例:

例如我们用 4 种不同的方式分别声明 4 个不同的变量,并且输出它们的值:

// 第一种
var a:number = 100;
console.log(a);  

// 第二种
var b:string;
b = 'xkd';
console.log(b);  

// 第三种
var c = true;
console.log(c);  

// 第四种
var d;
d = [1, 2, 3];
console.log(d);  

使用 tsc test.ts 命令编译后会得到如下 JavaScript 代码:

// 第一种
var a = 100;
console.log(a);
// 第二种
var b;
b = 'xkd';
console.log(b);
// 第三种
var c = true;
console.log(c);
// 第四种
var d;
d = [1, 2, 3];
console.log(d);

执行代码,输出:

100
xkd
true
[ 1, 2, 3 ]

需要注意的是,在给变量命名的时候,记得不要使用 name,否则会和 DOM 中全局 window 对象下的 name 属性出现重名。

示例:

我们在 VSCode 中编写代码的时候,如果使用 name 作为变量名,VSCode 会直接提示错误,如下图所示:


还有一点需要注意的是,我们知道了 TypeScript 是强类型语言,所以如果我们在声明变量的时候,给变量指定了一个类型,而赋值时将另外一个类型的值赋值给这个变量,TypeScript 编译器会产生错误。

示例:

我们声明一个字符串类型的变量 a ,然后给这个变量赋一个数字类型的值:


VSCode 中会用红色波浪线提示我们这样做是错误的,将鼠标放到红色波浪线上,会出现错误原因。

类型断言

TypeScript 中允许将变量从一种类型更改为另一种类型。TypeScript 将此过程称为类型断言(Type Assertion)。实现方法就是将目标类型用 <> 符号包围,并将其放在变量或表达式的前面。

语法:

<类型> 值
示例:

例如下面这段代码:

var str1 = '1' 
var str2:number = 100;
console.log(typeof(str1));  
console.log(typeof(str2));  

var str2:number = <number> <any> str1   // 类型断言

console.log(typeof(str1));  
console.log(typeof(str2));  

编译成 JavaScript 代码:

var str1 = '1';
var str2 = 100;
console.log(typeof (str1)); 
console.log(typeof (str2)); 
var str2 = str1; // 类型断言
console.log(typeof (str1)); 
console.log(typeof (str2)); 

输出结果:

string
number
string
string

类型断言看起来很像类型转换,但是其实并不一样,一般类型转换意味着某种运行时的支持,而类型断言只是一个编译时构造,是一种向编译器提供有关如何分析代码的提示方法。TypeScript 会假设你已经进行了必须的检查。

除此之外,类型断言还有另一种语法形式,这两种形式的写法是等价的,至于使用哪个大多数情况下是凭个人喜好。

如下所示:

值 as 类型

但是如果我们在 TypeScript 里使用 JSX,就只支持此种写法。

变量作用域

一个变量的作用域指定了这个变量的定义位置,程序中变量的可用性是由它作用域决定的。变量不可以在作用域以外的地方使用。

TypeScript 的作用域分为下面三种:

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

下面代码中定义了三个变量,这三个变量的作用域都不同:

var global_a = 1; // 全局变量

class Person{
    class_a = 2;           // 类变量
    static static_a = 3;   // 静态变量

    show():void{
        var local_a = 4;   // 局部变量,只能在定义它的函数中使用
    }
}

// 全局变量可以在全局使用
console.log("全局变量:" + global_a);

// 静态变量可以直接通过类名访问
console.log("静态变量:" + Person.static_a);

// 实例化类
var per = new Person();
// 类变量需要通过实例对象访问
console.log("实例变量:" + per.class_a);

使用tsc test.ts 编译后的 JavaScript 代码:

var global_a = 1; // 全局变量
var Person = /** @class */ (function () {
    function Person() {
        this.class_a = 2; // 类变量
    }
    Person.prototype.show = function () {
        var local_a = 4; // 局部变量,只能在定义它的函数中使用
    };
    Person.static_a = 3; // 静态变量
    return Person;
}());
// 全局变量可以在全局使用
console.log("全局变量:" + global_a);
// 静态变量可以直接通过类名访问
console.log("静态变量:" + Person.static_a);
// 实例化类
var per = new Person();
// 类变量需要通过实例对象访问
console.log("实例变量:" + per.class_a);

执行 JavaScript 代码,输出:

全局变量:1
静态变量:3
实例变量:2

首先 global_a 是一个全局变量,可以在全局范围中使用,例如可以在 Person 类外部使用,在 Person 类里面使用,还可以在 show 函数中使用。

class_a 是类变量,定义在类中的变量叫做类变量,我们可以通过类的实例对象访问类变量,如 per.class_a

static_a 也是一个类变量,但是这个变量被 static 关键字修饰,所以它也是一个静态变量,静态变量可以直接通过类名来访问,如 Person.static_a

最后就是局部变量 local_a,这个变量的作用域仅在它所处的函数内,所以它只能在 show() 函数中使用,如果在其他地方使用则会报错。

现在你弄清楚了什么是局部变量、全局变量、类变量吗。

动手练习

1.使用四种不同的方式声明一个字符串类型的变量,并给变量赋值?

2.请指出下列中变量 abcd 的作用域范围?

class Car{
    a = "red";
    run():string{
        var b = "40km/h";
        return b;
    }

    wheel(){
        var c = 4;
    }
}
var d = "jeep";

链接:https://www.9xkd.com/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容