分享好友 站长动态首页 网站导航

TypeScript 使用var声明变量

网友发布 2022-10-26 20:10 · 头闻号编程技术

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

我们知道 Typescript 有一个特定就是变量是强类型的,也就是说在声明变量的时候必须给这个变量指定一个类型。

这与 Javascript 不同, Javascript 是弱类型语言,在 Javascript 中声明变量时不需要指定类型。声明变量的方式在 Javascript 中可以通过关键字 varletconst 来声明变量,当然 Typescript 中同样也可以。这三种声明变量的方式各有不同,如下所示:

变量命名规则在讲如何声明变量之前,我们先来看一下 Typescript 的变量命名规则,如下所示:使用关键字 var 声明变量首先在 Javascript 语言中我们都是使用关键字 var 来声明变量的。

那么为什么在 Typescript 中我们更偏向于使用 let,下面我们会讲到原因。

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

var [变量名] : [类型] = 值;// 例如var a : number = 1;var [变量名] : [类型];// 例如var a:number;var [变量名] = 值;// 例如 var a = 1;var [变量名];// 例如var a;示例:例如我们用 4 种不同的方式分别声明 4 个不同的变量,并且输出它们的值:

// 第一种

var

a

:

number

=

100

;

console

.

log

;

// 第二种

var

b

:

string

;

b

=

'xkd'

;

console

.

log

;

// 第三种

var

c

=

true

;

console

.

log

;

// 第四种

var

d

;

d

=

[

1

,

2

,

3

];

console

.

log

;

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

// 第一种

var

a

=

100

;

console

.

log

;

// 第二种

var

b

;

b

=

'xkd'

;

console

.

log

;

// 第三种

var

c

=

true

;

console

.

log

;

// 第四种

var

d

;

d

=

[

1

,

2

,

3

];

console

.

log

;

执行代码,输出:100xkdtrue[ 1, 2, 3 ]需要注意的是,在给变量命名的时候,记得不要使用 name,否则会和 DOM 中全局 window 对象下的 name 属性出现重名。示例:我们在 VSCode 中编写代码的时候,如果使用 name 作为变量名,VSCode 会直接提示错误,如下图所示:VSCode中会用红色波浪线提示我们这样做是错误的,将鼠标放到红色波浪线上,会出现错误原因。类型断言Typescript 中允许将变量从一种类型更改为另一种类型。

Typescript 将此过程称为类型断言(Type Assertion)。实现方法就是将目标类型用 <> 符号包围,并将其放在变量或表达式的前面。语法:<类型> 值示例:例如下面这段代码:

var

str1

=

'1'

var

str2

:

number

=

100

;

console

.

log

);

console

.

log

);

var

str2

:

number

=

<

number

>

<

any

>

str1

// 类型断言

console

.

log

);

console

.

log

);

编译成 Javascript 代码:

var

str1

=

'1'

;

var

str2

=

100

;

console

.

log

);

console

.

log

);

var

str2

=

str1

;

// 类型断言

console

.

log

);

console

.

log

);

输出结果:stringnumberstringstring类型断言看起来很像类型转换,但是其实并不一样,一般类型转换意味着某种运行时的支持,而类型断言只是一个编译时构造,是一种向编译器提供有关如何分析代码的提示方法。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

;

// 静态变量可以直接通过类名访问

console

.

log

;

// 实例化类

var

per

=

new

Person

;

// 类变量需要通过实例对象访问

console

.

log

;

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

var

global_a

=

1

;

// 全局变量

var

Person

=

{

function

Person

{

this

.

class_a

=

2

;

// 类变量

}

Person

.

prototype

.

show

=

function

{

var

local_a

=

4

;

// 局部变量,只能在定义它的函数中使用

};

Person

.

static_a

=

3

;

// 静态变量

return

Person

;

});

// 全局变量可以在全局使用

console

.

log

;

// 静态变量可以直接通过类名访问

console

.

log

;

// 实例化类

var

per

=

new

Person

;

// 类变量需要通过实例对象访问

console

.

log

;

执行 Javascript 代码,输出:全局变量:1静态变量:3实例变量:2首先 global_a 是一个全局变量,可以在全局范围中使用,例如可以在 Person 类外部使用,在 Person 类里面使用,还可以在 show 函数中使用。而 class_a 是类变量,定义在类中的变量叫做类变量,我们可以通过类的实例对象访问类变量,如 per.class_a

static_a 也是一个类变量,但是这个变量被 static 关键字修饰,所以它也是一个静态变量,静态变量可以直接通过类名来访问,如 Person.static_a 。最后就是局部变量 local_a,这个变量的作用域仅在它所处的函数内,所以它只能在 show 函数中使用,如果在其他地方使用则会报错。现在你弄清楚了什么是局部变量、全局变量、类变量吗。

免责声明:本平台仅供信息发布交流之途,请谨慎判断信息真伪。如遇虚假诈骗信息,请立即举报

举报
反对 0
打赏 0
更多相关文章

评论

0

收藏

点赞