关于typescript:typescript学习资料

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({mounted() {this.baseType(); //11 种根底类型定义
        this.interfaceDemo(); //interface 接口
        this.classType(); // 类
        this.genericType(); // 泛型
        this.interfaceOrType(); // 接口（interface）和类型别名 type
        this.getDeclare(); //Declare 申明文件},
    methods: {
        /**
         * Declare 关键字
         * */
        getDeclare() {
            // 咱们在.ts 中应用的第三方库时没有.d.ts 申明文件的时候，咱们能够通过 declare 来写申明文件。// 能够申明该模块，甚至能够间接申明一个值为 any 的同名的变量，而后咱们就能够在代码中间接应用该三方库了。},
        /**
         * 介绍接口（interface）和类型别名 type 的区别和应用场景
         * @description 一般来说，能用 interface 实现，就用 interface，如果不能就用 type
         */
        interfaceOrType() {
            // 相同点一：都能够形容一个对象或者函数,type 和 interface 的语法不一样，type 须要等号，而 interface 不须要等号
            interface User {
                // 形容一个对象
                name: string;
                age: number;
            }
            interface SetUser {
                // 形容一个函数
                (name: string, age: number): void;
            }
            type UserType = {
                // 形容一个对象
                name: string;
                age: number;
            };

            type SetUserType = {
                // 形容一个函数
                (name: string, age: number): void;
            };
            let test: SetUserType;
            test = function (name: string, age: number): void {console.log(111);
            };
            // 相同点二：都容许拓展（extends）属性继承
            //1.interface 属性继承
            interface dudu1 {name: string;}
            interface dudu2 extends dudu1 {age: number;}
            const duduTest: dudu2 = {name: "zyb", age: 23};
            //2.type 类型继承 type 类型
            type Nametype = {name: string;};
            type UserType1 = Nametype & {age: number};
            const valueType: UserType1 = {name: "zyb", age: 23};
            //3.interface extends type (接口继承类型)
            type LulvwaType = {name: string;};
            interface LulvwaFace extends LulvwaType {age: number;}
            const LulvwaValue: LulvwaFace = {name: "zyb", age: 23};
            //4.type extends interface (类型继承接口)
            interface shajFace {name: string;}
            type shajType = shajFace & {age: number;};
            const shajValue: shajType = {name: "zyb", age: 23};

            // 不同点一：type 能够申明根本类型别名，联结类型，元组等类型，而 interface 不行
            //1、根本类型别名
            type DiffName = string;
            // 2. 联结类型
            interface Dog {wong(): void;
            }
            interface Cat {miao(): void;
            }
            type Pet = Dog | Cat;
            // 具体定义数组每个地位的类型
            type PetList = [Dog, Pet];
            //2.type 语句中还能够应用 typeof 获取实例的类型进行赋值
            let div = document.createElement("div");
            type B = typeof div;
            //3.type 其余骚操作
            type StringOrNumber = string | number;
            type Text = string | {text: string};
            type Callback<T> = (data: T) => void;
            type Pair<T> = [T, T];
            type Coordinates = Pair<number>;
            type Tree<T> = T | {left: Tree<T>; right: Tree<T>};
            //4.interface 可能申明合并
            interface User {
                name: string;
                age: number;
            }

            interface User {sex: string;}
        },
        /**
         * 泛型
         * @des 泛型代表的是泛指某一类型，更像是一个类型变量。由尖括号包裹 <T>
         * @des 次要作用是创立逻辑可复用的组件
         * @des 泛型能够作用在函数、类、接口上
         */
        genericType() {
            //*************** 定义函数 *****************/
            function greet<T>(arg: T): T {return arg;}
            //*************** 定义类 *****************/
            class GenericNumber<T> {
                zeroValue: T;
                add: (x: T, y: T) => T;
                constructor(zeroValue: T, add: (x: T, y: T) => T) {
                    this.zeroValue = zeroValue;
                    this.add = add;
                }
            }

            let myGenericNumber = new GenericNumber<number>(1, (a, b) => a + b);
            myGenericNumber.zeroValue = 0;
            const result = myGenericNumber.add(40, 2);
            //*************** 定义接口 *****************/
            // 第一种定义形式：泛型接口
            interface ConfigFns {<T>(value1: T): T; // 泛型接口
            }
            var getData: ConfigFns = function <T>(value1: T): T {return value1;};
            getData<string>("OK");
            // 第二种定义形式
            interface ConfigFnplus<T> {(value1: T): T; // 泛型接口
            }
            function getData1<T>(value1: T): T {return value1;}
            var myGetData: ConfigFnplus<string> = getData1;
            myGetData("OK,wo");
            //*************** 泛型束缚 (泛型还能够被束缚，这样就不是承受任意类型，必须要承受有 length 属性的对象)*****************/
            interface TIF {length: number;}
            function test<T extends TIF>(params: T) {console.log("=========>>>", params.length);
            }
            console.log(test("abc"));
            //*************** 定义泛型束缚之类型参数 *****************/
            function getPropoty<T, K extends keyof T>(obj: T, key: K) {return obj[key];
            }
            let obj = {a: 1, b: "2", c: 3};
            console.log(getPropoty(obj, "c"), "--- 参数");
        },
        /**
         * 11 种根底类型定义
         * @des number、string、boolean、Array、Tuple(元组)、enum(枚举)、object、never、void、null 和 undefined、any
         */
        baseType() {
            //***************①number  除了第一个都是进制 *****************/
            let decLiteral: number = 6;
            let hexLiteral: number = 0xf00d;
            let binaryLiteral: number = 0b1010;
            let octalLiteral: number = 0o744;
            //***************string*****************/
            let name: string = "bob";
            // 字符串模板
            let age: number = 37;
            let name1: string = `Gene`;
            let sentence: string = `Hello, my name is ${name1}.I'll be ${age + 1} years old next month.`;
            //***************boolean*****************/
            let isDone: boolean = false;
            //***************Array*****************/
            let list: number[] = [1, 2, 3];
            let list1: Array<number> = [1, 2, 3]; // 泛型
            //***************Tuple(元组)*****************/
            let x: [string, number];
            x = ["hello", 10];
            //***************enum(枚举)*****************/
            enum Color {
                Red,
                Green,
                Blue,
            } // 默认为 0,1,2
            let c: Color = Color.Green;
            // 手动赋值
            enum Color1 {
                Red = 1,
                Green = 2,
                Blue = 4,
            }
            let c1: Color1 = Color1.Green;
            // 手动赋值 从几开始
            enum Color2 {
                Red = 1,
                Green,
                Blue,
            } //1,2,3
            // 数字枚举能够被混入到 计算过的和常量成员
            function getSomeValue() {return 1;}
            enum E {A = getSomeValue(),
                //B, // error! 'A' is not constant-initialized, so 'B' needs an initializer
            }
            // 字符串枚举
            enum DirectionString {
                Up = "UP",
                Down = "DOWN",
                Left = "LEFT",
                Right = "RIGHT",
            }
            // 异构枚举 (举能够混合字符串和数字成员，然而仿佛你并不会这么做)
            enum BooleanLikeHeterogeneousEnum {
                No = 0,
                Yes = "YES",
            }
            //***************object*****************/
            let obj: Object;
            //***************never(never 类型示意的是那些永不存在的值的类型)*****************/
            // 返回 never 的函数必须存在无奈达到的起点
            function error(message: string): never {throw new Error(message);
            }
            //***************void(函数没有返回值时)*****************/
            function warnUser(): void {console.log("This is my warning message");
            }
            //***************null 和 undefined*****************/
            let u: undefined = undefined;
            let n: null = null;
            //***************any*****************/
            let notSure: any = 4;
            notSure = "maybe a string instead";
            notSure = false; // okay, definitely a boolean
        },
        /**
         * interface 接口几种形式
         * @des 定义对象、定义数组、定义函数、定义类、接口互相继承、可选属性和额定查看
         */
        interfaceDemo() {
            // 接口 interface 相干定义 ---start====

            //***************①定义对象 *****************/
            interface Cat {color: string;}
            let yellowCat: Cat = {color: "yellow",};
            //***************①定义数组 *****************/
            interface List {[index: number]: string;
            }
            let list: List = ["one", "two"];
            //***************①定义函数 *****************/
            // 一般的接口
            interface discount1{getNum : (price:number) => number
            }
            function testFun(discount1: discount1):void{console.log(discount1.getNum);
            }
            // 函数类型接口
            interface discount2{
                // 留神:
                //“:”后面的是函数的签名，用来束缚函数的参数
                // ":" 前面的用来束缚函数的返回值
                (price:number):number
            }
            let cost:discount2 = function(price:number):number{return price * .8;}
            interface Fun {(name: string): void;
            }
            let fun: Fun = function (a: string) {console.log(a);
            };
            //***************①定义类 *****************/
            interface Person {
                name: string;
                age: number;
            }
            class People implements Person {
                name: string;
                age: number;
                constructor(name: string, age: number) {
                    this.name = name;
                    this.age = age;
                }
            }

            //***************①接口互相继承 *****************/
            interface Shape {color: string;}
            interface Sqaure extends Shape {sideLength: number;}
            let square: Sqaure = {
                color: "red",
                sideLength: 11,
            };
            //***************①可选属性和额定查看 *****************/
            interface TestConfig {
                color?: string;
                width?: number;
                [propsName: string]: any;
            }
            function createTest(config: TestConfig): any {}
            let myTest = createTest({color: "red", width: 20});
            // *********** 可索引类型接口 ***********/
            // 数字索引——束缚数组
            // index 是轻易取的名字，能够任意取名
            // 只有 index 的类型是 number，那么值的类型必须是 string
            interface StringArray {
                // key 的类型为 number，个别都代表是数组
                // 限度 value 的类型为 string
                [index: number]: string;
            }
            let arr: StringArray = ["aaa", "bbb"];
            console.log(arr);
            // 字符串索引——束缚对象
            // 只有 index 的类型是 string，那么值的类型必须是 string
            interface StringObject {
                // key 的类型为 string，个别都代表是对象
                // 限度 value 的类型为 string
                [index: string]: string;
            }
            let obj: StringObject = {name: "ccc"};

            // 函数重载
            function attr(val: any): any {if (typeof val === 'string') {return val;} else if (typeof val === 'number') {return val;} 
            }

            alert(attr('aaa'));
            attr(666);
            // 接口 interface 相干定义 ---end====
        },
        /**
         * 类的介绍
         * @des 私有成员（public）、公有成员（private）、被爱护的成员（protected）、动态属性（static）* @des 继承 extends
         * @des 抽象类 abstract
         */
        classType() {
            class tsClass {
                public a: string; // 私有成员
                private b: number[]; // 公有成员
                protected c: string[]; // 被爱护的成员
                static e: string = "e"; // 动态属性
                constructor(astr: string, barr: number[], carr: string[]) {
                    this.a = astr;
                    this.b = barr;
                    this.c = carr;
                }
            }
            class SublevelCla extends tsClass {
                private dname: string; // 公有成员
                constructor(
                    astr: string,
                    barr: number[],
                    carr: string[],
                    dname: string
                ) {super(astr, barr, carr); // 继承 tsClass 结构字段
                    this.dname = dname; //sublevelCla 本身结构字段
                }
                fun(): void {console.log(tsClass.e); // 通过类获取动态成员
                }
            }
            let sub = new SublevelCla(
                "a",
                [1, 2, 3],
                ["a", "b", "c"],
                "sublevelName"
            );
            sub.fun();
            console.log(sub.a);
            // console.log(sub.b); // 报错: 公有成员不能被内部拜访
            // console.log(sub.c); // 报错：被爱护的成员不能被内部拜访
            // console.log(sub.dname); // 报错：公有成员不能被内部拜访

            // -----= 抽象类 =-----（抽象类做为其它派生类的基类应用。它们个别不会间接被实例化。不同于接口，抽象类能够蕴含成员的实现细节。abstract 关键字是用于定义抽象类和在抽象类外部定义形象办法。）abstract class Department {constructor(public name: string) {}

                printName(): void {console.log("Department name:" + this.name);
                }

                abstract printMeeting(): void; // 必须在派生类中实现}

            class AccountingDepartment extends Department {constructor() {super("Accounting and Auditing"); // 在派生类的构造函数中必须调用 super()}

                printMeeting(): void {
                    console.log("The Accounting Department meets each Monday at 10am.");
                }

                generateReports(): void {console.log("Generating accounting reports...");
                }
            }

            let department: Department; // 容许创立一个对形象类型的援用
            // department = new Department(); // 谬误: 不能创立一个抽象类的实例
            department = new AccountingDepartment(); // 容许对一个形象子类进行实例化和赋值
            department.printName();
            department.printMeeting();
            // department.generateReports(); // 谬误: 办法在申明的抽象类中不存在},
    },
});
</script>