关于前端:TS速成

1. 根底类型

let isDone: boolean = false; // 布尔
let num: number = 6; // 数字(二进制，八进制，十六进制都能够)
let str: string = '6'; // 字符串
let str1: string = `this is ${str}` // 字符串
let list: number[] = [1,2,3]; // 元素数组
let list: Array<number> = [1,2,3] // 数组泛型
let tuple:[string,number]; // 元组，容许示意一个已知数量和类型的数组
 tuple = ['6',6] // right
 tuple = [6,'6'] // wrong
 tuple[3] = 7 // right 当拜访越界元素时应用联结类型代替（新元素 number 和 string 都能够，但不能有别的）enum Color = {red = 1, green = 2, blue = 3} // 枚举，1，2，3 代表元素编号
 let colorName = Color[2] // 'green'
let anyOne: any = 4; // 不确定类型的时候
// void 示意没有任何类型，函数没有返回值时将返回类型设置为 void
function warnUser(): void {console.log("This is my warning message");
}

其余的一些类型

1.null 和 undefined，默认状况下是所有类型的子类型，当指定了 --strictNullChecks 标记，null和 undefined 只能赋值给 void 和它们各自

2.never，示意永不存在的值的类型，能够赋值给任何类型，然而不能被任何类型赋值

// 返回 never 的函数必须存在无奈达到的起点
function error(message: string): never {throw new Error(message);
}

// 推断的返回值类型为 never
function fail() {return error("Something failed");
}

// 返回 never 的函数必须存在无奈达到的起点
function infiniteLoop(): never {while (true) {}}

3.object, 非原始类型

declare function create(o: object | null): void;

create({prop: 0}); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

4. 类型断言（在编译阶段的类型转换）

let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length; // 尽量用第二种，jsx 下不反对第一种

2. 接口

1. 简略的接口定义

interface Example {
    label:string; // 字符串
    value:string|number; // 字符串或者数字
    notImportant?:string; // 不是必填，填的话是字符串
  readonly cannotwrite: number; // 只能在刚创立时赋值，不能批改
  [propName: string]: any; // 字符串索引签名
}
// 规定函数的输出 & 输入
function demo(config:Example):{num:number, str:string}{return {num:1,str:'1'}
}

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a; // ro 或者 a 都不能进行任何批改
a = ro as number[]; // 然而能够用类型断言重写

// 索引签名：number 和 string，然而 number 必须是 string 的子类型，因为当应用 number 来索引时，JavaScript 会将它转换成 string 而后再去索引对象
class Animal {name: string;}
class Dog extends Animal {breed: string;}

// 谬误：应用数值型的字符串索引，有时会失去齐全不同的 Animal!
interface NotOkay {[x: number]: Animal;
    [x: string]: Dog;
}

2. 函数类型和类类型

interface SearchFunc {(source: string, subString: string): boolean; // 对应函数的输出为 source 和 subString，输入为 true/false
}

// 类类型
interface ClockInterface {
    currentTime: Date; // 形容某个类型
    setTime(d: Date); // 形容某个办法
}
 // 在类里实现这个接口
class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {this.currentTime = d;}
    constructor(h: number, m: number) {}}
// tips：// extends 是继承某个类, 继承之后能够应用父类的办法, 也能够重写父类的办法; 
// implements 是实现多个接口, 接口的办法个别为空的, 必须重写能力应用 


// ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

// 很简单的一个例子 
// 前提：类是具备两个类型的：动态局部的类型（constructor）和实例的类型。interface ClockConstructor {new (hour: number, minute: number): ClockInterface;
} // 形容了一个构造函数，返回的是一个实例办法
interface ClockInterface {tick();
} // 形容了一个办法
 

// 办法有三个入参，第一个入参是之前写的构造函数，后两个入参作为构造函数的入参
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {return new ctor(hour, minute);
} // 返回值是接口办法的值，这个时候将 ClockConstructor 实例化了，返回的是 ClockInterface，相当于为 ClockInterface 的函数传参 h 和 m

class DigitalClock implements ClockInterface {constructor(h: number, m: number) { }// 动态类型，能够
    tick() {console.log("beep beep");
    }
} // 这个类中实现了 ClockInterface 办法，并将 tick 办法进行了重写
class AnalogClock implements ClockInterface {constructor(h: number, m: number) { }
    tick() {console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17); // 这个时候会先去查看 DigitalClock 是否合乎 ClockConstructor 的接口定义
let analog = createClock(AnalogClock, 7, 32);

3. 继承接口

interface Shape {color: string;}
interface PenStroke {penWidth: number;}

interface Square extends Shape,PenStroke {sideLength: number;} // Square 当初有仨属性啦

4. 接口继承类

class Control {private state: any;}

interface SelectableControl extends Control {select(): void;
}

class Button extends Control implements SelectableControl {select() {}}

class TextBox extends Control {select() {}}

// 谬误：“Image”类型短少“state”属性。// 只是 SelectableControl 的实现，然而没有继承 Control 类，因为不是 Control 的子类
class Image implements SelectableControl {select() {}}

class Location {}

类

类的根底请看 es6 相干语法，都差不多，在此记录一些不一样的

1. 公共，公有与受爱护的修饰符

public：默认值

private：公有值，不能申明在它的类的内部拜访，然而子类能够继承（extends）

protected：修饰符与 private修饰符的行为很类似，但有一点不同，protected成员在派生类中依然能够拜访，没方法在实例中应用，然而能够在派生类中拜访中国属性

static：动态属性，在类自身能力调用的属性，实例想要拜访的时候要加类名

class Grid {static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {let xDist = (point.x - Grid.origin.x); // 看这里
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) {}}

let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

abstract：抽象类，做为其它派生类的基类应用，用于定义抽象类和在抽象类外部定义形象办法

函数

函数的根底申明跟根底类型，变量申明差不多，在此只记录一些非凡的

1. 残余参数

function buildName(firstName: string, ...restOfName: string[]) { // 残余参数的设置
  return firstName + "" + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

泛型

function identity<T>(arg: T): T { // 这东东，能够了解为 any 相似性能
    return arg;
}