typescript语法大全

Posted 2021-09-14 河畔的风

介绍

这是一篇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;
}