2019-02-26-typescript学习

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user: string = 'Tom';
let isDone: boolean = false;
let anyThing: any = 'Tom';

// JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数
function logName(): void {
  console.log('My name is Tom');
}

// 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

//访问 string 和 number 的共有属性是没问题的：
function getString(something: string | number): string {
    return something.toString();
}

// 接口
interface Person {
  name: string;
  age?: number;
  // 一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
  [propName: string]: string | number | undefined;
}

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};

// 数组
let fibonacci: number[] = [1, 1, 2, 3, 5]; // 最简单的方法是使用「类型 + 方括号」来表示数组
let fibonacci1: Array<number> = [1, 1, 2, 3, 5]; // 数组泛型
function sum() {
  // 事实上常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：
  let args: IArguments = arguments;
}

// 函数
function sum1(x: number, y: number): number {
  return x + y;
}
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};
// 函数重载
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | undefined {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

// 类型断言 <类型>值 或者 值 as 类型
function getLength(something: string | number): number {
  if ((\<string\>something).length) { // \号转义，防止md文件失效
      return (\<string\>something).length;
  } else {
      return something.toString().length;
  }
}

// 声明文件
// 需要注意的是，声明语句中只能定义类型，切勿在声明语句中定义具体的实现
// 除了全局变量之外，可能有一些类型我们也希望能暴露出来。在类型声明文件中，我们可以直接使用 interface 或 type 来声明一个全局的接口或类型
/**
 *  declare var 声明全局变量
    declare function 声明全局方法
    declare class 声明全局类
    declare enum 声明全局枚举类型
    declare namespace 声明（含有子属性的）全局对象
    interface 和 type 声明全局类型
 */
declare const jQuery: (selector: string) => any;
declare function jQuery1(selector: string): any;
declare class Animal1 {
  name: string;
  constructor(name: string);
  sayHi(): string;
}
interface AjaxSettings {
  method?: 'GET' | 'POST'
  data?: any;
}
interface Alarm {
  alert() : undefined;
}

// 类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

// 字符串字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: HTMLElement | null, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题

// 元组
// 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象
let tom1: [string, number] = ['Tom', 25];

// 枚举
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
const enum Directions {
  Up,
  Down = 19,
  Left,
  Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

// 类
class Animal {
  public name : string;
  public constructor(name : string) {
      this.name = name;
  }
  sayHi() {
    return `My name is ${this.name}`;
  }
}
class Cat extends Animal {
  constructor(name : string) {
    super(name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
  }
}
let a = new Animal('Jack');
console.log(a.name);
a.name = 'Tom';
let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom

// 泛型--泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性
function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]