TypeScript教程(三)变量声明

这篇具有很好参考价值的文章主要介绍了TypeScript教程(三)变量声明。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、变量声明

变量是一种使用方便的占位符,用于引用计算机内存地址,可以将变量看做存储数据的容器

命名规则:

1.变量名称可以包含数字和字母

2.除了下划线_和美元$符号外,不能包含其他特殊字符,包括空格

3.变量名不能以数字开头

以下四种方式声明变量:

1.声明变量的类型及初始值:

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

var uname:string = "SSS"

2.声明变量的类型,但没有初始值,变量值会设置为undefined:

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

var uname = string

3.声明变量名和初始值,但不设置类型,该变量可以为任意类型

var [变量名] = 值;

var uname = "SSS"

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

var [变量名]

var uname;

示例:

ts:

var uname:string = "Runoob";
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2
console.log("名字: "+uname)
console.log("第一个科目成绩: "+score1)
console.log("第二个科目成绩: "+score2)
console.log("总成绩: "+sum)

注:变量不要使用name,否则会与DOM中的全局window对象下的name属性出现重名

js:

var uname = "Runoob";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("名字: " + uname);
console.log("第一个科目成绩: " + score1);
console.log("第二个科目成绩: " + score2);
console.log("总成绩: " + sum);

结果:

名字: Runoob
第一个科目成绩: 50
第二个科目成绩: 42.5
总成绩: 92.5

二、类型断言(Type Assertion)

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

语法格式:

<类型> 值

或

值 as 类型

示例:

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

TypeScript是如何确定单个断言是否足够:

当S类型是T类型的子集,或者T类型是S类型的子集时,S能被成功断言为T,这是为了在进行类型断言时提供额外的安全性,完全毫无根据的断言是危险的,除非用any

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

以上代码编译后的结果:

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

三、类型推断

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

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

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

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

第三行,当再次为变量设置字符串类型的值时,编译会错误,因为变量已经设置了number类型

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

四、变量作用域

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

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

TypeScript有以下几种作用域:

1.全局作用域:全局变量定义在程序结构的外部,它可以在代码的任何位置使用

2.类作用域:这个变量也可以称为字段,类变量声明在一个类里头,但在类的方法外面,该变量可以通过类的对象来访问,类变量可以是静态的,静态的变量可以通过类名直接访问

3.局部作用域:局部变量,局部变量只能在声明他的一个代码块(方法)中使用

示例:

ts:

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

js:

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);

结果:

全局变量为: 12
10
实例变量: 13

如果在方法外调用局部变量会报错:文章来源地址https://www.toymoban.com/news/detail-650466.html

error TS2322: Could not find symbol 'local_num'.

到了这里,关于TypeScript教程(三)变量声明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【TypeScript】TS类型声明(二)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 TypeScript从入门到实践专栏 是博

    2024年01月20日
    浏览(40)
  • TypeScript 中的常用类型声明大全

    上一章节,我们介绍了什么是TS,以及TS的应用场景。本章节将给大家介绍,在TypeScript 中,常用的数据类型声明,有我们熟悉的 基本数据类型,也有,一些TypeScript 新增的一些,语法规范类型。出发吧… 函数:同样的,也可以给函数限制 接受形参的类型和,限制返回值的数

    2024年02月16日
    浏览(37)
  • TypeScript中的类型声明declare

    在 TypeScript 中, declare 用于定义 全局 变量、函数和类型等 ,提供了一种在编译过程中告诉TypeScript编译器某个标识符的类型的方式。它告诉编译器:虽然它在当前文件中没有声明,但它在其他地方已经存在了。也就是说,declare让 编译器 知道 这些声明的实体是在编译

    2024年02月12日
    浏览(47)
  • 【TypeScript】类型断言-类型的声明和转换(五)

    一、简介 TypeScript 断言是指在编写代码时,开发者能够告诉编译器某个值的具体类型,从而可以在编译阶段强制类型检查。 这其实在某些强类型语言中,类似于强制类型转换的操作。 类型断言有两种形式实现: 尖括号语法 as语法 二、断言形式 2.1 尖括号语法 尖括号语法:开

    2024年02月13日
    浏览(46)
  • 请用Typescript写出20个数组方法的声明

    前段时间看直播看到狼叔直播驳斥”前端已死论“,前端死没死不知道,反正前端是拿不到以前那么多工资了;好,进入正题,狼叔在直播间提到要求前端写出20个数组上的方法,这确实不太简单,但是只写出方法没有什么意义,我们今天来写20个数组方法的声明;这要求我们

    2024年02月16日
    浏览(30)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(46)
  • 【TypeScript】中关于 { 声明合并 } 的使用及注意事项

    概念 : 在TS中,如果定义了多个 相同命名 的函数,接口或者class 类,那么它们会自动合并成一个类型 函数的合并: 前面章节讲解的函数重载就是使用了定义多个函数的类型进行合并: 接口的合并: 注意 : 合并时,如果出现同名的属性,类型 必须要保持唯一一致 接口中

    2024年02月13日
    浏览(76)
  • 【TypeScript】TS类型断言-类型的声明和转换(五)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以

    2024年02月22日
    浏览(37)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • TypeScript入门指南:特性、安装配置、类型声明、编译选项、面向对象等详解

    了解TypeScript的特性、安装配置步骤、类型声明方式、编译选项及面向对象编程方法。适合初学者学习和实践。

    2024年02月12日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包