Typescript基础知识点总结

谁践踏了优雅 2023-07-10 08:07 30阅读 0赞

## Typescript ##

*  Typescript是javascript的一个超集，主要提供了类型系统和对ES6的支持

### 为何选择Typescript ###

*  typescript增加了代码的可读性和可维护性
 *  typescript非常包容 (编译报错的时候，js里依然会有结果)
 *  typescript拥有活跃的社区

### 如何使用typescript ###

*  全局安装命令 npm install -g typescript （如果报错可以在前面加上sudo，并使用cnpm）
 *  编译文件 tsc hello.ts
 *  约定文件以.ts为后缀,编写react时，以.tsx为后缀
 *  主流IDE中都支持TS，包括代码不全、接口提示、跳转定义、重构

### Typescript 原始数据类型 ###

*  string number boolean null undefined enum symbol
 *  空值一般采用void来表示 void可以表示变量，也可以表示函数返回值

### Typescript中的任意值 ###

*  任意值（any）用来表示允许赋值为任意类型
 *  声明一个标亮为任意值之后，对它的任何操作，返回内容的类型都是任意值
 *  变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

var num:any = 1; // 任意类型的值
    num = true;
    num = "3";
    
    var num2; // 没有赋值操作，就会被认为任意值类型 等价于 var num2:any;
    num2 = 1;
    num2 = "123";
    
    var b = 1; // 给变量赋值初始值的时候，如果没有指定类型，根据初始值倒推类型
    // b = "2" //报错
    
    var c; // 没有给c赋初始值，就会被推断为任意类型

### Typescript中的类型推论 ###

*  typescript会依照类型推论的规则推断出一个类型
 *  如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查

### Typescript联合类型 ###

*  联合类型表示取值可以为多种类型中的一种
 *  如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检测
 *  只能访问此联合类型内的所有类型里共有的属性或者方法

// 联合类型
    var muchtype:string|number = "hello";
    muchtype = 10;
    console.log(muchtype.toString()); // string和number都有的属性或方法 才可以被调用

### Typescript中对象类型-接口 ###

*  可描述类的一部分抽象行为，也可描述对象的结构形状
 *  接口一般首字母大写，有的编程语言上面建议接口的名字加上 I 前缀
 *  赋值的时候，变量的形状必须要跟接口的形状保持一致
 *  接口中可定义可选属性、只读属性、任意属性

// 定义接口 强约束
    interface Istate { 
        name:string,
        age:number
    }
    var obj1:Istate;
    obj1 = { 
        name: 'zhangsan',
        age: 18
    }
    // 可选属性 在属性后面加一个 ?
    interface Istate2 { 
        name:string,
        age?:number // 存疑 可有可无
    }
    var obj2:Istate2;
    obj2 = { 
        name: 'zhangsan',
        age: 18
    }
    obj2 = { 
        name: 'lisi'
    }
    // 属性个数不确定的时候 any必须是任意类型
    interface Istate3 { 
        name:string|number,
        age?:number,
        [propName:string]:any // 必须是any 不然可能跟上面的冲突
    }
    var obj3:Istate3 = { 
        name:'wangwu',
        age:20,
        sex:'man',
        isMarry:false
    }
    // 只读属性 在属性前 添加readonly
    interface Istate4 { 
        name:string,
        readonly age:number|string
    }
    var obj4:Istate4 = { 
        name:'maliu',
        age:11
    }
    obj4.name = 'lisi'
    // obj4.age = 12 // 报错，只读属性不能更改

### Typescript数组类型 ###

*  可采用 类型+方括号 表示法
 *  可采用数组泛型 Array 表示法
 *  采用接口表示法

// 数组表示法
    // 类型+方括号
    var arr:number [] = [1, 2, 3];
    var arr2:string [] = ['1', '2', '3'];
    var arr3:any [] = [1, '2', true]
    
    // 可采用数组泛型 Array<elemtype> 表示法
    var arrType:Array<number> = [1, 2, 3];
    var arrType2:Array<string> = ['1', '2', '3'];
    var arrType3:Array<any> = [1, '2', true]
    
    // 可采用接口表示法
    interface IArr { 
        [index:number]:number
    }
    var arrType4:IArr = [1, 2, 3]
    
    interface Istate { 
        userName:string,
        age:number
    }
    interface IArr2 { 
        [index:number]:Istate
    }
    var arrType5:IArr2 = [
        { userName:'lisi',age:10}
    ]
    var arrType6:Array<Istate> = [
        { userName:'lisi',age:10}
    ]
    var arrType7:Istate[] = [
        { userName:'lisi',age:10}
    ]

