关于typescript:typescript语法大全

介绍

这是一篇 typescript 的语法说明书, 欢送拜访我的博客

装置

    npm install -g typescript
    tsc hello.ts 编译 ts 文件 

数据类型

// boolean:
    let isDone: boolean = false

// number, string, void, null, undefined,any

// union:
    let myFavoriateNumber: string | number

// interfaces: 对行为的形象，而具体如何口头须要由类（classes）去实现（implement）interface: Person {
        name: string;
        age?: number; // age 是可选属性, 用？示意可选
        [propName: string]: any; // 容许有任意的属性
        readonly id: number // 只读属性
    }

// array:
    let fibonacci: number[] = [1, 1, 2, 3, 5]

函数

function buildName(firstName: string = 'cat', lastName?:string, ...items: any[]):string{let r: number[] = []
      items.forEach(item => r.push(item))
      return lastName ? firstName + lastName : firstName
}

// 函数重载
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {if (typeof x === 'number') {return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {return x.split('').reverse().join('');
    }
}

类型断言

interface Cat {
    name: string;
    run(): void;}
interface Fish {
    name: string;
    swim(): void;}
function isFish(animal: Cat | Fish) {
    // 应用类型断言 "值 as" 的形式解决了联结类型变量只能拜访共有属性的问题
    if(typeof (animal as Fish).swim === 'function') {return true;}
    return false;
}
(window as any).foo = 1

申明与导出

// 申明全局变量
declare var
// 申明全局办法
declare function
// 申明全局类
declare class
// 申明全局枚举类型
declare enum
// 申明（含有子属性的）全局对象
declare namespace
// 申明全局类型
interface 和 type
// 导出变量
export
// 导出（含有子属性的）对象
export namespace
// ES6 默认导出
export default
// 导出模块
export = commonjs
// UMD 库申明全局变量
export as namespace
// 扩大全局变量
declare global
// 扩大模块
declare module
/// <reference /> 三斜线指令
// 在引入内部文件的时候，比方 jquery, 因为 ts 中在编译过程的时候，须要每个变量进行定义
declare var jQuery: (selector: string) => any
declare namespace JQuery {function ajax(url: string, settings?: any): void
}

类型别名

type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver

字符串字面量类型

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {// do something}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

元祖

let tom: [string, number] = ['tom', 25]

枚举

// 默认第一个是 0，顺次递减少一
enum Days {sun, mon, tue, wed, thr, fir, sat}
enum Days {sun=7, mon=1, tue, wed, thr, fri, sat}

类

// 抽象类的形象办法，继承的类要具体实现
public, private, protect, static, readonly, abstract

接口

// 接口能够继承接口
// 一个类能够实现多个接口
// 接口能够继承类
interface Alarm {alert():void
}
class Door {}
class SecurityDoor extends Door implements Alarm {alert() {console.log('securitydoor')
    }
}

泛型

// 在函数外部应用泛型变量的时候，因为当时不晓得它是哪种类型，所以不能随便的操作它的属性或办法
// 然而能够通过束缚的方法解决这个问题
interface Lengthwise {length: number;}

function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);
    return arg;
}
// 泛型的写法
function createArray<T>(length: number, value: T):Array<T>{let result: T[] = []
    for (let i = 0; i < length; i++) {result[i] = value
    }
    return result
}
create<string>(3, 'x')

// 多个类型参数
function swap<T, U>(tuple: [T, U]): [U, T] {return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]
// 泛型接口
nterface CreateArrayFunc<T> {(length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {let result: T[] = [];
    for (let i = 0; i < length; i++) {result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']
// 泛型参数的默认类型
function createArray<T = string>(length: number, value: T): Array<T> {let result: T[] = [];
    for (let i = 0; i < length; i++) {result[i] = value;
    }
    return result;
}

申明合并

// 函数的合并
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {if (typeof x === 'number') {return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {return x.split('').reverse().join('');
    }
}

接口的合并

interface Alarm {price: number;}
interface Alarm {weight: number;}