美文网首页
TypeScript 学习笔记1 数据类型

TypeScript 学习笔记1 数据类型

作者: 躺希腊额阿毛 | 来源:发表于2019-08-09 13:59 被阅读0次

    1.Typescript特征

    强类型语言,面向对象,需编译 (比js更像java,js的超集)

    2.基本数据类型

    布尔值

    let isShow: boolean = false;
    

    数字

     let age: number = 20;
    

    字符串

     let email: string = "123@qq.com";
     //模板字符串
     let msg: string = `my emali ${email}`;
    

    数组

     let list: number[] = [1, 2, 3];
     //Array<T泛型
    

    元组

     let arr: [string, number] = ["aaa", 10];
    console.log("元组的第一个元素为:" + arr[0]);
    //  元组是可变的 更新元组元素
    arr[0] = "bbb";
    console.log("元组中的第一个元素更新为:" + arr[0]);
    

    数组中元素的数据类型都是相同的,如果存储的元素数据类型不同,则需要使用元组。
    元组是一个strict array(严格的数组),因为他不只声明了一个数组,并且同时还规定数组中每个索引处的元素类型。
    redis zset 获取 score及value的时候可以设置为 索引双数为 number,索引双数为string。

    运算
    push() 向元组添加元素,添加在最后面。
    pop() 从元组中移除元素(最后一个),并返回移除的元素。

    枚举

     enum Weeks {
       Mon, Tue, Wed 
     };
     let day: Weeks = Weeks.Mon;
     console.log(day);  // 0
     console.log(Weeks[0]); // Mon
     console.log(Weeks['Mon']); // 0
    

    Any 变体变量

     let x: any = "aaa";
     
     x = 20;
    

    Void

     // void 无任何类型,函数返回值
     function hello(): void {
         console.log("hello");
     }
    

    Null 和 Undefined

     let x1:undefined
    

    3.其他

    3.1 联合类型

     let x2:number | string | boolean;x2 = true;
    

    3.2 类型推论

     let x3 = 3;
     x3 = 123; // number
     let x4; // any
    

    3.3 类型断言

     let x5:number | string | boolean = "this is a string";
     // let x5:any = "this is a string";
     let strlength: number = x5.length;       // 获取length的几种写法
     let strlength1: number = (<stringx5).length;
     let strlength2: number = (x5 as string).length;
    

    3.4 类型兼容性

    interface Named {
        name: string;
    }
    
    class Person {
        name: string;
    }
    
    let p: Named;
    // OK, because of structural typing
    p = new Person();
    
    let x = (a: number) => 0;
    let y = (b: number, s: string) => 0;
    
    y = x; // OK
    x = y; // Error
    

    3.5 函数参数双向协变

    当比较函数参数类型时,只有当源函数参数能够赋值给目标函数或者反过来时才能赋值成功。

    enum EventType { Mouse, Keyboard }
    
    interface Event { timestamp: number; }
    interface MouseEvent extends Event { x1: number; y1: number }
    interface KeyEvent extends Event { keyCode: number }
    
    function listenEvent(eventType: EventType, handler: (n: Event) => void) {
        console.log('eventType', eventType)
        console.log('handler', handler)
    }
    
    // Unsound, but useful and common
    listenEvent(EventType.Mouse, (e: MouseEvent) => console.log(e.x1 + ',' + e.y1));
    
    // Undesirable alternatives in presence of soundness
    listenEvent(EventType.Mouse, (e: Event) => console.log((<MouseEvent>e).x1 + ',' + (<MouseEvent>e).y1));
    listenEvent(EventType.Mouse, <(e: Event) => void>((e: MouseEvent) => console.log(e.x1 + ',' + e.y1)));
    
    // Still disallowed (clear error). Type safety enforced for wholly incompatible types
    listenEvent(EventType.Mouse, (e: number) => console.log(e));
    
    运行结果

    3.6 可选参数及剩余参数

    比较函数兼容性的时候,可选参数与必须参数是可互换的。 源类型上有额外的可选参数不是错误,目标类型的可选参数在源类型里没有对应的参数也不是错误。

    function invokeLater(args: any[], callback: (...args: any[]) => void) {
        /* ... Invoke callback with 'args' ... */
    }
    
    // Unsound - invokeLater "might" provide any number of arguments
    invokeLater([1, 2], (x, y) => console.log(x + ', ' + y));
    
    // Confusing (x and y are actually required) and undiscoverable
    invokeLater([1, 2], (x?, y?) => console.log(x + ', ' + y));
    
    运行结果

    3.7 类型别名

    type Name = string;
    type NameResolver = () => string;
    type NameOrResolver = Name | NameResolver;
    function getName(n: NameOrResolver): Name {
        if (typeof n === 'string') {
            return n;
        }
        else {
            return n();
        }
    }
    

    3.8 索引类型

    keyof T,索引类型查询操作符。 对于任何类型T,keyof T的结果为T上已知的公共属性名的联合。

    function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
      return names.map(n => o[n]);
    }
    
    interface Person {
        name: string;
        age: number;
    }
    let person: Person = {
        name: 'Jarid',
        age: 35
    };
    let strings: string[] = pluck(person, ['name']); // ok, string[]  
    console.log(strings); // [ 'Jarid' ]
    let personProps: keyof Person; // 'name' | 'age'  
    

    3.9 外部函数申明

    declare var 名字
    

    Typescript从0到1-学习视频教程-培训课程-腾讯课堂
    TypeScript 中文手册

    相关文章

      网友评论

          本文标题:TypeScript 学习笔记1 数据类型

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