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(){
    }
}

来源：oschina

链接：https://my.oschina.net/u/1582495/blog/3075356

标签

typescript

RED