美文网首页
ts基础学习

ts基础学习

作者: koala949 | 来源:发表于2020-04-10 11:15 被阅读0次

    1. 原始数据类型:

    (1)布尔值(boolean):let isDone: boolean = false;
    (2) 数值(number): let decLiteral: number = 6;
    (3) 字符串(string):let myName: string = 'Tom';
    ------ 模板字符串:

    let sentence: string = `Hello, my name is ${myName}.

    (4) 空值(viod)

    2. 类型推断:

    (1)TypeScript 会在没有明确的指定类型的时候推测出一个类型;
    (2)如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查.

    3. 联合类型:

    (1)联合类型(Union Types)表示取值可以为多种类型中的一种。let myFavoriteNumber: string | number
    (2)当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法

    4.对象的类型: 接口

    (1)接口可对对象的形状进行描述。
    (2)接口一般首字母大写, 赋值的时候变量的形状必须和接口保持一致,(变量的定义不能比接口少或者多)
    (3)可用可选属性, 在赋值时该属性可以不存在 :

    interface Person {
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        name: 'Tom'
    };
    

    (4)若想添加未定义的属性, 可让接口有任意的属性, 一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集. (一个接口只能定义一个任意属性,如果接口中有多个类型的属性,则可以在任意属性中使用联合类型:[propName: string]: string | number;)

    interface Person {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        name: 'Tom',
        gender: 'male'
    };
    

    5. 数组的类型:

    (1)类型+方括号 表示:let fibonacci: number[] = [1, 1, 2, 3, 5];
    (2)数组的项不允许出现不同类型, 数组的一些方法的参数也会根据数组在定义时约定的类型进行限制。
    (3)使用数据泛型 Array<elemType>表示:let fibonacci: Array<number> = [1, 1, 2, 3, 5];
    (4)用接口表示数组:

    interface NumberArray {
        [index: number]: number;
    }
    let fibonacci: NumberArray = [1, 1, 2, 3, 5];
    

    (5)类数组:类数组不能用普通的数组当时来描述,而应该用接口, 以arguments为例。

    function sum() {
        let args: number[] = arguments;
    }
    // Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.
    
    function sum() {
        let args: {
            [index: number]: number;
            length: number;
            callee: Function;
        } = arguments;
    }
    

    事实上常用的类数组都有自己的接口定义,如 IArguments, NodeList, HTMLCollection 等:

    function sum() {
        let args: IArguments = arguments;
    }
    

    可用 any 表示数组中允许出现任意类型:

    let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

    6. 函数的类型

    (1)函数声明 定义函数

    function sum(x: number, y: number): number {
        return x + y;
    }
    

    (2)函数表达式 定义函数

    let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
        return x + y;
    };
    // 在 TypeScript 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。
    

    7. 类型断言:手动指定一个值的类型

    值 as 类型
    <类型>值 ( 慎用!因为可能表示一个泛型)
    (1)用途一: 之前提到, 当TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型中共有的属性或方法,但有时确实需要在还不确定类型的时候就访问其中一个的类型特有的属性或方法时,可以使用类型断言。 此情况滥用泛型可能导致运行错误哦

    interface Cat {
        name: string;
        run(): void;
    }
    interface Fish {
        name: string;
        swim(): void;
    }
    function isFish(animal: Cat | Fish) {
        if (typeof (animal as Fish).swim === 'function') {
            return true;
        }
        return false;
    }
    

    (2)用途二:当类之间有继承关系时,将一个父类断言为更加具体的子类
    (3)将any断言为一个具体的类型:我们在开发时不可避免的需要处理any类型的变量,可能是由于第三方库未能定义好自己的类型,也有可能是历史遗留或其他人编写的烂代码,我们可以改进any类型的变量, 通过类型断言及时的把any断言为精确的类型,亡羊补牢。

    function getCacheData(key: string): any {
        return (window as any).cache[key];
    }
    
    interface Cat {
        name: string;
        run(): void;
    }
    
    const tom = getCacheData('tom') as Cat;
    tom.run();
    // 调用完 getCacheData 之后,立即将它断言为 Cat 类型。这样的话明确了 tom 的类型,后续对 tom 的访问时就有了代码补全
    

    相关文章

      网友评论

          本文标题:ts基础学习

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