• TypeScript_基本类型



    一、类型声明

    1. 类型声明式TS非常重要的一个特点
    2. 通过类型声明可以指定TS中的变量(参数、形参)的类型
    3. 指定类型后,为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错

    语法:

    // let 变量:类型
    let a: number
    
    // let 变量:类型 = 值
    let b: string = '发财'
    
    // function fn(参数:类型,参数:类型):类型{}
    function fn(a: number, b: number): number {
      return
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    二、自动判定类型

    1. TS拥有自动的类型判断机制
    2. 当对变脸的声明和赋值时同时进行的时,TS编译器会自动判断变量的类型
    3. 所以如果你的变量的声明和赋值是同时进行的,可以省略掉类型声明
      在这里插入图片描述

    三、类型

    类型例子描述
    number1,-33,2.5任意数字
    string‘发财’,“发财”…任意字符串
    booleantrue,false布尔值true或false
    字面量其本身限制变量的值就算该字面量本身
    any*任意类型
    unknow*类型安全的any
    void空值(undefined)没有值(或undefined)
    never没有值不能是任何值
    object对象{name:‘发财’}任意的JS对象
    array[1,2,3]任意JS数组
    tuple[4,5]元素,TS新增类型,固定长度数组
    enumenum{a,b}枚举,TS新增类型

    number

    let a:number = 10
    let b:number = 0xf00d
    let c:number = 0b1010
    let d:number = 0o744
    let e:bigint = 100n
    
    • 1
    • 2
    • 3
    • 4
    • 5

    boolean

    let a:boolean = false
    let b = false
    
    • 1
    • 2

    在这里插入图片描述

    string

    let color:string = 'blue'
    color = 'red'
    
    let fullName:string = '发财,是发财不是旺财'
    let age:number = 22
    let sentence:string = `Hello,my name is ${fullName} 
    I'll be ${age+1} years old next month`
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    字面量

    也可以使用字面量去指定变量类型,通过字面量可以确定变量的取值范围

    let color:'red'|'blue'|'black'
    let num:1|2|3|4
    
    • 1
    • 2

    any

    any表示的是任意类型
    当一个变量设置类型为any后,相当于对该变量关闭了TS类型检查
    通常不建议使用any

    let d: any = 4;
    d = 'hello';
    d = true;
    
    • 1
    • 2
    • 3

    声明变量如果不指定类型,TS解析器会总动判断变量的类型为any

    let d = 4;
    d = 'hello';
    d = true; 
    
    • 1
    • 2
    • 3

    unknown

    unknow类型的变量,不耐赋值给其他变量

    let notSure: unknown = 4;
    notSure = 'hello';
    
    • 1
    • 2

    在这里插入图片描述

    void

    void 用来表示空,以函数为例,就表示没有返回值的函数

    let unusable: void = undefined;
    
    • 1

    当函数没有返回值时,函数默认返回值时void
    在这里插入图片描述

    never

    never 表示永远不会返回结果(空 也不会返回)

    function error(message:string):never{
      throw new Error(message)
    }
    
    • 1
    • 2
    • 3

    object

    let obj: object = {};
    let a={}
    a=function (){}
    
    • 1
    • 2
    • 3
    // {}用来指定对象种包含的属性
    // 语法:{属性名:属性值,属性名:属性值,....}
    // 属性名?代表可选属性
    let a: { name: string, age: number,address?:string }
    a = { name: '发财', age: 22, }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    //[propName:string]:any 代表属性名为string 属性值为any
    let c :{name:string,[propName:string]:any}
    c= {name:'发财',age:18,gender:'男'}
    
    • 1
    • 2
    • 3
    // 设置函数解构的类型声明:
    //      语法:(形参:类型,形参:类型...)=>返回值
    let d:(a:number,b:number)=>number
    
    d=function (n1,n2):number{
      return n1+n2
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    array

    //number[]表示数字数组(数组中都是存的数字)
    let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    
    • 1
    • 2
    • 3

    tuple

    元组,固定长度的数组

    let x: [string, number];
    x = ["hello", 10]; 
    
    • 1
    • 2

    enum

    enum Color {
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
      Red = 1,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
      Red = 1,
      Green = 2,
      Blue = 4,
    }
    let c: Color = Color.Green;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

    类型断言

    在有些情况下,变量的类型对于我们而言是很明确的,但TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式

    第一种

    //语法:变量 as 类型
    let someValue: unknown = "this is a string";
    let strLength: number = (someValue as string).length;
    
    • 1
    • 2
    • 3

    第二种

    //语法:<类型>变量
    let someValue: unknown = "this is a string";
    let strLength: number = (<string>someValue).length;
    
    • 1
    • 2
    • 3
  • 相关阅读:
    antd获取/更改form表单数据(表单域数据)
    STM32--ESP8266物联网WIFI模块(贝壳物联)--远程无线控制点灯
    Ubuntu20.04 安装配置 Ros2
    视频批量添加背景图片教程,详细步骤一看就会
    Android 中如何使用 App Links
    Gitlab用户信息批量导出,批量block,unblock
    【无标题】
    `SQL`编写判断是否为工作日函数编写
    删除数据库
    ​力扣解法汇总1260-二维网格迁移
  • 原文地址:https://blog.csdn.net/qq_45578388/article/details/126711855