这两天把typescript的语法过了一遍

教程地址：https://ts.xcatliu.com/

教程地址：https://github.com/xcatliu/typescript-tutorial

 

很简单，照着敲一遍就能干活了。

function sayHello(person: string) {
    return "hello -" + person;
}

let user = "[0,1,2]";
let bValue: boolean = false;
let b1: boolean = Boolean(2);
var vs = "i am a string";
var vi = 99;
var iunlimit = Infinity;
var vb = 0b111;
var vh = 0xf0;
vi = vb;
console.log(vs);
console.log(vi);
console.log(iunlimit);
console.log(vb);
console.log(vh);

let myName: string = "andrew";
let myAge: number = 9;
let myStr: string = `s--${myName}  + ${myAge + 29}`;
console.log(myStr);




let anyThing: any = 'Tom';
anyThing.name1 = "my first name";
anyThing.name2 = "second name";
console.log("anyThing " + `${anyThing}`);
console.log(anyThing.name1);

//联合类型
let fNumber: string | number = 83;
console.log("fNumber number " + fNumber);
fNumber = "value = xxx";
console.log("fNumber value xxxxx = " + fNumber);


//联合类型参数
function getLen(arg: string | number): string {
    return arg.toString();
}



//接口
interface IPerson {
    name: string;
    age: number;
}

let tom: IPerson = {
    name: " i am tom",
    age: 38
}
console.log("tom = " + tom);
console.log("tom2 = " + tom.toString());
console.log("tom3 = " + tom.name);

//任意属性
interface IDog {
    name: string;
    readonly [age: string]: any;
}

let dog: IDog = {
    name: "a dog",
    age: 4,
    hobby: "bone",
    health: "ok"
}

//dog.health = "bad";
console.log("dog = " + dog.name
    + " " + dog.age
    + " " + dog.hobby
    + "  " + dog.health);
console.log("dog name len = " + dog.name.length);

//数组
let array: number[] = [2, 4, 5, 7, 9, 32, 74];
array.push(2827);
array.push(5);
console.log("array = " + array.toString());
console.log("array len = " + array.length);



//数组泛型
let genericArray: Array = [2, 2, 3, 7, 9];
genericArray.push(82);
genericArray[2] = 73;
console.log("genericArray = " + genericArray);
console.log("genericArray tostring= " + genericArray.toString());

//接口字典
interface NumArray {
    [id: number]: number;
}
let numArr: NumArray = [7, 9, 29, 92];
numArr[8] = 82;
console.log("numArr 1= " + numArr[1]);
console.log("numArr 2= " + numArr[2]);
console.log("numArr 3= " + numArr[3]);
console.log("numArr 8= " + numArr[8]);



//接口字典
interface NumDic {
    [id: string]: string;
}
let numDic: NumDic = { 1: "you", 3: "me", "length": "38xx" };
console.log("numDic = " + numDic.length);
console.log("numDic 1= " + numDic[1]);
console.log("numDic 2= " + numDic[2]);
console.log("numDic 3= " + numDic[3]);



//数组中的any
function sum() {
    let args: number[] = [2, 7, , 9];
    return args;
}
let aArr = sum();
console.log("aArr = " + aArr);
aArr[8] = 83;
console.log("aArr after = " + aArr);
console.log("aArr[8] = " + aArr[8]);
console.log("aArr[5] = " + aArr[5]);
console.log("aArr.len = " + aArr.length);

let aArr1 = sum();
console.log("aArr1 = " + aArr1);
console.log("aArr1[8] = " + aArr1[8]);
console.log("aArr1[5] = " + aArr1[5]);
console.log("aArr1.len = " + aArr1.length);


//函数表达式
let expSum = function (x, y) {
    return x + y;
}

let expSum2: (x: any, y: any) => any = function (x, y): any {
    return x + y;
}
console.log(expSum("you", "ok"));
console.log(expSum2("you xxx", "ok"));


//null, undefine
let callNull = function (): void {
    let nV = null;
    let uV = undefined;
    let sV = "i am a s";
    if (nV) {
        console.log("nv ");
    }

    if (uV) {
        console.log("uV " + uV);
    }

    if (sV) {
        console.log("sV " + sV);
    }
}
callNull();


//可选参数
let alterCall = function (x: string, y: string = "i am y") {
    console.log("alterCall x = " + x + ", y = " + y);
}
alterCall("newx");



//剩余参数...rest
function funcPush(array, ...items) {
    items.forEach(function (itm) {
        array.push(itm);
    })
}
let a: any = [];
funcPush(a, 2, 7, 9, "youa");
console.log("a = " + a);


