Loading... 第五周开始学习PHP相关的内容,以及一点点TypeScript。 因为PHP是属于后端的知识了这里只写前端的内容(x # TypeScript 由Microsoft开发的自由和开源的编程语言。是JavaScript的一个超集,添加了静态类型和基于类的面向对象编程的特性。主要目的是增强代码的可读性和可维护性。 面向解决大型复杂项目,架构以及代码维护复杂的场景。 一些主要特性: 1. **静态类型检查**:TypeScript的核心特性,在编码阶段就检测出潜在问题,帮助开发者避免在运行时出现许多常见的JavaScript错误。 2. **基于类的面向对象编程**:支持基于类的面向对象编程,包括类、接口、继承等特性,让开发大型应用更为简单和高效。 3. **模块系统**:帮助开发者组织和重用代码。 4. **ES6/ES7特性**:支持大多数最新的JavaScript特性,包括箭头函数、Promises、解构等。 5. **类型声明文件**:TypeScript的类型声明文件(如.d.ts文件)可以使用现有的JavaScript库,同时还能享受到类型检查的好处。 ## 基础概念 1. **基本类型注解:** ```typescript let isDone: boolean = false; let lines: number = 42; let name: string = "Anders"; ``` 在这个例子中,我们定义了三个变量,并用冒号(:)指定了它们的类型。如果我们试图将错误的类型赋给这些变量,TypeScript 编译器将会报错。 2. **函数参数和返回值类型:** ```typescript function greet(name: string): string { return "Hello, " + name; } ``` 定义了一个函数 `greet`,它接受一个 `string` 类型的参数 `name`,并返回一个 `string` 类型的值。 3. **类和接口:** ```typescript interface Dragon { name: string; color: string; } class Employee implements Dragon { name: string = ""; color: string = ""; } let dragon = new Employee(); dragon.name = "Dracowyn"; dragon.color = "white"; ``` 定义了一个接口 `Dragon`,然后定义了一个类 `Employee` 实现了这个接口。然后创建了一个 `Employee` 对象 `dragon`,并给它的 `name` 和 `color` 属性赋值。 4. **模块:** ```typescript // greeter.ts export function greet(name: string): string { return "Hello, " + name; } // main.ts import { greet } from "./greeter"; console.log(greet("Dracowyn")); ``` 在 `greeter.ts` 文件中定义并导出了一个函数 `greet`,然后在 `main.ts` 文件中导入并使用了这个函数。 ### **基本类型** - boolean | string | number | array | null | undefined ```JavaScript // es let isEnable = true; let name = 'Dracowyn'; let age= 300; let u = undefined; let n = null; let classArr = ['basic', 'execute']; // ts let isEnable: boolean = true; let name: string = 'Dracowyn'; let age: number = 300; let u: undefined = undefined; let n: null = null; let classArr: Array<string> = ['basic', 'execute']; ``` - tuple - 元组 ```TypeScript let tupleType: [string, boolean]; tupleType = ['Dracowyn', true]; ``` - enum - 枚举 ```TypeScript // 数字类枚举 - 默认从零开始,依次递增 enum Score { BAD, NG, GOOD, PERFECT, } let sco: Score = Score.BAD; // 字符串类型枚举 enum Score { BAD = 'BAD', NG = 'NG', GOOD = 'GOOD', PERFECT = 'PERFECT', } // 反向映射 enum Score { BAD, NG, GOOD, PERFECT, } let scoName = Score[0]; // BAD let scoVal = Score['BAD']; // 0 ``` - object / Object - 对象 ``` // object - 非原始类型 // TS把javascript object分成了两个接口来定义 interface ObjectConstructor { create(o: object | null): any; } const proto = {}; Object.create(proto); // OK Object.create(null); // OK Object.create(undefined); // Error // Object // Object.prototype 上属性 interface Object { constructor: Function; toString(): string; toLocaleString(): string; valueOf(): Object; } // 定义了Object类的属性 interface ObjectConstructor { new(value: any): anyl } // {} - 定义空属性 const obj = {}; obj.prop = 'Dracowyn'; // warning obj.toString(); // OK ``` ### **交叉类型** 将多种类型合并为一个类型的方式。能够将现有的多种类型叠加到一起得到一个类型,它包含了所需的所有类型的特性。可以通过 & 运算符来组合类型,形成交叉类型。 Example: ```typescript interface X { x: number; } interface Y { y: string; } type XY = X & Y; let p: XY = { x: 123, y: "Hello Dracowyn" }; ``` ### 断言 一种明确告诉编译器正在处理的对象的具体类型的方式。类型断言与类型转换类似,但它不进行特殊的数据检查和解构。它没有运行时的影响,只是在编译阶段起作用。 1. **尖括号语法:** ```typescript let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length; ``` 2. **"as" 语法:** ```typescript let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; ``` ## 类型守卫 检查特定区块中变量或对象的类型的方式。在特定的代码块中确认变量或对象的数据类型。 1. **使用 `typeof` 操作符:** ```Typescript function padLeft(value: string, padding: string | number) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof padding === "string") { return padding + value; } throw new Error(`Expected string or number, got '${padding}'.`); } ``` 检查 `padding` 的类型,如果 `padding` 不是 `number` 或 `string`,那么就会抛出一个错误。 ```Typescript class Dragon { fly() { console.log("Dragon fly"); } } class Fish { mess() { console.log("Mess around"); } } function perform(action: Dragon | Fish) { if (action instanceof Dragon) { action.fly(); } else { action.mess(); } } ``` ## 函数重载 创建多个功能类似但参数和返回类型可以不同的函数的方式。允许定义多个函数签名,从而为同一个函数提供多种调用方式。 Example: ```Typescript function add(a: string, b: string): string; function add(a: number, b: number): number; function add(a: any, b: any): any { if (typeof a === 'string' && typeof b === 'string') { return a + b; } else if (typeof a === 'number' && typeof b === 'number') { return a + b; } throw new Error('无效参数'); } add(1, 2); // returns 3 add("Hello", "Dracowyn"); // returns "HelloDracowyn" ``` ## 泛型 创建可重用的组件的方式,这些组件可以适用于多种数据类型,而不仅仅是单一的数据类型。将泛型看作是类型的变量,可以用在函数、类和接口中。 1. **泛型函数:** ```Typescript function identity<T>(arg: T): T { return arg; } let name = identity<string>("Dracowyn"); let age = identity<number>(300); ``` 2. **泛型类:** ```Typescript class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; } let myGenericNumber = new GenericNumber<number>(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function(x, y) { return x + y; }; ``` Last modification:January 14, 2024 © Reprint prohibited Support Appreciate the author AliPayWeChat Like 1 If you think my article is useful to you, please feel free to appreciate