换个角度看下，Ts真的挺香的

ts使用技巧

变量、属性

把变量置空

<code>// null、undefined为任意类型子类型
let num: number = undefined;
let num: number = null;/<code>

访问任意属性

<code>let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);/<code>

访问任意方法

<code>let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');/<code>

<code>let something;
something = 'seven';
something = 7;

something.setName('Tom');

等价于
let something:any;
something = 'seven';
something = 7;

something.setName('Tom');/<code>

不让别人修改类型- 自己定义

<code>let myFavoriteNumber:string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'./<code>

不让别人修改类型- ts推导类型

<code>let myFavoriteNumber = 'seven'; 

myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'./<code>

限定变量类型 - 联合类型

<code>let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;/<code>

对象

对象Some属性可有可无

<code>interface Person {
    name: string;
    age?: number;
}
let person:Person = {
    name:'xiao'
}/<code>

对象N个字符串属性

<code># 其余类推，你懂滴~
interface Person {
    [propName: string]: string;
}/<code>

对象Some属性不可修改

<code>interface Person {
    readonly id: number;
    name: string;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
};
 

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property/<code>

数组

定义数组 - +[] 类型>

<code>let fibonacci: number[] = [1, 1, 2, 3, 5];/<code>

定义数组 - 泛型

<code>let fibonacci: Array<number> = [1, 1, 2, 3, 5];/<number>/<code>

定义数组 - 接口

<code>interface NumberArray {
    //索引的类型是数字时，值的类型必须是数字
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];/<code>

定义数组 - 类型混合双打

<code>let tom: [string, number] = ['Tom', 25];

#赋值部分
let tom: [string, number];
tom[0] = 'Tom';
/<code>

函数

<code>function (x: number, y: number): number {
    return x + y;
};/<code>

定义函数 - 函数表达式

<code>let mySum = function (x: number, y: number): number {
    return x + y;
};/<code>

定义函数 - 接口

<code>interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}/<code>

定义函数 - 接口添加属性

<code>interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;/<counter>/<code>

定义函数 - 泛型

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

createArray<string>(3, 'x'); // ['x', 'x', 'x']/<string>/<code>

定义函数 - 多泛型

<code># ts 2.3+,泛型指定默认类型
function swap(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]/<code>

定义函数 - 泛型+属性、方法

<code>interface Lengthwise {
    length: number;
    count:() => {}
}

function loggingIdentity(arg: T): T {
    console.log(arg.length);
    return arg;
}/<code>

定义函数 - 泛型 + 接口

<code>interface CreateArrayFunc {
    (length: number, value: T): Array;
}

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

函数参数 - 枚举

<code>enum ETYPE{
    CLICK,
    DBCLICK
}
function handleEvent(ele: Element, event: ETYPE) {
    // do something
}

handleEvent(document.getElementById('hello'), ETYPE.CLICK);  
handleEvent(document.getElementById('hello'), ETYPE.DBCLICK);/<code>

函数参数 - 枚举值更有意义

<code>enum ETYPE{
    CLICK = ‘click’,
    DBCLICK = 'double-click'
}
function handleEvent(ele: Element, event: ETYPE) {
    // do something
}

handleEvent(document.getElementById('hello'), ETYPE.CLICK);  
handleEvent(document.getElementById('hello'), ETYPE.DBCLICK);/<code>

函数参数 - 别名

<code>type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'/<code>

函数参数个数 - 固定

<code>    function sum(x: number, y: number): number {
        return x + y;
    }
    sum(1, 2, 3);

    // index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target/<code>

函数参数个数 - 不固定

<code> function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}
let a = [];
push(a, 1, 2, 3);/<code>

函数参数《类型不定》- 类型判断

<code>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('');
    }
}/<code>

函数参数《类型不定》- 类型断言

<code>function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}/<string>/<string>/<code>

函数参数《类型不定》- 自定义联合类型（别名）

<code>type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}/<code>

调用不同实现同名方法

<code>function getString(something: string | number): string {
    return something.toString();
}/<code>

函数参数可有可无 - 可选？

<code>function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');/<code>

函数参数可有可无 - 默认值

<code>function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');/<code>

Tshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

Boolean、Error、Date、RegExp

<code>let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;/<code>

Document、HTMLElement、Event、NodeList

<code># 浏览器环境需要用到的类型，并预置在 TypeScript 中
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});/<code>

nodejs类型非预置

<code>npm install @types/node --save-dev/<code>

类

类定义- 私有属性

<code>class Animal {
    private name;
    private constructor (name) {
        this.name = name;
  }
}/<code>

类定义 - 公有属性

<code>class Animal {
    public name;
    private constructor (name) {
        this.name = name;
  }
}/<code>

类定义 - 只读属性

<code>class Animal {
    readonly name;
    public constructor(name) {
        this.name = name;
    }
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property/<code>

类定义 - 抽象方法

<code>abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi(); 

}
/<code>

类定义 - 继承与实现

<code>interface Alarm {
    alert();
}
interface Light {
    lightOn();
    lightOff();
}
class Door {
}

class SecurityDoor extends Door implements Alarm,Light {
    alert() {
        console.log('SecurityDoor alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}/<code>

类定义 - 泛型

<code>class GenericNumber {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };/<number>/<code>

接口

接口定义 - interface

<code>interface Alarm {
    alert();
}/<code>

接口定义 - 继承接口

<code>interface Alarm {
    alert();
}

interface LightableAlarm extends Alarm {
    lightOn();
    lightOff();
}/<code>

接口定义- 继承类

<code>class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};/<code>

es6 、es7

类的定义 - es6

<code>class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}
 

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack/<code>

类的定义 - es7

<code>class Animal {
    name = 'Jack';

    constructor() {
        // ...
    }
}

let a = new Animal();
console.log(a.name); // Jack/<code>

类的继承-es67

<code>class Cat extends Animal {
    constructor(name) {
        super(name); // 调用父类的 constructor(name)
        console.log(this.name);
    }
    sayHi() {
        return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
    }
}

let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom/<code>

类的静态方法 - es67

<code>class Animal {
    static isAnimal(a) {
        return a instanceof Animal;
    }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true/<code>

类的静态属性 - es7

<code>class Animal {
    static num = 42;
 

    constructor() {
        // ...
    }
}

console.log(Animal.num); // 42/<code>

参考文献

• ts.xcatliu.com/basics/any

本文作者：前端首席体验师(CheongHu)

联系邮箱：[email protected]

閱讀更多 前端漫談 的文章

關鍵字: 挺香 斐波那契