<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>