//函数重载
function funcReverse(value: string): string;
function funcReverse(value: number): number;
function funcReverse(value: string | number): string | number {
    if (typeof value === 'number') {
        console.log("type number");
        return Number(value.toString().split('').reverse().join(''));
    } else if (typeof value == 'string') {
        console.log("type string");
        return value.split('').reverse().join('');
    }
    console.log("type unknown " + (typeof value));
}
console.log("funcReverse number = " + funcReverse(83921));
console.log("funcReverse str = " + funcReverse("my name is"));

// 类型断言
// 类型断言的用法如上，在需要断言的变量前加上				即可。
// 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：
function funcGetLen(some: string | number): number {
    if ((some).length) {
        return (some).length;
    } else {
        return some.toString.length;
    }
}



// //声明文件
// /// 
// let son = new Child("new name");
// console.log("son getName = " + son.getName());
// console.log("son _name = " + son._name);


// ECMAScript	的内置对象
let bEcm: Boolean = new Boolean(1);
let eEcm: Error = new Error('Error	occurred');
let dEcm: Date = new Date();
let rEcm: RegExp = /[a-z]/;
console.log("bEcm " + bEcm);
console.log("eEcm " + eEcm);
console.log("dEcm " + dEcm);
console.log("rEcm " + rEcm);
console.log("date local = " + dEcm.toLocaleTimeString());


// DOM	和	BOM	的内置对象
// Document	、	HTMLElement	、	Event	、	NodeList		等。
//todo: 这段慢慢来吧



//类型别名
type TName = string;
type TResolve = () => string;
type TElem = TName | TResolve;

function funcTypeCall(n: TElem): TName {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

console.log("funcTypeCall function = " + funcTypeCall(function () {
    return "i am a callback function";
}));
console.log("funcTypeCall string = " + funcTypeCall("call string"));




//字符串字面量类型
// 字符串字面量类型用来约束取值只能是某几个字符串中的一个
type TEventNames = "click" | "listener" | 75;
let funcPointArgument: (name: TEventNames) => void =
    function (name: TEventNames): void {

        console.log("funcPointArgument name = " + name);
    }
funcPointArgument(undefined);//只能是TEventNames中的一个



//元组
let xcatliu: [string, number] = ["you", 732934569];
xcatliu[0] = "liusssxf";
xcatliu[4] = "yei";
console.log(xcatliu[0].slice(3));
console.log(xcatliu[1].toFixed(3));
console.log(xcatliu.toString());
console.log(xcatliu.length);



//枚举类型
enum Days { sun = "you", mon = 7, tue, wed = -7 };
console.log("enum days[7] " + Days[7]);
console.log("enum days[2] " + Days[2]);
console.log("enum days[-7] " + Days[-7]);
console.log("enum days[you]" + Days["you"]);
console.log("enum days[sun]" + Days["sun"]);
console.log("enum days " + Days.toString());

enum EIds { id1 = 7, id2, id3 };
console.log("enum eids[7] " + EIds[7]);
console.log("enum eids[ID2] " + EIds["id2"]);


const enum EColor { r, g, b };


//类
//public private  ptotected
class Animal {
    name: string = "default name";

    constructor(name: string) {
        this.name = name;
        console.log("Animal constructor name = " + this.name);
    }

    print() {
        console.log("Animal: name = " + this.name);
    }

    public eat() {
        console.log("Animal eat " + this.name);
    }

    static isAnimal(a) {
        let b: any = a instanceof Animal;
        console.log("isAnimal b " + b);
    }
}

let animal: Animal = new Animal("base");
animal.print();


//类的继承
class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }

    public eat() {
        console.log("Cat eat name = " + name);
    }
}


class Dog extends Animal {
    constructor(aname: string) {
        super(aname);
        console.log("Dog constructor name- = " + this.name);
    }

    public eat() {
        console.log("Dog eat name- = " + this.name);
    }
}

let aDog: Animal = new Dog("dog");
aDog.eat();
Animal.isAnimal(83);





//抽象类
abstract class AAnimal {
    constructor() {
        console.log("AAnimal constructor");
    }

    public abstract eat();
}

class CCat extends AAnimal {
    constructor() {
        super();
        console.log("CCat constructor");
    }

    public eat() {
        console.log("CCat eat");
    }
}

let cCat: AAnimal = new CCat();




//类与接口
interface IAlarm {
    alert();
}

class Door {
    constructor() {
        console.log("Door constructor");
    }
}

