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!

TypeScript基础数据类型的更多相关文章

  1. TypeScript学习指南第一章--基础数据类型(Basic Types)

    基础数据类型(Basic Types) 为了搭建应用程序,我们需要使用一些基础数据类型比如:numbers,strings,structures,boolean等等. 在TypeScript中除了Ja ...

  2. 《前端之路》 - 初试 TypeScript(一)基础数据类型

    一.先讲讲 TypeScript 什么是 typeScript ? typeScript 是 Javascript 的超集 我们用一张图来简单介绍下 ts 和 js 清清楚楚明明白白的关系- 为什么会 ...

  3. TypeScript基础学习

    什么是TypeScript? TypeScript是一种由微软开发的自由的和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法. TypeScript支持任意浏览器, ...

  4. TypeScript基础以及在Vue中的应用

    TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...

  5. TypeScript_基础数据类型

    TypeScript 的基础数据类型包含: string.number.boolean.array .object.null.undefined.enmu.void.never.any.tuple 注 ...

  6. [.net 面向对象编程基础] (3) 基础中的基础——数据类型

    [.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...

  7. 【Swift】学习笔记(一)——熟知 基础数据类型,编码风格,元组,主张

    自从苹果宣布swift之后,我一直想了解,他一直没有能够把它的正式学习,从今天开始,我会用我的博客来驱动swift得知,据我们了解还快. 1.定义变量和常量 var  定义变量,let定义常量. 比如 ...

  8. 二、Windows基础数据类型

    六.Windows Data Types 简介: 6.1.这些数据类型都是C语言数据类型的再次的进行包装. 6.2.因为考虑到如果使用的是C中的基础数据类型可能无法表示,想表示的精准的含义. 6.3. ...

  9. java基础数据类型包装类

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

随机推荐

  1. .Net上传文件大小配置

    1.起因 今天同事在上传文件的时候,发现一直失败,说文件比较大.一听就明白了,肯定是上传文件大小的问题啊.然后查看web.config文件,发现设置过文件上传的大小限制.配置文件上传大小,分为2部分. ...

  2. EL表达式拼接字符串

    EL表达式拼接字符串<c:set var="types" value="${','}${resMap['vo'].lineType }${','}" &g ...

  3. 在CentOS7上使用systemctl配置tomcat

    最近买了一台阿里云,现在阿里云CentOS都已经支持7了(前面都是使用CentOS6),索性直接使用CentOS7,7上面目前最大区别就是service变成了现在的systemctl,简单的查了一下并 ...

  4. date时间转换

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  5. 通过history解决ajax不支持前进/后退/刷新

    前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器“后退”和“前进“键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互 ...

  6. (转载)jConsole,jvisualvm和jmap使用

    原文链接:http://my.oschina.net/freegarden/blog/286372 摘要 Oracle JVM自带了一些工具,观察java程序的运行,用于排错调优.正文将会对 jCon ...

  7. 与你们分享我学习linux系统的三大妙招

    一说到linux,我们就自然会想到企业服务器系统,目前市场上的网络设备都是使用linux内核操作系统,一些网络服务器也是使用linux操作系统下面的服务搭建实现的:目前操作系统这块也基本被linux占 ...

  8. Oracle查询多行数据合并成一行数据

    例如: select base_id, translate (ltrim (text1, '/'), '*/', '*,') xmmc,translate (ltrim (text2, '/'), ' ...

  9. 实现一个栈类,类似STL中的栈

    1.思路讲解 stack集合类是一个简单的堆栈的实现. 这里有两个模板参数,T和size,T用于指定堆栈中的元素类型,my_size用于表示堆栈中项数的最大值. 类中添加方法isempty.isful ...

  10. OCP 11G 实验环境安装文档 ( RedHat5.5 + Oracle11g )

    RedHat5.5 linux下Oracle11g软件安装 一.配置虚拟机 为了创建和配置虚拟机,你需要添加硬件设备如磁盘和cpu,在你开始安装之前,创建一个windows目录作为存放虚拟机的目录 目 ...