Typescript学习

基本数据类型：

• number: 数值类型，let num:number = 10;

• boolean：布尔值, let bl:boolean = false;

• string：字符型, let name:string = 'hello';

• array：数组, let arr:number[] = [1,2,3];        let arr2:Array<number> = [1,2,3];

• enum：枚举, enum Color {Red, Green, Blue = 4};

• any：任意,  let notSure:any = "123";  let list:any[] = [1,"hello", false];

• void：函数返回空,  function say():void {}

函数：

• 函数类型

function add(x:number, y:number):number {
    return x + y;
}
var add2 = function (x:number, y:number):number {
    return x + y;
}
var add3 = (x:number, y:number) =>{ return x + y};

• 可选和默认参数

// 参数后面加 ？表示次参数可选
function func1(a: string, b?: string): string {
    b = b == undefined ? 'ts':b;
    return a + ' ' + b;
}
console.log(func1('hello'));

// 默认参数
function func2(a: string, b: string = 'ts'): string {
    return a + ' ' + b;
}
console.log(func2('hello'));

• 可变参数

function studentsName(firstName:string, ...restNames:string[]) {
    return firstName + ' '+ restNames.join(' ');
}
console.log(studentsName('aa', 'bb', 'cc', 'dd'));

• Lambads和this关键字的使用

// Lambads和this关键字
() => {}

• 重载

function add(x:number):number {
    return 1;
}
function add(str:string, y:string):string {
    return "str";
}

类：

• 类的建立

// 类的建立
class Person{
    name:string;
    age:number;
    // 构造函数
    constructor(name:string, age:number){
        this.name = name;
        this.age = age;
    }
    print(){
        console.log(`${this.name} is ${this.age} years old`);
    }
}
// 实例化
let p = new Person('zhangshan', 20);
p.print();

• 类的继承

// 类的继承
class Student extends Person{
    school:string | undefined;
}
var s = new Student("lisi", 22);
s.print()

• 访问修饰符

// 访问修饰符
/**
 * public: 公共的，外部、子类、内部均可以访问
 * protect:能够在子类中访问，外部不可访问
 * private: 私有的，只容许类内访问
 */

• 封装的实现

// 封装的实现
class Hello {
    private _name:string = "";
    get name():string{
        return this._name;
    }
    set name(n:string){
        this._name = n;
    }
}
var h = new Hello();
h.name = 'world';
console.log(h.name);

• Static使用技巧

class Person{
    static hello:string;
}
Person.hello = 'hello';
console.log(Person.hello);

接口：

• 建立接口
• 可选属性
• 函数类型
• 数组类型
• Class类型
• 接口继承与混合类型

// 建立接口
interface text{
    label:string;
}

// 可选属性
interface USB {
    name:string;
    version?:string;// 可选
}

// 函数类型
interface SearchFunc {
    (source:string, subString:string):boolean;
}
var mySearch:SearchFunc = function (source:string, subString:string):boolean {
    let result = source.search(subString);
    return result != -1;
}

// 数组类型
interface ArrayStr {
    [index:number]:string;
}
let myArray:ArrayStr = ['zhangsan', 'lisi'];// 此数组只能为string类型

// class 类型
interface ClockInterface {
    currTime:Date;
    setTime(d:Date):void;
}
class Clock implements ClockInterface {
    currTime: Date;
    constructor(d:Date) {
        this.currTime = d;
    }
    setTime(d: Date): void {
        this.currTime = d;
    }
}

// 接口继承与混合类型, 能够多继承
interface Shape{
    color:string;
}
interface PenStroke{
    pen:number;
}
interface Square extends Shape, PenStroke{
    side:number;
}
let s = <Square>{};
s.color = 'red';
s.side = 4;
s.pen = 20;

// 混合类型
interface Counter{
    interval:number;
    reset():void;
    (start:number):string;
}

泛型：

• 认识泛型
• 泛型的应用
• 泛型类型
• 泛型类

// 泛型
function Hello<T>(arg:T):T {
    return arg;
}
console.log(Hello<number>(123));
console.log(Hello<string>('abc'));

// 泛型的应用
interface Shape<T>{
    name:T;
}
var s:Shape<number>;

class HelloNumber <T> {
    name:T;
    constructor(n:T) {
        this.name = n;
    }
}
var hn = new HelloNumber<number>(10);
var hs = new HelloNumber<string>('abc');

模块：

命名空间：

• namespace

装饰器：

装饰器是一种特殊类型的声明，它可以被附加到类声明，方法，属性或参数上，能够修改类的行为。     
通俗的讲装饰器就是一个方法，能够注入到类，方法，属性参数上来扩展类、属性、方法、参数的功能。     
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器     
装饰器的写法：普通装饰器（没法传参）、装饰器工厂（可传参）
装饰器是过去几年中js最大的成就之一，已经是ES7的标准特性之一。
执行顺序：属性 > 方法 > 方法参数 > 类，若是有多个相同的，它会先执行后面的

// 1.类装饰器：
function logClass(params:any) {
    // params 就是当前类HttpClient,能够进行扩展
}
@logClass
class HttpClient {
    constructor(parameters:any) {
    }
}

// 2.类装饰器：装饰器工厂(可传参)
function logClass2(params:string) {
    return function (target:any) {
        // params:参数
        // target:类对象
    }
}
@logClass2("hello")
class HttpClient2 {
    constructor(parameters: any) {
    }
}

// 3.方法装饰器
function get(params:any) {
    return function (target:any, methodName:any, desc:any) {
        // target:类对象
        // methodName:装饰方法名
        // desc:描述
    }
}
class MethodClass{
    constructor(){}
    @get('hello')
    getMethod(){
    }
}