TypeScript —— 基础知识篇

Posted yanghana

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeScript —— 基础知识篇相关的知识,希望对你有一定的参考价值。

一、配置及基本操作

  1. 全局安装TypeScript cnpm install -g typescript

  2. tsc -v 查看版本

  3. tsc hello.ts 编译,将ts文件编译成js文件

二、定义变量类型

技术图片
var str: string = ‘hello‘;
var num: number = 1;
var flag: boolean = true;
var un: undefined = undefined;
var nul: null = null;
var callBack = function():void{}  //代表函数不能有返回值
var num2: any = 1;
num2 = true;
//any 为任意值类型 当定义了any类型,之后可以复制任意值
var num2; //这样也表示任意值any类型,等价于var num2: any = 1;
View Code

 

类型推论

给变量赋予初始值的时候,如果没有指定类型,会自动根据初始值倒推类型

技术图片
var b = 1;  //会默认为number类型
b = true;  //当给b赋值为其他类型的时候回报错
View Code

注意: var b 和 var b = 1指定的类型不相同,前者是any类型,后者是number类型

 

联合类型

表示取值可以为多种类型中的一种

技术图片
var b: number|boolean = 5;
b = false; //正确不报错
View Code

 

只能访问联合类型内的所有类型中共有的属性或者方法

比如:

技术图片
var b: number|string = 5;
b = ‘hello‘;
console.log(b.length) //这样就会报错,因为number类型没有length属性
console.log(b.toString()) //这个方法正确,以为toString()是两者都有的方法
View Code

 

