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

    相关推荐

    • word页码从第二页开始为1怎么设置

      word页码从第二页开始为1设置的方法: 1、首先点击名列前茅页的页尾。 2、然后选择任务选项栏中的“布局”。 3、随后点击“分隔符”选择分节符下方的“下一页”。 4、随后到要进行设置的第二页页尾并选中页码。 5、点击上方的“链接到前一节”将其取消。 6、随后回到名列前茅页的页码,选中并将其删除。 …

      2022年9月22日
      4.5K00
    • MySQL死锁是什么及怎么掌握

      1、什么是死锁? 死锁指的是在两个或两个以上不同的进程或线程中,由于存在共同资源的竞争或进程(或线程)间的通讯而导致各个线程间相互挂起等待,如果没有外力作用,最终会引发整个系统崩溃。 2、Mysql出现死锁的必要条件 资源独占条件 指多个事务在竞争同一个资源时存在互斥性,即在一段时间内某资源只由一个…

      2022年9月1日
      51900
    • 使用ajax要不要引入jquery

      使用ajax不需要引入jquery;ajax全称是“Asynchronous javascript and XML”,也即异步JavaScript和XML,是指一种创建交互网页应用的网页开发技术,JavaScript原本就支持ajax,若是使用原生的ajax请求,当然不需要引入jquery。 本文操…

      2022年8月31日
      66600
    • ai如何转曲图片

      ai转曲图片的方法: 1、首先进入ai,然后新建画布,可以自己调整大小。 2、然后选择里面的“文字工具”。 3、之后输入文字,并且复制3个左右。 4、选择名列前茅个文字,右击点击“创建轮廓”。 5、然后点击“对象”选择“扩展”。 6、调整好了之后点击“确定”。 7、最后选择最后一组的文字,按下“ct…

      2022年9月1日
      1.3K00
    • MySQL安装常见报错怎么处理

      1.无法启动处理,错误1053 Windows 无法启动Mysql服务 错误1053:服务没有及时响应启动或控制请求 1.1 结束进程 处理方法: 1、在命令行中敲入tasklist查看进程 2、根据进程名杀死进程 taskkill /f /t /im 进程名称 1.2 更改网络服务 Server2…

      2022年9月15日
      89600
    • MyBatis3源码解析之怎么获取数据源

      jdbc 再贴一个JDBC运行的测试方法,流程为: 加载JDBC驱动; 获取数据库连接; 创建JDBC Statements对象; 设置SQL语句的传入参数; 执行SQL语句并获得查询结果; 对查询结果进行转换处理并将处理结果返回; 释放相关资源(关闭Connection,关闭Statement,关…

      2022年9月19日
      59400
    • html和xhtml有哪些区别

      HTML超文本标记语言,是一种基于标记的网页设计语言,专门用来设计和编辑网页。XHTML是为了适应XML而重新改造的HTML,也是一种标记语言,它可以看作是从HTML到XML的过渡;XHTML要求在网页中出现的任何元素都应该被标记出来。 什么是HTML HTML 英文全称是 Hyper Text M…

      2022年9月16日
      82900
    • mysql如何删除表的一行数据

      在mysql中,可以使用DELETE语句配合WHERE子句和LIMIT子句来删除表的一行数据,语法为“DELETE FROM 表名 WHERE 删除条件 LIMIT 1;”;DELETE语句用于删除表中一行或者多行数据,而WHERE子句用于设置删除条件,LIMIT子句用于设置删除数据的行数。 本教程…

      2022年9月21日
      2.5K00
    • Laravel中如何找到最慢的查询

      DB::listen() 幸运的是,在 laravel 中,我们可以定义一个在每次执行查询时调用的回调(参见 此处)。为此,请将以下代码添加到任何服务提供者(例如 AppServiceProvider): public function boot(){ DB::listen(function ($q…

      2022年9月8日
      55000
    • windows任务管理器被系统管理员停用怎么解决

      任务管理器被管理员停用的恢复方法 1、快捷键Win+R,输入gpedit.msc,回车。 2、依次展开“用户配置–>管理模板–>系统–>Ctrl+Alt+Del选项”,在右侧双击“删除任务管理器” 3、然后在“设置”选项卡中选择未配置或者已禁用选…

      2022年9月6日
      64000
    注册PingCode 在线客服
    站长微信
    站长微信
    电话联系

    400-800-1024

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

    分享本页
    返回顶部