美文网首页
typescript笔记--类型篇

typescript笔记--类型篇

作者: 子绎 | 来源:发表于2022-03-16 11:33 被阅读0次

    动态监听ts文件变动,自动编译js

    //后面加上-w即可。 代表watch的意思
    tsc index.ts -w
    
    //若已经有配置文件存在,无需手动指定ts文件。可同时监听所有ts
    tsc -w
    

    生成ts配置文件

    tsc --init
    

    类型约束的基本语法

    函数括号后的string 代表此函数的返回值必须是string类型
    function add(test:number,test2:number):string{     
    if(test==test2){
     return '我是字符串';
      }
    }
    

    ts的类型:

    1.number类型:数字类型统一为number类型,跟原生js一样,不区分float double int等。
    2.boolean类型:跟原生js一样,true或者false
    3.string类型:跟原生js一样 字符串类型。支持ES6模板字符串
    4.array类型:

    声明数组
    代表这个数组只能装string类型的数据
    let arr:string[]=[];
    arr.push("123") √
    arr.push(123)  ×
    
    泛型的方式
    let arr:Array<string>= [];
    

    5.null类型与undefined类型:null类型代表一个对象不存在的值,空指针。undefined代表初始化未指定值。

    声明为空后,后续也只能是unll和undefined
    const a:null=null;
    const b:undefined=undefined
    
    

    6.any类型:代表任意类型,使用any类型间接性代表不让ts对此变量进行任何变量约束检测。 不建议使用。

    const a:any;
    a=100;
    a="30"
    a=true;
    以上行为都可以通过编译。
    
    const a;  如果声明变量不指定类型,那么ts解释器会自动隐式的追加此变量为any类型。
    
    

    7.unknown:代表未知的类型,跟any类似。不同的是,它是安全的未知类型, 一个被声明unknown类型的变量,不能再次被赋值给其他变量

    const b:unknown;
    b=30;√
    b=true;√
    const a:string;
    a=b ×  不能将unknown类型赋值给其他变量,即使上面已经初始化为30或true
    
    
    const c:unknown;
    c = b; √   可以将unknown类型的变量再次赋值给unknown类型
    
    
    const d:any;
    d= b; √ 可以将unknown类型赋值给any类型;
    
    
    有一种情况,由于unknown可以初始化为任何变量类型,所以一旦类型确定后,我们可以通过typeof判断,来将类型赋值给新的同种类型。例如
    const b:unknown;
    b=30;
    const c:number;
    if(typeof b==number){  因为有了判断 所以只有为number的时候才会赋值,编译是可以通过的。
      c =30; √
    }
    或者使用类型断言
    c = b as string; √
    或者使用泛型
    c = <string> b; √
    
    总结:unknown类型理论上不能赋值给任何类型,
    但是它可以赋值给any类型和赋值给自己本身的unknown类型。
     还有一种方法就是使用typeof判断或者类型断言,也可以实现将unnown类型赋值给其他类型。
    

    8.void类型: 一般用于函数中,定义函数的返回值为空。如果不加,函数隐式返回值就是void

    function test():viod(){}
    

    9:never类型:表示函数永远不会有返回值。(不常用)

    function test():never{
      whlie(true){
    
       }或者
    throw new Error '' 抛出异常。
    有返回值代表此程序正常,无返回值 通常是程序异常中止,或者无限循环。
    }
    

    10:对象的声明与使用

    普通对象
    let user = {name:"张三"}
    增加类型约束的方式
    let user:{name:string}  //先声明这个对象的结构
    user = {name:"张三"}// 根据结构赋对应的值
    
    设置可选的值
    let user:{name:string,age?:number}//携带问号表示此参数可选,实例化传参的时候age是可选的
    user = {name:"张三"} √
    
    设置可选值的情况下,同时设定可选值的类型也是可选的
    let user:{name:string,age?:any}  //any表示任意类型
    user={name:"张三"} √
    user ={name:"李四",age:30} √
    
    除了限定好的参数外,允许传入其他未知属性(通过[propName:string]来声明的项的数据类型必须包含接口的其他项的内容)
    let user:{name:string,age:number,[propName:string]:any}// 数组表示可以传N个未知属性,propName:string表示任意属性名称,并且是string类型, 最后any表示可以传入的值,any表示可以传入任意类型的值。
    
    user = {name:"张三",age:30,fat:555}  √
    
    

    11.函数的声明规范

    跟对象类似,要先定义一个函数的格式模板
    let  testFn:(name:number,age:number)=>number;
    利用上面的函数模板 新建一个函数
      testFn = (name:number,age:number)=>name+age;
    
    或者普通函数
    testFN = function(name:number,age:number){
      return name+age;
     }
    使用
    testFn(1,2);
    
    都需要按照testFn的类型约束定义函数
    
    上面的写法等价于
    testFn:(name:string)=>string = function(test:string){ return name+'你好' };
    这个函数意思就是 声明了一个函数的模板必须包含一个参数 并且类型为string。 返回值为string。
    接着直接用这个模板声明了一个匿名函数function(test:string),也是一个实例化的过程。
    
    

    12:联合类型声明: 就是除了可以声明一个类型外,可以额外指定N个其他类型

    代表除了string之外 还可以是number类型      逻辑或语法
     let name:string|number
    也可以给数组约束多个类型的值
    let arr:(string|number)[] = ["123",123]
    
    

    12.1. 用字面量的方式声明一个变量

    let sex:0;
    sex = 0; √
    sex=1; × 
    以上只能分配为1,相当于一个常量,除了0以外 其他都不能赋值。
    
    可以用于变量只有预期的1-2种情况,例如
       let sex: '0' | '1' = '1';
        sex = '0';
    代表sex声明了一个类型 类型可以是0或者1. 将来赋值更改 也只可以从0和1之间选择
    

    13.元组类型: 限制数组长度的数组,就叫元组。

      普通数组声明  不限制个数,只需要符合string就可以。
    const arr1:string[] = ["你好","啊啊"];
    声明元组数组。 后面的数组个数和类型 必须受前面类型的限制。
    const arr2:[string,number] = [' 啊啊啊',3132]
    声明一个二维的元组数组,后面的数组个数不受约束。 这里约束的是子数组的元素个数
    const arr3:[string,number][] = [ ['啊啊',12],[' 啊啊',222]   ]
    
    

    13.enum 枚举类型:类似于对象,但不支持后期设置值,在初始化就需要确定好值,内部赋值使用的是等于号。

    enum test{
         a,
        b
     }
    使用   如果没有指定具体的值,那么会自动从0开始。如果手动赋值第一个a为3,那么第二个b自动为4.
    console.log(test.a)
    
    也可以手动指定为其他类型
    
     enum test{
         a="嗯",
        b="啊"
     }
    

    类型别名:

    概念:可以将一组类型约束 用类型别名包装,此类型约束就可以公用了。

    在对象中  类型别名可以这么用
    type strTest = {name:string,age:number}
    let user = strTest;
    
    在数组中 类型别名可以这么使用
       type arrType = string;
       let a: arrType[] = ["你好"];
    
    在函数中 类型别名可以这么使用
        type arrType = string;
        function arr(a: arrType) {
            console.log(a)
        }
        arr("你好")
    

    类型断言: 一种强制类型转换

      function testDemo(a: string | number): void {
            a.length  //会报错,因为a有可能是string 也有可能是Number。string可以调用length,但是number不行。ts就会报错
             可以使用类型断言解决
            第一步
                a.length;
             第二步 <string>a.length
           第三步 将类型和a括号包起来  就完成了类型断言  强制转换成string
            let len = (<string>a).length
    
          也可以使用as语法 代替以上的语法 也是类型断言
           第一步 a.length
          第二步
          (a as string).length
        用以上as语法 就完成了类型断言
        }
    
    

    as const 的应用 :就是将某种变量转为只读

    数组:
    var arr:string[]  as const;   //此时不能push  只能获取
    
    对象
    const a{
       name:"123"
    } as const;
    
    
    

    非空断言 通过符号!进行断言

    let obj = document.querySelector(".box")!;
    代表ts不进行非空的判断
    
    

    -----分割线-----------

    函数重载 如果有相同功能的方法名,利用重载声明,重载可以自动决定使用哪个类型约束

     function add(a: number, b: number): number;
    
        function add(a: string, b: string): number;
    
        function add(a: any, b: any): any {
            return a + b
        }
    
        console.log(add(1,2))  会自动调用第二个函数。
    console.log(add(1,[])) 报错 因为找不到定义了数组类型的重载
    
    函数重载跟返回值没关系 跟参数顺序 个数 类型不同进行重载
    
    

    相关文章

      网友评论

          本文标题:typescript笔记--类型篇

          本文链接:https://www.haomeiwen.com/subject/tvojdrtx.html