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. echarts3 清空上一次加载的series数据

    今天做图表的时候发现了一个问题,想和大家分享一下 我有一个下拉选框,每次选中都切换不同的数据,数据是从后台查询获取的,但是如果后台返回了数据每次渲染都没有问题,如果后台没有返回数据,但是我在渲染图表的 ...

  2. hibernate查询部分字段转换成实体bean

    //hibernate查询部分字段转换成实体bean /** * 查询线路信息 */ @Override public List<Line> getSimpleLineListByTj(M ...

  3. 推荐几款.NET客户端开源报表图

    如果你正在开发客户端报表图相关的应用,除了.NET自带的控件,你还可以考虑使用以下几个控件库. [OxyPlot] OxyPlot是一个支持.NET的跨平台绘图库.你可以在很多平台上使用它,如WPF, ...

  4. 1000行代码徒手写正则表达式引擎【1】--JAVA中正则表达式的使用

    简介: 本文是系列博客的第一篇,主要讲解和分析正则表达式规则以及JAVA中原生正则表达式引擎的使用.在后续的文章中会涉及基于NFA的正则表达式引擎内部的工作原理,并在此基础上用1000行左右的JAVA ...

  5. PHP加密字符串函数(Discuz内置的)

    接触Discuz有一段时间了,一直很喜欢这个论坛程序,确实是一个很不错的程序,灰常值得我们去学习,这里介绍它其中的一个加密函数(含解密)这个加密函数的特点在于,比普通的加密函数多了一个随机密钥 ,可以 ...

  6. java程序员常见面试题目

      答:每当程序出现异常之后,如果程序没有进行相应的处理,则程序会出现中断现象.实际上,产生了异常之后,JVM会抛出一个异常类的实例化对象,如果此时使用了try语句捕获的话,则可以进行异常的处理,否则 ...

  7. wampserver2.5局域网IP访问配置

    wampserver2.5集成环境的安装和使用就不多说了,网上有很多教材.安装好后找到apache的配置文件httpd.conf.默认位置是: swap安装目录\wamp\bin\apache\apa ...

  8. docker~Dockerfile优化程序的部署

    回到目录 一些理论 我们都知道docker这个容器工具可以帮助我们快速进行环境的部署,这对于运营人员来说,无疑是个福音,而这个工作大叔认为不应该是运营人员干的,而是由开发人员来做,因为只有你知道你干的 ...

  9. Android不编译某个模块

    Android 5.1 源码,编译相关的文件一般在build目录下build/target/product 放了很多mk文件:一般不同的产品会有不同的目录 假设我不想编译OpenWnn,在build目 ...

  10. Java - static的注意点

    静态函数与静态变量无需生成对象 静态函数只能调用静态变量 装载类的时候执行静态代码块 静态函数中不能使用this /* * For test static * 2014-10-26 */ public ...