zoukankan      html  css  js  c++  java
  • TypeScript手册1

    基本类型

    像基本的JavaScript一样,TypeScript支持numbers, strings, structures, boolean等基本类型,而扩展的enum等类型,为编程提供了更多帮助。 

    Boolean 

    这是最简单的类型

     
    var isDone: boolean = false;
    

    Number

    在JavaScript中,所有数字都是浮点类型,TypeScript中也一样。 

    var height: number = 6;
    

    String

    文本型数据也是一种常见类型,其常量用双引号(")或单引号(')引起来。 

    var name: string = "bob";
    name = 'smith'; 

    Array

     数组类型可以用两种方式表达。 第一种, 在使用的类型元素之后加上[] 来表示一个Array元素的类型: 

    var list:number[] = [1, 2, 3];
    

    第二种方法使用一个通用的Array类型,Array< elemType >: 

    var list:Array<number> = [1, 2, 3];
    

    Enum枚举

      像语言c#,enum是一种更友好的名字给的数值。 

    enum Color {Red, Green, Blue};
    var c: Color = Color.Green;
    

    默认情况下,枚举成员从0开始编号。 但可以通过给元素赋值来改变编号。 例如,我们可以在1而不是0开始前面的示例:

    enum Color {Red = 1, Green, Blue};
    var c: Color = Color.Green;
    

    或者,甚至手动设置所有的枚举值: 

    enum Color {Red = 1, Green = 2, Blue = 4};
    var c: Color = Color.Green;
    

    从枚举值的编号获取名称很方便。 例如,如果我们有值2,但不确定的映射到上面的颜色枚举,我们可以这样查找相应的名称: 

    enum Color {Red = 1, Green, Blue};
    var colorName: string = Color[2];
    
    alert(colorName);
    

    Any

    表示一种未知或可变的类型: 

    var notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean

    Any为TypeScript提供了和JavaScript进行数据交互的强大能力。 

    Any类型让一个数组中可以混合多种数据: 

    var list:any[] = [1, true, "free"];
    
    list[1] = 100;
    

    Void

    有时一个函数没有返回值,用void来表示: 

    function warnUser(): void {
        alert("This is my warning message");
    }
    


    接口

    接口为编程带来了非常多的好处,很多语言和设计模式中,接口都是一个重要角色 

    我们的第一个Interface

     一个简单的例子: 

    function printLabel(labelledObj: {label: string}) {
      console.log(labelledObj.label);
    }
    
    var myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);
    

    类型检查器检查调用“printLabel”。 printLabel的函数只有一个参数,要求传入的对象有一个属性被称为“标签”类型的String。 请注意,我们的对象实际上有更多的属性 比这个,但是编译器只检查参数规定的label属性。 

    我们可以写同样的例子,这一次使用一个接口来描述需求的“标签”的属性是一个String: 

    interface LabelledValue {
      label: string;
    }
    
    function printLabel(labelledObj: LabelledValue) {
      console.log(labelledObj.label);
    }
    
    var myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);
    
    这种实现方式功能和上例相同,只是有了更明确的接口。 
      

    可选属性

    有时接口中的属性并不是必须的,可选属性可以满足这种需求。 

    这是这种模式的例子: 

    interface SquareConfig {
      color?: string;
      width?: number;
    }
    
    function createSquare(config: SquareConfig): {color: string; area: number} {
      var newSquare = {color: "white", area: 100};
      if (config.color) {
        newSquare.color = config.color;
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }
    
    var mySquare = createSquare({color: "black"});
    

    带"?"的属性就是可选属性。  

    可选属性的优点是可以对匹配的属性进行类型检查,同时又保持了高度灵活性: 

    interface SquareConfig {
      color?: string;
      width?: number;
    }
    
    function createSquare(config: SquareConfig): {color: string; area: number} {
      var newSquare = {color: "white", area: 100};
      if (config.color) {
        newSquare.color = config.collor;  // 这里编译器会进行类型检查
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }
    
    var mySquare = createSquare({color: "black"});  
    

    函数型接口

    接口能够描述各种各样的,JavaScript对象。 除了描述一个对象的属性外,Interface也能够描述函数类型。 

    函数型接口规定了函数的参数和返回值。  

    interface SearchFunc {
      (source: string, subString: string): boolean;
    }
    

    下面是应用这个函数型接口的例子。 

    var mySearch: SearchFunc;
    mySearch = function(source: string, subString: string) {
      var result = source.search(subString);
      if (result == -1) {
        return false;
      }
      else {
        return true;
      }
    }
    

    函数型接口只检查参数类型,不检查参数名称。 例如我们可以把上面的例子写成这样: 

    var mySearch: SearchFunc;
    mySearch = function(src: string, sub: string) {
      var result = src.search(sub);
      if (result == -1) {
        return false;
      }
      else {
        return true;
      }
    }
    
  • 相关阅读:
    Linux 常用命令总结(二)
    Linux(CentOS7)使用 RPM 安装 mysql 8.0.11
    Linux(CentOS7) 相关软件安装
    8、js——字符串
    7、js——数组
    6、js——创建对象方式
    5、js——this说明
    4、js——函数
    4、js——对象
    2、js编写位置
  • 原文地址:https://www.cnblogs.com/ybst/p/5117871.html
Copyright © 2011-2022 走看看