Typescript快速上手（js转ts必备）

接口interface

1、定义一个接口

LabelledValue ，在传参数的时候使用labelledObj：LabelledValue

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

2、？：可选属性

interface SquareConfig {
  color?: string;
  width?: number;
}

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误，比如你去使用接口内的color 拼错会提示：

  // Error: Property 'clor' does not exist on type 'SquareConfig'

3、只读属性：readonly

interface Point {
    readonly x: number;
    readonly y: number;
}

只能在对象刚刚创建的时候修改其值。

非要重写时，使用类型断言

a = ro as number[];

4、函数类型

interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}
// 这里函数的参数名不需要与接口里定义的名字相匹配
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

boolean是返回值类型

(source: string, subString: string) 是传参类型定义

5、可索引类型

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

这里的索引类型是number

6、类类型

在接口中描述一个方法，在类里实现它

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

7、继承接口

一个接口可以继承多个

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

interface xxx extends xxx

使用时：square = <Square>{}

8、混合类型

9、接口继承类

枚举enum

使用枚举我们可以定义一些带名字的常量。

1、数字枚举

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

Down 就是2，依次类推

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

不初始化时从0开始

使用：

通过枚举的属性来访问枚举成员，和枚举的名字来访问枚举类型

enum Response {
    No = 0,
    Yes = 1,
}

function respond(recipient: string, message: Response): void {
    // ...
}

respond("Princess Caroline", Response.Yes)

函数

1、定义类型：

let myAdd: (baseValue: number, increment: number) => 
number = function(x: number, y: number): number { return x + y; };

只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。

2、推断类型

尝试这个例子的时候，你会发现如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型：

// myAdd has the full function type 
let myAdd = function(x: number, y: number): number { return x + y; }; 
// The parameters `x` and `y` have the type number
let myAdd: (baseValue: number, increment: number) => number =    function(x, y) { return x + y; };

3、可选参数和默认参数 ?

TypeScript里的每个函数参数都是必须的。这不是指不能传递 null或undefined作为参数，而是说编译器检查用户是否为每个参数都传入了值。编译器还会假设只有这些参数会被传递进函数。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string)
{    return firstName + " " + lastName; } 
let result1 = buildName("Bob");         //error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");//error, too many parameters 
let result3 = buildName("Bob", "Adams");        // ah, just right

在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。比如，我们想让last name是可选的：

可选参数必须跟在必须参数后面。 如果上例我们想让first name是可选的，那么就必须调整它们的位置，把first name放在后面。

如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值。

function buildName(firstName = "Will", lastName: string) 
{    return firstName + " " + lastName; } 
let result1 = buildName("Bob");      // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");// error, too many parameters
let result3 = buildName("Bob", "Adams");     // okay and returns "Bob Adams"   
let result4 = buildName(undefined, "Adams");// okay and returns "Will Adams"

4、剩余参数 …

在JavaScript里，你可以使用 arguments来访问所有传入的参数。

在TypeScript里，你可以把所有参数收集到一个变量里：

function buildName(firstName: string, ...restOfName: string[]) 
{  return firstName + " " + restOfName.join(" "); } 
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

泛型<>

我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。之后我们再次使用了 T当做

function identity<T>(arg: T): T {    return arg; }

function loggingIdentity<T>(arg: T[]): T[]
{    console.log(arg.length);  // Array has a .length, so no more error 
 return arg; }

function loggingIdentity<T>(arg: Array<T>): Array<T> {   
  console.log(arg.length);  // Array has a .length, so no more error   
 return arg; }