共计 8371 个字符，预计需要花费 21 分钟才能阅读完成。
<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>正文完