zoukankan      html  css  js  c++  java
  • TypeScript基础数据类型

    Typescript与Javascript

    •  二者的区别

      作为前端开发的基础语言javascript已经深入人心,人人皆知。作为变成入门的最简单语言,Javascript语言以动态、弱类型语言而著名,学习入门快,变量随心所欲(呵呵。。),没有其他语言那样严禁的语法规范,可以自由发挥,然而由此换个角度也可以看出,Javascript也并不是一门好语言。尤其是一个新手在构建一个大型项目,就感觉用竹篮子打水,漏洞百出。那么前端开发有没有一门强类型的语言那,答案是必然的,这里就引出了我们的Typescript.

    Typescript官网的快速上手给出了typescript的4个主要特点:编译代码、类型注解、接口、类;作为给予面向对象的语言。类和接口的良好配合使用,决定一个程序员的抽象水平。

      简单来说,typescript作为javascript的超集,不仅仅在于支持javascript,其最大的优势在于scalable,即可扩展性。

      原因, 其实也很简单, 静态类型检查, 代码重构和语言服务,这些都是 JavaScript 的弱势. 项目大了, 很多时候自己的代码怎么用都记不清楚, 当然第三发的类库就不用说了. 而TypeScript, 可以看清楚每一个对象的属性, 方法的参数等, 便利很多. 一些脑残的 typeof 也无影遁形.

      虽然编程语言没有好坏,只有适合不适合,但当你自身升级之后,特别是大型超大型项目,你就越加对强类型语言需求更多。

    • Typescript的基本数据类型

        和其他所有语言一样,typescript需要操作最简单的数据单元,typescript支持与javascript几乎(注意是‘几乎’)相同的数据类型,具体来说有一下12种类型:

    1.布尔值  2.数字  3.字符串  4.数组  5.元组    6.枚举     7.任意值      8.空值     9.null       10.undefined       11.类型断言      12.关于  

    1. 布尔值:最基本的数据 true/false
      let isDone: boolean = false;
    2. 数字:和Javascript一样,typescript的所有数值均为浮点数,此外支持二进制、八进制、十进制、十六进制
      let decLiteral: number = 6;
      let hexLiteral: number = 0xf00d;
      let binaryLiteral: number = 0b1010;
      let octalLiteral: number = 0o744;
    3. 字符串:
      1. 和JavaScript一样,可以使用双引号( ")或单引号(')表示字符串
      2. 此外还支持模板字符串,可以内嵌表达式:
        //string
        let name: string = "bob";
        name = "smith";
        //模板字符串
        let name: string = `Gene`;
        let age: number = 37;
        let sentence: string = `Hello, my name is ${ name }.
        
        I'll be ${ age + 1 } years old next month.`;
    4. 数组:与Javascript一样可以操作数组元素,两种定义方式:
        4.1元素类型+[]
           4.2数组泛型
      let list:number[]=[1,2,3];            //元素+[]
      let list:Array<number>=[1,2,3]; //数组泛型    
    5. 元组:允许表示一个已知数量和类型的数组,数组的各个元素不必相同,如下:
      let x:[string,number];//Declar a tuple type
      x=['hello',10]            //initialize the tuple
      //元组的访问
      //1.访问已知索引元素,返回正确类型
      console.log(x[0].substr(1));    //ok
      console.log(x[1].substr(1));    //Error,'number' dosen't have 'substr'
      //2.访问元组的一个越界元素,会使用联合类型替代
      x[3]='world';                        //ok , 字符串可赋值给(string|number)类型
      console.log(x[5].toString());  //ok , 'string'和‘number'都有toString方法
      x[6]=true;                            //error,布尔类型不是(string|number)类型
    6. 枚举:enum类型是对Javascript标准数据类型的一个扩充,可用枚举类型为一组数值赋予名字;
      enum Color{Red, Green,Blue};
      let c:Color=Color.Green;
      
      //1.为枚举类型元素指定数值/索引下标,(默认从0开始为元素编号)
      enum Color {Red=1,Green,Blue};
      let c:Color=Color.Green;
      
      //2.利用枚举值得到元素名字
      enum Color {Red=1,Green=2,Blue=4};
      let colorName:string=Color[2];                //Green
    7. 任意值:定义那些编程阶段还不清楚类型的变量——避免类型检查
      let notSure:any=4;
      notSure='may a string';//ok
      notSure=false;            //ok
    8. void:没有任何数据类型,比如一个函数没有返回值时:
      //1.没有返回值的函数
      function warnUser():void{
        alert('There is my waring mesage!');  
      } 
      //2.一个void类型变量只能赋值undefined和null
      let unusable:void=undefined;
    9. null/undefined:默认情况下是所有类型的子类型
    10. Never:表示那些永远不存在值的类型,never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。
      //1.返回never的函数必须存在无法到达的终点
      function error(message:string):never{
        throw new Error(message);  
      }
      //2.推断返回值类型为never
      function fail(){
        return error('sonthing failed!')  
      }
      //3.返回never的函数必须无法到达终点
      function infiniteLoop():never{
        while(true){
          }  
      }
    11. 类型断言:手动设置变量类型
      11.1 尖括号法
      11.2 as语法
      //1.尖括号法
      let someValue:any='this is a string';
      let stringLen=number=(<string>someValue).length;
      
      //2. as语法
      let someValue:any='this is a string';
      let strLength:number=(someValue as string).length;
    12. 关于let:类似Javascript中的var      


      ____end!
  • 相关阅读:
    win10安装.net3.5
    VS2015密钥
    wordpress目录文件结构说明
    js | javascript获取和设置元素的属性
    wordpress | WP Mail SMTP使用QQ邮箱发布失败的解决办法
    jquery 实时监听输入框值变化方法
    XPath编写规则学习
    如何将portfolio产品图片上的悬停去掉?
    wordpress怎么禁止文章复制
    js | javascript实现浏览器窗口大小被改变时触发事件的方法
  • 原文地址:https://www.cnblogs.com/hbzyin/p/6508943.html
Copyright © 2011-2022 走看看