### Typescript函数类型 ###

*  函数约束 有函数本身的参数约束、返回值约束、函数本身赋值的变量约束
 *  可采用重载的方式才支持联合类型的函数关系

// 声明式类型的函数
    function funcType(name:string, age:number):number { 
        return age;
    }
    var ageNum:number = funcType('lisi',10)
    
    // 函数参数不确定
    function funcType2(name:string, age:number, sex?:string):number { 
        return age
    }
    var ageNum2:number = funcType2('wangwu', 12, 'man')
    
    // 函数参数默认值 直接赋值
    function funcType3(name:string='lisi', age:number=20):number { 
        return age
    }
    
    
    // 表达式类型的函数
    var funcType4 = function(name:string,age:number):number { 
        return age
    }
    
    var funcType5:(name:string,age:number)=>number = function(name:string,age:number):number { 
        return age;
    }
    
    interface IfuncType { 
        (name:string,age:number):number
    }
    var funcType6: IfuncType = function(name:string,age:number):number { 
        return age;
    }
    
    
    // 对于联合类型的函数 可以采用重载的方式
    // 输入是number，输出也是number；输入是string，输出也是string
    function getValue(value:number):number;
    function getValue(value:string):string;
    function getValue(value:string|number):string|number { 
        return value;
    }
    var a:number = getValue(1);
    var b:string = getValue('1');

### Typescript类型断言 ###

*  类型断言 可以用来手动指定一个值的类型 语法 <类型>值 或者 值 as 类型，在jsx语法（react中），必须使用as
 *  类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

// 类型断言 只能断言联合类型中存在的类型
    function getAssert(name:string|number) { 
        // return (<string>name).length;
        return (name as string).length;
    }

### Typescript类型别名 ###

*  类型别名可以用来给一个类型起一个新名字，采用关键字type 例如type Name = string|number，Name就表示可设置字符串和树枝类型
 *  也可采用type来约束取值 只能是某些字符串中的一个：如 type eveName = ‘click’|‘scroll’|‘mousemove’

// 类型别名
    type strType = string|number|boolean;
    var str:strType = '10';
    str = 10;
    str = true;
    
    // 对于接口也可采用类型别名
    interface muchType1 { 
        name:string
    }
    interface muchType2 { 
        age:number
    }
    type muchType = muchType1|muchType2;
    var obj1:muchType = { 
        name:'lisi'
    }
    var obj2:muchType = { 
        age:10
    }
    var obj3:muchType = { 
        name:'lisi',
        age:20
    }
    
    // 限制字符串的选择
    type sex = 'man'|'woman';
    function gets(s:sex):string { 
        return s;
    }
    gets('man')

### Typescript 枚举 ###

*  枚举（enum）类型用于取值被限定在一定范围内的场景，采用关键字enum定义，例如：enum Days\{Sun,Mon,Tue,Wed,Thu,Fri,Sat\}
 *  枚举成员会被赋值为从0开始递增的数字，同时也会被枚举值到枚举名进行反向反射

// 使用枚举可以定义一些有名字的数字常量
    enum Days{ 
        Sun,
        Mon,
        Tue,
        Wen,
        Thu,
        Fri,
        Sat
    }
    console.log(Days.Sun) //0
    console.log(Days.Sat) //6

### Typescript类的修饰符 ###

*  public修饰的属性和方法是共有的，可以在任何地方被访问到，默认所有的属性或者方法都是public的
 *  private修饰的属性或者方法是私有的，不能在声明它的类外面访问
 *  protected修饰的属性或者方法是受保护的，它和private类似

### Typescript泛型 ###

*  泛型是指在定义函数、接口或类的时候，不预先指定具体类型，而在使用的时候再指定类型的一种特性

// 方法中使用泛型
    function createArray<T>(length: number, value: T):Array<T> { 
        let arr = [];
        for (var i = 0; i < length; i++) { 
            arr[i] = value;
        }
        return arr;
    }
    let strArray: string[] = createArray<string>(3, '1');
    let numArray: number[] = createArray(3, 1); // 不传的时候，会根据类型进行倒推
    
    // 接口当中使用泛型 使用泛型可以使代码更健壮，更利于维护
    interface ICreate { 
        <T>(name: string, value: T): Array<T>
    }
    let func: ICreate;
    func = function<T>(name: string, value: T):Array<T> { 
        return [];
    }
    let strArr: string [] = func('lisi', '2')