TypeScript小结

TypeScript简单介绍

使用感受

ts的学习路线并不是和友好。

适用场景

1. 因其比js严格,所以可以用来取写库,更严谨
2. 写大型项目,后期利于维护
3. 熟悉一门纯面向对象语言如 java,c++上手容易
4. 团队合作较好

ts是什么

ts是微软推出的一个静态类型检查的弱类型语言 ,是javascript的超集，是可编译的,最终还是会被编译为js代码,其中有严格的类型定义,接口使用和面向对象,有人会问 那和哪个 ES6+babel+ESlint+flow(一个类型检查库)有什么区别没有,其实他们之间是有共通点的,但是还是仍有不同

1. ts引入了接口，类,继承的编程思想 其实这些ES6也都有但是有的东西只是一个Future Reserved Words了
2. ts是支持IDE编译的,比如VS
3. 在运行前是静态类型,比较容易调试bug

ts内容简单小结

严格类型

let aboolen:boolean = false;
let anumber:number = 123;
let astring:string = '123';
let aarray:number[] = [1,2,3];
let list: Array<number> = [1, 2, 3]; //数组泛型这个后面会讲到
let x: [string, number] = ['string',1];元组
enum Color {red,green,blue}
let c:Color = Color.grenn ; //枚举
let aany:any = 1// 任何类型
let avoid:Void = undefined //null和any相反
//并且默认null和undefined是任何类型的子类型,即可以赋值给任何类型
//never never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never
//类型断言
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;//<类型>变量式断言 在tsx即react中不支持这样
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length; //as写法

如上首先是声明其支持let,const,其次有着严格的变量定义

接口规范

function printLabel(labelledObj: { label: string }) {
   console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

如上 labelledObj: { label: string } 右边的这个对象其实就是一个接口 必须包含一个lable属性,并且其值为string类型

interface LabelledValue {
 label: string;
}

function printLabel(labelledObj: LabelledValue) {
 console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

故引入了interface接口这个概念

interface LabelledValue {
 label?: string;
}

可选属性可在:前加?来说明其可选

interface Point {
   readonly x: number;
   readonly y: number;
}

只读类型要在前加readonly 关键字,变量也可以这样

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

函数类型

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

可索引的类型

类静态部分与实例部分的区别

interface ClockConstructor {
    new (hour: number, minute: number); 
}

class Clock implements ClockConstructor {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

这里因为当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。 因此，我们应该直接操作类的静态部分。 看下面的例子，我们定义了两个接口， ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock，它用传入的类型创建实例

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

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

createClock的第一个参数是ClockConstructor类型，在createClock(AnalogClock, 7, 32)里，会检查AnalogClock是否符合构造函数

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

接口继承

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

混合类型

class Control {
    private state: any;
}

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

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

class TextBox extends Control {
    select() { }
}

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现

类

这里的类和es6不经相同 但是其多了几个关键词 private protectedpublic static这几个词就不用赘述了 readonly也可修饰属性成员只读 ts支持通过getters/setters来截取对对象成员的访问

把类当做接口使用

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

interface Point3d extends Point {
  z: number;
}

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

函数

支持箭头函数

返回值类型

推断类型 尝试这个例子的时候，你会发现如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型

// 完整版
let myAdd = function(x: number, y: number): number { return x + y; };

// 缩写版
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

可选参数和默认参数

同接口定义 :前面加？

剩余参数

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

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

重载

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };

查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面

泛型

泛型函数

function identity(arg: any): any {
    return arg;
}
function identity<T>(arg: T): T {
    return arg;
}
function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}
let output = identity<string>("myString");
let output = identity("myString"); //类型推论

参数类型与返回值类型是相同的

范型类

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 Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

待续...