TypeScript手册1 - 基本类型和接口

2022-02-12 00:07:07

基本类型

像基本的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;

  }

}

码农公寓