三、对象类型-接口

  1. 定义接口

    技术图片
    interface One {
        name: string,
        age: number
    }
    ?
    var obj1: One;
    obj1 = {
        name: "hannah",
        age: 10   //这两个字段要严格对应定义的接口的类型和字段,上面定义两个下面要赋值两个,只写一个name或只写一个age都不可以
    }
    View Code

     

     
  1. 定义可选属性

    技术图片
    interface Two {
        name: string,
        age?: number
    }
    ?
    var obj2: Two;
    obj2 = {
        name: "hannah" //字段要按照上面定义的类型,但是 age+? 就代表可选,可有可无
    }
    View Code

     

     

  1. 属性个数不确定的时候

    技术图片
    interface Three {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    ?
    var obj3: Three;
    obj3 = {
        name: "hannah",
        age: 23,
        gender: "女",
        isMarry: false
    }
    View Code

     

     

  1. 只读属性

    技术图片
    interface Four {
        name: string;
        readonly age: number  //一经赋值不可修改
    }
    ?
    var obj4: Four;
    obj4 = {
        name: ‘hannah‘,
        age: 23  //一经赋值不可修改
    }
    obj4.name = ‘han‘;
    obj4.age = 20; //报错
    View Code

     

     

四、数组类型

  1. 第一种 类型+[] 的形式

    技术图片
    var arr: number [] = [1,2,3];
    var arr2: string [] = [‘1‘,‘2‘,‘3‘];
    var arr3: any [] = [1,‘2‘, true]
    View Code

     

  2. 第二种 数组泛型 Array<elemType> 的形式

    技术图片
    var arrType: Array<number> = [1,2,3];
    var arrType2: Array<boolean> = [true, false];
    var arrType3: Array<any> = [1,‘2‘,false]
    View Code

     

     

  1. 第三种 接口表示法

    技术图片
    interface Five {
        [index: number]: number;  // key value
    }
    ?
    var arrType4: Five = [1,2,3]
     
    
    interface Father {
        username: string;
        age: number
    }
    ?
    interface Five {
        [index: number]: Father;  // key value
    }
    ?
    var arrType4: Five = [{username: ‘hannah‘,age: 23}]
    View Code

     

     

五、函数类型

  1. 声明式函数

    技术图片
    function funcType(name: string, age: number): number{//这里代表返回的是number类型
        return age;
    }
    View Code
    1. 函数参数不确定

      技术图片
      function funcType(name:string,age:number,sex?:string): number{
          return age;
      }
      View Code

       

    2. 函数参数的默认值

      技术图片
      function funcType(name:string=‘hannah‘,age:number=23): number{
          return age;
      }
      View Code

       

  2. 表达式类型的函数

    1. 函数的约束规范

      技术图片
      var funcType1 = function(name:string,age:number):number{
          return age
      }
      View Code

       

    2. 变量名以及函数的约束规范

      技术图片
      var funcType3:(name:string,age:number)=>number = function(name:string,age:number):number{
          return age;
      }
      View Code

       

         

    3. 接口式对变量名的约束规范
      技术图片
      interface funcType4 {
          (name: string, age: number) : number;
      }
      ?
      var funcType4: funcType4 = function(name: string,age: number): number{
          return age;
      }
      View Code

       

 

  1. 对于联合类型的函数,可以采用重载的方式

    技术图片
    //输入时number类型,输出也是number类型
    //输入时string类型,输出也是string类型
    ?
    function getValue(value:number): number;
    function getValue(value:string): string;
    function getValue(value:string|number):string|number{
        return value;
    }
    ?
    let q: number = getValue(1);
    let b: string = getValue(‘1‘);
    View Code

     

     

六、类型断言

用来手动指定一个值得类型,只能断言联合类型中存在的类型

技术图片
function gerAssert(name:string|number){
    return (<string>name).length  //第一种断言方式 指定为name是string类型而不是number类型
    return (name as string).length  //第二种断言方式
}
View Code

 

注意:在react中jsx语法为ts版时,尽量不要使用第一种断言方式

 

七、类型别名

类型别名可以用来给一个类型起一个新名字,采用关键词type

  1. 类型别名

    技术图片
    type strType = string | number | boolean;
    ?
    var strT: strType = ‘10‘;
    strT = 10;
    strT = true;
    View Code

     

  2. 对于接口也可采用类型别名

    技术图片
    interface muchType1 {
        name: string
    }
    interface muchType2 {
        age: number
    }
    type muchType = muchType2 | muchType1;
    ?
    var obj11: muchType = {name: ‘hannah‘}
    var obj22: muchType = {age: 10}
    var obj33: muchType = {name: ‘han‘, age: 23}
    View Code

     

  3. 限制字符串的选择

    技术图片
    type sex = "男" | "女";
    function getSex(s:sex): string {
        return s
    }
    ?
    getSex(‘1‘) //报错类型“"1"”的参数不能赋给类型“sex”的参数
    getSex(‘女‘)
    View Code

     

八、枚举(Enum)

  1. 使用枚举可以定义一些有名字的数组常量,枚举成员会被赋值为从0开始递增的数字

    技术图片
    enum Days{
        Sun,
        Mon,
        Tue,
        Wed,
        Thu,
        Fri,
        Sat
    }
    ?
    console.log(Days.Sun)   // 0
    console.log(Days.Sat)   // 6
    ?
    enum Day{
        Sun = 3,
        Mon,
        Tue,
        Wed,
        Thu,
        Fri,
        Sat
    }
    ?
    console.log(Day.Sun)   // 3
    console.log(Day.Sat)   // 9
    View Code

     

    编译成js文件后:

    技术图片
    var Days;
    (function (Days) {
        Days[Days["Sun"] = 0] = "Sun";
        Days[Days["Mon"] = 1] = "Mon";
        Days[Days["Tue"] = 2] = "Tue";
        Days[Days["Wed"] = 3] = "Wed";
        Days[Days["Thu"] = 4] = "Thu";
        Days[Days["Fri"] = 5] = "Fri";
        Days[Days["Sat"] = 6] = "Sat";
    })(Days || (Days = {}));
    console.log(Days.Sun); // 0
    console.log(Days.Sat); // 6
    View Code

     

     

  1. 同时也会被枚举值到枚举名进行反向映射

    技术图片
    console.log(Days)
    ==>
        {
        0: "Sun"
        1: "Mon"
        2: "Tue"
        3: "Wed"
        4: "Thu"
        5: "Fri"
        6: "Sat"
        Sun: 0
        Mon: 1
        Tue: 2
        Wed: 3
        Thu: 4
        Fri: 5
        Sat: 6
        }
    View Code

     

     

九、类的修饰符

  1. public

    当一个类成员变量没有修饰的时候,外界是可以进行访问的,默认就是public进行修饰

    public修饰的属性或者方法是共有的,可以在任何地方被访问到

    技术图片
    //创建Person类
    class Person {
        name = ‘hannah‘;
        age = 18;
        say() {
            console.log(‘我的名字是‘+this.name+‘,我的年龄是‘+this.age)
        }
    }
    ?
    //创建Person的实例
    var p = new Person()
    p.say()
    console.log(p.name)
    View Code

     

  2. private

    修饰的属性或者方法是私有的,不能在声明它的类外面访问

  3. protectd

    修饰的属性或者方法是受保护的,它和private类似

  4. static

    类的静态方法里面不允许用this

十、泛型

泛型是指在定义函数、接口或类的时候,不预先指定具体类型,而在使用的时候再指定类型的一种特征,可以来帮助我们限定约束规范

技术图片
function createArray<T>(length:number,value:T): Array<T>{
    let arr = [];
    for(var i = 0; i <length; i++) {
        arr[i] = value;
    }
    return arr;
}
?
var strArray: string[] = createArray<string>(3,‘1‘)  //限定了为string类型
var numArray: number[] = createArray(3,1)  //不传的时候根据类型进行倒推
 
View Code

以上是关于TypeScript —— 基础知识篇的主要内容,如果未能解决你的问题,请参考以下文章

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

深入理解TypeScript——第一章:上手篇

typeScript函数篇

typescript 打字稿+角度1的启动片段