共计 3848 个字符,预计需要花费 10 分钟才能阅读完成。
本节咱们讲变量的申明,变量从字面意思来了解,就是能够扭转的量。而从编程角度来说,变量就是内存中的命名空间,次要用于存储值,咱们能够把它了解为程序中值的容器。
咱们晓得 TypeScript
有一个特定就是变量是强类型的,也就是说在申明变量的时候必须给这个变量指定一个类型。这与 JavaScript
不同,JavaScript
是弱类型语言,在 JavaScript
中申明变量时不须要指定类型。
申明变量的形式
在 JavaScript
中能够通过关键字 var
、let
、const
来申明变量,当然 TypeScript 中同样也能够。
这三种申明变量的形式各有不同,如下所示:
- 应用
var
关键字申明变量,其作用于为该语句所在的函数内,且存在变量晋升景象。 let
的申明相似于var
,然而它的作用域为该语句所在的代码块内,不存在变量晋升。留神它们一个是函数内,一个是代码块内,代码块就是间接应用{}
括起来的代码。const
是let
的一个扩大,它能够避免重新分配变量,个别用来申明常量,在前面呈现的代码中不能再批改常量的值。
变量命名规定
在讲如何申明变量之前,咱们先来看一下 TypeScript
的变量命名规定,如下所示:
- 变量名称能够蕴含数字、字母、下划线
_
和美元$
符号,其余都不能够,例如a
、abc
、AA
、a_
都合乎命名标准。 - 变量名不能以数字作为结尾,例如
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. 请指出下列中变量 a
、b
、c
、d
的作用域范畴?
class Car{
a = "red";
run():string{
var b = "40km/h";
return b;
}
wheel(){var c = 4;}
}
var d = "jeep";
链接:https://www.9xkd.com/