换个角度,理解ts如何?

749 阅读5分钟

ts使用技巧

变量、属性

把变量置空

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

访问任意属性

let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);

访问任意方法

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

访问任意属性和任意方法-不声明类型

let something;
something = 'seven';
something = 7;

something.setName('Tom');

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

something.setName('Tom');

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

let myFavoriteNumber:string = 'seven';
myFavoriteNumber = 7;

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

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

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

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

限定变量类型 - 联合类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

对象

对象Some属性可有可无

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

对象N个字符串属性

# 其余类推,你懂滴~
interface Person {
    [propName: string]: string;
}

对象Some属性不可修改

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

数组

定义数组 - <类型>+[]

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

定义数组 - 泛型

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

定义数组 - 接口

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

定义数组 - 类型混合双打

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

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

函数

定义函数 - 函数声明

function (x: number, y: number): number {
    return x + y;
};

定义函数 - 函数表达式

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

定义函数 - 接口

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

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

定义函数 - 接口添加属性

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;

定义函数 - 泛型

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

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

定义函数 - 多泛型

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

swap([7, 'seven']); // ['seven', 7]

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

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

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

定义函数 - 泛型 + 接口

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

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

函数参数 - 枚举

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

handleEvent(document.getElementById('hello'), ETYPE.CLICK);  
handleEvent(document.getElementById('hello'), ETYPE.DBCLICK);

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

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);

函数参数 - 别名

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'

函数参数个数 - 固定

   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

函数参数个数 - 不固定

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

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

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

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

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

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

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

调用不同实现同名方法

function getString(something: string | number): string {
    return something.toString();
}

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

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

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

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

Ts内置类型

Boolean、Error、Date、RegExp

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

Document、HTMLElement、Event、NodeList

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

nodejs类型非预置

npm install @types/node --save-dev

类定义- 私有属性

class Animal {
    private name;
    private constructor (name) {
        this.name = name;
  }
}

类定义 - 公有属性

class Animal {
    public name;
    private constructor (name) {
        this.name = name;
  }
}

类定义 - 只读属性

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

类定义 - 抽象方法

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

类定义 - 继承与实现

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

类定义 - 泛型

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

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

接口

接口定义 - interface

interface Alarm {
    alert();
}

接口定义 - 继承接口

interface Alarm {
    alert();
}

interface LightableAlarm extends Alarm {
    lightOn();
    lightOff();
}

接口定义- 继承类

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

es6 、es7

类的定义 - es6

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

类的定义 - es7

class Animal {
    name = 'Jack';

    constructor() {
        // ...
    }
}

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

类的继承-es6\7

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

类的静态方法 - es6\7

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

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

类的静态属性 - es7

class Animal {
    static num = 42;

    constructor() {
        // ...
    }
}

console.log(Animal.num); // 42

参考文献

欢迎关注我们【前端漫漫】,了解最新文章动态

联系邮箱:simple2012hcz@126.com