class SecDoor extends Door implements IAlarm {
    alert() {
        console.log("SecDoor alert");
    }
}




//接口混合类型
interface SearchFunc {
    (src: string, sub: string): number;
    getNumber(): number;
}

function getSearchFunc(): SearchFunc {
    let mySearch: SearchFunc = function (src: string, sub: string): number {
        return src.search(sub);
    }
    mySearch.getNumber = function (): number {
        return 0;
    }

    return mySearch;
}
console.log("mySearch index = " + getSearchFunc()("yougoodboy", "od"));



//泛型
function creatArray(len: number, value: T): Array {
    let array: T[] = [];
    for (let i = 0; i < len; i++) {
        array[i] = value;
    }
    return array;
}




//多个类型参数
function funcSwap1(array: [T, U]): [U, T] {
    return [array[1], array[0]];
}

//这里有点绕
let funcSwap: (array: [T, U]) => [U, T] = function (array: [T, U]): [U, T] {
    return [array[1], array[0]];
}



//泛型约束
interface ILength {
    length: number;
}

function funcCheckLength(arg: T) {
    console.log("funcCheckLength length = " + arg.length);
}
funcCheckLength("hello world"); //这都可以，好随意啊
funcCheckLength([9, 37, 2, 7, 1, 9]);


//多类型参数约束
console.log("multi");
function funcCheckMultiFiled(child: T, base: U): string {
    for (let id in base) {
        child[id] = (base)[id];
    }

    let text: string = "";
    for (let id in child) {
        text = text + " " + id + ":" + child[id];
    }
    return text;
}
console.log("functionCheckMultiField  " + funcCheckMultiFiled({ "b": 1, }, { b: 9 }));


//泛型接口
interface IArrayFunc {
    (length: number, value: T): Array;
}
let iCreateArray: IArrayFunc = function (length: number, value: T): Array {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
iCreateArray(8, "h");



//泛型类
class GenericNumber{
    zeroValue: T;
    add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
    return x + y;
}





//遍历类的属性
class CArgs {
    mName: string = "default name";
    mType: string = "default type";
    mLen: number = 887;
}

function funcShowArgs(src: CArgs) {
    for (let id in src) {
        //又是好随意，随便写
        console.log("funcShowArgs id " + id + " = " + src[id]);
    }
}

funcShowArgs(new CArgs());




//声明合并
//如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型

//函数的合并
function funcReverse1(x: number): number;
function funcReverse1(x: string): string;
function funcReverse1(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('');
    }
}




// 接口的合并
interface MergeAlarm {
    price: number;
}
interface MergeAlarm {
    weight: number;
}
//接口合并后
interface MergeAlarm {
    price: number;
    weight: number;
}

// 类的合并，与接口合并规则相同



// console.log("begin sync");
// async function testSync(){
//     const response = await new Promise(resolve =>{
//         setTimeout(()=>{
//             resolve("async await test...");
//         },3000);
//     });
//     console.log(response);
// }
// testSync();

//Promise 
// let asyncTimer: number = 0;
// let funcGetPromise = function () {
//     let result: number = 0;
//     const promis = new Promise(resolve => {
//         setTimeout(resolve, 3000);
//     });
//     promis.then(function () {
//         console.log("promis result asyncTimer = " + asyncTimer);
//     }).catch(function (msg: string) {
//         console.log(msg);
//     });

//     console.log("promis begin asyncTimer = " + asyncTimer);
//     asyncTimer++;
//     return promis;
// }

// async function asyncFunc() {
//     try {
//         const r1 = await funcGetPromise();
//         const r2 = await funcGetPromise();
//         const r3 = await funcGetPromise();
//         const r4 = await funcGetPromise();
//     } catch (err) {
//         console.log(err);
//     }
// }

// asyncFunc();


//箭头函数
// 箭头函数有两种格式， 一种只包含一个表达式，没有{…} 和 return 。 一种包含多条语句， 这个时候{} return 就不能省略
let funcArrow = (x) => x * 7;
console.log("funcArrow  " + funcArrow(3));

// await async
let getNProm = function () {
    const nPromis = new Promise((resolve,reject) => {
        setTimeout(reject,5000);
    })
    nPromis.then(() => console.log("nPromis success"));
    nPromis.catch(()=>console.log("nPromis catch"));
    console.log("nPromis");
    return nPromis;
}

async function asyncNPromis() {
    try {
        console.log("asyncNPromis begin)");
        let r1 =await getNProm();
        console.log("asyncNPromis end");
        return r1;
    } catch (error) {
        console.log("asyncNPromis error");
    }
}
asyncNPromis();