TypeScript中怎么定义变量及使用数据类型

    TypeScript定义变量

    变量声明格式

    我在前面强调过,在TypeScript中定义变量需要指定 标识符 的类型。

    所以完整的声明格式如下

    声明了类型后TypeScript就会进行类型检测,声明的类型可以称之为类型注解;

    var/let/const 标识符: 数据类型 = 赋值;

    比如我们声明一个message,完整的写法如下

    注意:这里的string的首字母是小写的,和String是有区别的

    string是TypeScript中定义的字符串类型, String是JavaScript的字符串包装类的类型

    let message: string = "Hello World";

    如果我们给message赋值其他类型的值,那么就会报错

    TypeScript中怎么定义变量及使用数据类型

    在TypeScript定义变量(标识符)和ES6之后一致,可以使用var、 let、 const来定义

    var name: string = "chenyq"let age: number = 18const height: number = 1.88

    当然,在tslint中并不推荐使用var来声明变量

    可见,在TypeScript中并不建议再使用var关键字了,主要原因和ES6升级后let和var的区别是一样的, var是没 有块级作用域的,会引起很多的问题,这里不再展开探讨。

    TypeScript中怎么定义变量及使用数据类型

    变量类型推导

    在开发中,有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型,我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型:

    TypeScript中怎么定义变量及使用数据类型

    如果我们给age赋值其他的类型

    TypeScript中怎么定义变量及使用数据类型

    这是因为在一个变量名列前茅次赋值时,会将后面的赋值内容的类型,来作为前面标识符的类型, 这个过程称之为类型推导, 或者说类型推断

    上面的age就是因为后面赋值的是一个number类型,所以age虽然没有明确的说明是number类型,但是依然是一个number类型;

    JS和TS的数据类型

    我们经常说TypeScript是JavaScript的一个超集

    下面这幅图很好的表示出JavaScript、ECMAScript、TypeScript的关系

    TypeScript中怎么定义变量及使用数据类型

    可以看出TypeScript是包含JavaScript的数据类型的

    TS中使用JS的数据类型

    number类型

    数字类型是我们开发中经常使用的类型, TypeScript和JavaScript一样,不区分整数类型( int)和浮点型 ( double),统一为number类型。

    let num: number = 100num = 50num = 0.5

    如果你学习过ES6应该知道, ES6新增了二进制和八进制的表示方法,而TypeScript也是支持二进制、八进制、十 六进制的表示:

    let num: number = 100num = 50 // 十进制num = 0b110 // 二进制num = 0o555 // 八进制num = 0xf23 // 十六进制
    boolean类型

    boolean类型只有两个取值: true和false,非常简单

    let flag: boolean = trueflag = falseflag = 30 > 10
    string类型

    string类型是字符串类型,在TS中和JS一样可以使用单引号或者双引号表示:

    let message: string = "Hello TS"message = '你好 TS'

    同时也支持ES6的模板字符串来拼接变量和字符串:

    const name: string = "chenyq"const age: number = 18const height: number = 1.88console.log(`我叫${name}, 年龄${age}, 身高${height}`)
    Array类型

    数组类型的定义也非常简单,有两种方式(推荐名列前茅种写法):

    因为第二种写法在jsx中会有冲突, 所以更推荐名列前茅种写法

    // 表示定义一个字符串类型的数组(推荐写法)const names: string[] = ["aaa", "bbb", "ccc"]// 表示定义一个数字类型的数组const nums: Array<number> = [123, 456, 789]names.push("ddd")nums.push(111)

    如果确定了类型, 再添加其他类型到数组中,那么会报错:

    TypeScript中怎么定义变量及使用数据类型

    Object类型

    在TypeScript中定义一个对象其实会默认推导出属性的类型的

    const obj = {  name: "chenyq",  age: 18}

    TypeScript中怎么定义变量及使用数据类型

    object对象类型可以用于描述一个对象, 但是这样我们就无法从myinfo获取数据,设置数据

    const myinfo: object = {  name: "chenyq",  age: 18}

    对象类型后面会详细讲解, 目前先了解到此即可

    Symbol类型

    在ES5中,如果我们是不可以在对象中添加相同的属性名称的,比如下面的做法:

    const person = {  identity: "程序员",  identity: "医生"}

    通常我们的解决方案是定义两个不同的属性名字:比如identity1和identity2。

    const person = {  identity1: "程序员",  identity2: "医生"}

    我们还可以通过symbol来定义相同的名称,因为Symbol函数返回的是不同的值:

    const s1: symbol = Symbol("content")const s2: symbol = Symbol("content")const person = {  [s1]: "程序员",  [s2]: "医生"}
    null和undefined类型

    在JavaScript中, undefined 和 null 是两个基本数据类型。

    在TypeScript中,它们各自的类型也是undefined和null,也就意味着它们既是实际的值,也是自己的类型

    // null类型只有一个值就是nulllet nl: null = null// undefined类型也只有一个值就是undefinedlet ud: undefined = undefined

    TS自身特有的数据类型

    any类型

    在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型(类似 于Dart语言中的dynamic类型)。

    any类型有点像一种讨巧的TypeScript手段:

    我们可以对any类型的变量进行任何的操作,包括获取不存在的属性、方法;

    我们给一个any类型的变量赋值任何的值,比如数字、字符串的值;

    let a: any = "chenyq"a = 18a = truea = {}
    // any类型的数组可以存放不同的数据类型const arr: any = ["aaa", 123, true]

    如果对于某些情况的处理过于繁琐不希望添加规定的类型注解,或者在引入一些第三方库时,缺失了类型注解,这个时候 我们可以使用any:

    包括在Vue源码中,也会使用到any来进行某些类型的适配;

    unknown类型

    unknown是TypeScript中比较特殊的一种类型,它用于描述类型不确定的变量

    这句话表达什么意思呢?我们来看下面这样的一个场景:

    // foo返回string类型function foo() {  return "aaa"}// bar返回number类型function bar() {  return 123}let flag = truelet resultif (flag) {  result = foo()} else {  result = bar()}

    此时result是没有类型注解的, result是什么类型是不确定的, 需要根据flag的值进行判断

    此时可以将result的类型注解设置为any类型, 但是开发中是不推荐使用any类型的

    在开发中推荐使用unknown类型

    let result: unknown

    那么any和unknown类型的区别是什么呢?

    any类型可以赋值给任意类型

    let result: any = "aaa"// any类型的值可以赋值给任何类型let name: string = resultlet age: number = resultlet isSHow: true = result

    unknown类型只能赋值给any类型和unknown类型

    let result: unknown = "aaa"// unknown类型的值只能赋值给any或unknown类型let name: any = resultlet age: unknown = resultlet isSHow: any = result

    赋值给其他类型的时候, 编译就会报错, 这是为了防止在其他地方乱用的情况

    TypeScript中怎么定义变量及使用数据类型

    void类型

    void通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型:

    我们可以将null和undefined赋值给void类型,也就是函数可以返回null或者undefined

    function foo(): void {  console.log("我是没有返回值的函数")}

    如果一个函数我们没有写任何类型,那么它默认返回值的类型就是void的, 所以一般不写

    function foo() {  console.log("我是没有返回值的函数")}
    never类型

    never 表示永远不会发生值的类型,比如一个函数

    如果一个函数中是一个死循环或者抛出一个异常,那么这个函数是永远不会返回东西的

    那么写void类型或者其他类型作为返回值类型都不合适,这个时候我们就可以使用never类型;

    function foo(): never {  while (true) {    console.log("死循环")  }}
    tuple类型

    tuple是元组类型,很多语言中也有这种数据类型,比如Python、 Swift等。

    元组的出现也是为了保证数组存放相同元素

    // 例如使用元组存放个人信息const info: [string, number, number] = ["chenyq", 18, 1.88]const name = info[0] // 并且知道类型是stringconst age = info[1] // 并且知道类型是numberconst height = info[2] // 并且知道类型是number

    那么tuple和数组有什么区别呢?

    首先,数组中通常建议存放相同类型的元素,不同类型的元素是不推荐放在数组中。(可以放在对象或者元组中)

    其次,元组中每个元素都有自己特定的类型,根据索引值获取到的值可以确定对应的类型;而数组如果存放不同类型, 数组中每一个元素都是any类型

    “TypeScript中怎么定义变量及使用数据类型”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

    文章标题:TypeScript中怎么定义变量及使用数据类型,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/21913

    (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    亿速云的头像亿速云认证作者
    上一篇 2022年8月31日 下午11:23
    下一篇 2022年8月31日 下午11:24

    相关推荐

    • windows会声会影如何导出视频高清

      会声会影导出视频高清的方法 1、首先我们要保证我们的源视频是高清的,否则无论如何操作都无法导出高清的视频。 2、接着我们在导入视频前要设置高清的项目环境,这样我们就能在高清的环境中编辑视频了。 3、点击左上角“设置”,选择“项目属性”。 4、根据我们需要的参数设置相应的项目格式。 5、当我们编辑完成…

      2022年9月15日
      50300
    • windows 0xc00000f4蓝屏如何解决

      0xc00000f4蓝屏解决方法: 方法一: 1、一般来说,内存读取错误的情况只要重启一下电脑就可以解决了。 2、如果重启没解决,那么再次重启,然后在开机时按下“F8”进入如下界面。 3、接着选择其中的“安全模式”进入。 4、进入安全模式后,卸载最近一次电脑使用时安装的驱动和软件,再重启电脑即可。 …

      2022年9月15日
      43100
    • 电脑提示该内存不能为read如何解决

      电脑提示该内存不能为read的解决方法 1、打开运行窗口。 2、在运行窗口中输入命令cmd,回车确定。 2、将下面代码“for %1 in (%windir%system32*.dll) do regsvr32.exe /s %1”复制粘贴到管理员窗口中。 4、点击回车键,等待程序运行结束。 以上就…

      2022年9月2日
      62900
    • 如何用Redis实现排行榜及相同积分按时间排序功能

      需求:对组队活动中各个队伍的贡献值进行排行。 不考虑积分相同 Redis的Sorted Set是String类型的有序集合。集合成员是少数的,这就意味着集合中不能出现重复的数据。 每个元素都会关联一个double类型的分数。redis正是通过分数来为集合中的成员进行从小到大的排序。 有序集合的成员是…

      2022年8月31日
      1.5K00
    • MySQL中的用户创建与权限管理怎么实现

      一、用户管理 在mysql库里有个user表可以查看已经创建的用户 1.创建MySQL用户 注意:MySQL中不能单纯通过用户名来说明用户,必须要加上主机。如hhy@10.1.1.1 基本语法: mysql> create user ‘用户名’@’被允许连接的主机名称或主机的IP地址’ ide…

      2022年9月2日
      53600
    • Redis实现限流器的方法有哪些

      方法一:基于Redis的setnx的操作 我们在使用Redis的分布式锁的时候,大家都知道是依靠了setnx的指令,在CAS(Compare and swap)的操作的时候,同时给指定的key设置了过期实践(expire),我们在限流的主要目的就是为了在单位时间内,有且仅有N数量的请求能够访问我的代…

      2022年9月10日
      53600
    • windows浩辰cad看图王怎么画图

      浩辰cad看图王能画图吗: 答:能。 能够完成最基本的图形绘制的功能。 浩辰cad看图王画图步骤: 1、打开浩辰CAD看图王。 2、找到需要编辑的文件。 3、在如图所示的位置中找到绘图。 4、通过上面的功能即可画图。 “windows浩辰cad看图王怎么画图”的内容就介绍到这里了,感谢大家的阅读。如…

      2022年9月21日
      59400
    • ​CSS如何写出三角形

      CSS 写出三角形 /* create an arrow that points up */div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */ border-r…

      2022年9月1日
      30000
    • 如何解决mysql服务无法启动1069

      解决mysql服务无法启动的1069错误方法:1、在管理用户中找到mysql用户并重新设置mysql密码;2、在服务中找到mysql服务选项,在属性中通过更改后的密码重新登录mysql服务即可。出现1069错误的原因是更改了服务器的登录密码。 本教程操作环境:windows10系统、mysql8.0…

      2022年9月5日
      63500
    • word竖排文字如何设置居中

      word竖排文字设置居中的方法: 1、首先我们点击顶部“插入”工具栏。 2、然后选择下面的“文本框” 3、接着选择“绘制竖排文本框” 4、这样画一个文本框,在其中打字就是竖排的了。 5、输入完成后,右键文本框,选择“设置文本框格式” 6、最后在其中选择“居中”并保存即可设置竖排文字居中。 感谢各位的…

      2022年9月1日
      1.1K00
    站长微信
    站长微信
    电话联系

    400-800-1024

    工作日9:30-21:00在线

    分享本页
    返回顶部