永久打开本网站的,省级建筑信息平台,外贸物流流程,iis wordpress index.phpTypeScript 技术文档 目录 TypeScript 技术文档1. 简介2. 安装与配置3. 基本类型3.1 布尔值3.2 数字3.3 字符串3.4 数组3.5 元组3.6 枚举3.7 Any3.8 Void3.9 Null 和 Undefined3.10 Never3.11 Object 4. 接口4.1 简单示例4.2 可选属性4.3 只读属性4.4 函数类型4.5 可索引类型 5…TypeScript 技术文档 目录 TypeScript 技术文档1. 简介2. 安装与配置3. 基本类型3.1 布尔值3.2 数字3.3 字符串3.4 数组3.5 元组3.6 枚举3.7 Any3.8 Void3.9 Null 和 Undefined3.10 Never3.11 Object 4. 接口4.1 简单示例4.2 可选属性4.3 只读属性4.4 函数类型4.5 可索引类型 5. 类5.1 简单类5.2 继承5.3 公共私有与受保护修饰符5.4 readonly 修饰符5.5 存取器 6. 函数6.1 函数类型6.2 可选参数和默认参数6.3 剩余参数6.4 this 和箭头函数 7. 泛型7.1 泛型函数7.2 泛型接口7.3 泛型类7.4 泛型约束7.5 在泛型约束中使用类型参数 8. 模块8.1 导出8.2 导入 9. 类型推断9.1 基础示例9.2 最佳通用类型 10. 类型兼容性10.1 接口兼容性10.2 函数兼容性 11. 高级类型11.1 交叉类型11.2 联合类型11.3 类型别名11.4 字面量类型 12. 装饰器12.1 类装饰器12.2 方法装饰器 13. 编译选项13.1 tsconfig.json 14. 常见问题与最佳实践14.1 如何进行类型定义14.2 何时使用类型断言14.3 如何处理第三方库的类型定义14.4 如何调试 TypeScript 代码14.5 如何提高代码质量 总结 1. 简介
TypeScript 是一种由微软开发的开源编程语言它在 JavaScript 的基础上增加了静态类型定义。TypeScript 可以编译成纯 JavaScript因此可以在任何支持 JavaScript 的环境中运行。它的设计目标是让大型 JavaScript 项目更容易开发和维护。
主要特点
类型系统TypeScript 提供静态类型检查能够在编译时发现潜在的错误。现代 JavaScript 特性支持 ES6/ES7 的所有新特性比如箭头函数、解构赋值、模块化等。兼容性TypeScript 是 JavaScript 的超集所有合法的 JavaScript 代码在 TypeScript 中也是合法的。强大的工具支持TypeScript 有丰富的 IDE 支持如 Visual Studio Code可以提供代码补全、重构、导航等功能。
2. 安装与配置
要开始使用 TypeScript你需要安装 Node.js 和 npm。安装完 Node.js 后可以使用 npm 来安装 TypeScript
npm install -g typescript安装完成后你可以使用 tsc 命令来编译 TypeScript 文件
tsc --version创建一个 TypeScript 文件例如 hello.ts
let message: string Hello, TypeScript!;
console.log(message);编译并运行
tsc hello.ts
node hello.js为了更方便地管理 TypeScript 项目可以使用 tsconfig.json 文件来配置编译选项。创建一个默认的 tsconfig.json 文件
tsc --inittsconfig.json 示例
{compilerOptions: {target: es6,module: commonjs,strict: true,esModuleInterop: true,skipLibCheck: true,forceConsistentCasingInFileNames: true}
}3. 基本类型
TypeScript 提供了一系列基本类型涵盖了 JavaScript 中的所有基本数据类型。
3.1 布尔值
let isDone: boolean false;3.2 数字
let decimal: number 6;
let hex: number 0xf00d;
let binary: number 0b1010;
let octal: number 0o744;3.3 字符串
let color: string blue;
color red;可以使用模板字符串
let fullName: string Bob Bobbington;
let age: number 37;
let sentence: string Hello, my name is ${fullName}. Ill be ${age 1} years old next month.;3.4 数组
let list: number[] [1, 2, 3];或使用泛型数组类型
let list: Arraynumber [1, 2, 3];3.5 元组
let x: [string, number];
x [hello, 10];3.6 枚举
enum Color {Red, Green, Blue}
let c: Color Color.Green;3.7 Any
当你不确定变量类型时可以使用 any 类型
let notSure: any 4;
notSure maybe a string instead;
notSure false;3.8 Void
用于表示没有任何类型常用于没有返回值的函数
function warnUser(): void {console.log(This is my warning message);
}3.9 Null 和 Undefined
let u: undefined undefined;
let n: null null;3.10 Never
表示那些永不存在的值的类型。例如永远不会返回的函数表达式或箭头函数的返回值类型
function error(message: string): never {throw new Error(message);
}3.11 Object
表示非原始类型
declare function create(o: object | null): void;
create({ prop: 0 });
create(null);4. 接口
接口是 TypeScript 中的核心原则之一用于定义对象的类型。接口能够描述一个对象的形状能够检查对象是否符合特定的结构。
4.1 简单示例
interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj { size: 10, label: Size 10 Object };
printLabel(myObj);在这个例子中LabelledValue 接口定义了一个 label 属性并且 printLabel 函数期望一个实现了 LabelledValue 接口的对象作为参数。即使 myObj 有其他属性但只要它至少有一个 label 属性TypeScript 就会认为它是合法的。
4.2 可选属性
可选属性接口允许一些属性存在也允许一些属性不存在
interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): { color: string; area: number } {let newSquare { color: white, area: 100 };if (config.color) {newSquare.color config.color;}if (config.width) {newSquare.area config.width * config.width;}return newSquare;
}let mySquare createSquare({ color: black });在这个例子中SquareConfig 接口定义了 color 和 width 可选属性。createSquare 函数根据传入的 config 对象动态地创建一个新的对象。
4.3 只读属性
一些属性可以在对象刚刚创建的时候修改其值而在此之后将是只读的
interface Point {readonly x: number;readonly y: number;
}let p1: Point { x: 10, y: 20 };
p1.x 5; // 错误不能改变只读属性在这个例子中x 和 y 属性是只读的因此它们的值一旦被赋值就不能再被修改。
4.4 函数类型
接口也可以描述函数类型
interface SearchFunc {(source: string, subString: string): boolean;
}let mySearch: SearchFunc;
mySearch function (source: string, subString: string) {let result source.search(subString);return result -1;
};在这个例子中SearchFunc 接口定义了一个函数类型该函数接收两个字符串参数并返回一个布尔值。
4.5 可索引类型
接口可以描述那些能够通过索引得到某种类型的对象这在对象上可以用数字索引或字符串索引
interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray [Bob, Fred];let myStr: string myArray[0];在这个例子中StringArray 接口描述了具有数字索引的数组类型并且返回值是字符串类型。
5. 类
TypeScript 支持所有 JavaScript 的类特性并且增加了一些新的特性。
5.1 简单类
class Greeter {greeting: string;constructor(message: string) {this.greeting message;}greet() {return Hello, this.greeting;}
}let greeter new Greeter(world);在这个例子中Greeter 类有一个 greeting 属性和一个 greet 方法。greet 方法返回一个问候字符串。
5.2 继承
类可以扩展其他类这意味着一个类可以继承另一个类的属性和方法
class Animal {name: string;constructor(theName: string) {this.name theName;}move(distanceInMeters: number 0) {console.log(${this.name} moved ${distanceInMeters}m.);}
}class Snake extends Animal {constructor(name: string) {super(name);}move(distanceInMeters 5) {console.log(Slithering...);super.move(distanceInMeters);}
}let sam new Snake(Sammy the Python);
sam.move();在这个例子中Snake 类扩展了 Animal 类并且重写了 move 方法。
5.3 公共私有与受保护修饰符
TypeScript 中的成员默认是公共的。你也可以用 private 修饰符将成员标记为私有的
typescript
class Animal {private name: string;constructor(theName: string) {this.name theName;}
}new Animal(Cat).name; // 错误name 是私有的可以使用 protected 修饰符声明受保护的成员这些成员只能在类本身及其子类中访问
class Person {protected name: string;constructor(name: string) {this.name name;}
}class Employee extends Person {private department: string;constructor(name: string, department: string) {super(name);this.department department;}getElevatorPitch() {return Hello, my name is ${this.name} and I work in ${this.department}.;}
}let howard new Employee(Howard, Sales);
console.log(howard.getElevatorPitch()); // 有效
console.log(howard.name); // 错误5.4 readonly 修饰符
你可以使用 readonly 关键字将属性设置为只读
class Octopus {readonly name: string;readonly numberOfLegs: number 8;constructor(theName: string) {this.name theName;}
}let dad new Octopus(Man with the 8 strong legs);
dad.name Man with the 3-piece suit; // 错误name 是只读的5.5 存取器
TypeScript 支持通过 get 和 set 关键字来定义存取器
class Employee {private _fullName: string;get fullName(): string {return this._fullName;}set fullName(newName: string) {this._fullName newName;}
}let employee new Employee();
employee.fullName Bob Smith;
console.log(employee.fullName);在这个例子中Employee 类有一个私有属性 _fullName并且通过存取器来设置和获取它的值。
6. 函数
TypeScript 中的函数与 JavaScript 中的函数类似但在参数和返回类型上提供了更多的类型检查。
6.1 函数类型
你可以为函数的参数和返回值指定类型
function add(x: number, y: number): number {return x y;
}let myAdd: (x: number, y: number) number function (x: number, y: number): number {return x y;
};6.2 可选参数和默认参数
可以通过在参数名旁使用 ? 来实现可选参数
function buildName(firstName: string, lastName?: string): string {if (lastName) {return firstName lastName;} else {return firstName;}
}let result1 buildName(Bob); // 有效
let result2 buildName(Bob, Adams); // 有效还可以为参数提供默认值
function buildName(firstName: string, lastName Smith): string {return firstName lastName;
}let result1 buildName(Bob); // 有效返回 Bob Smith
let result2 buildName(Bob, Adams); // 有效返回 Bob Adams6.3 剩余参数
可以使用 ... 语法将所有参数收集到一个变量中
function buildName(firstName: string, ...restOfName: string[]) {return firstName restOfName.join( );
}let employeeName buildName(Joseph, Samuel, Lucas, MacKinzie);6.4 this 和箭头函数
在 TypeScript 中this 的值取决于函数调用的位置。可以使用箭头函数来正确地捕获 this 值
let deck {suits: [hearts, spades, clubs, diamonds],cards: Array(52),createCardPicker: function () {return () {let pickedCard Math.floor(Math.random() * 52);let pickedSuit Math.floor(pickedCard / 13);return { suit: this.suits[pickedSuit], card: pickedCard % 13 };};}
};let cardPicker deck.createCardPicker();
let pickedCard cardPicker();console.log(card: pickedCard.card of pickedCard.suit);在这个例子中箭头函数不会创建自己的 this它会捕获 deck 对象的 this 值。
7. 泛型
泛型是能够创建可重用组件的一种工具能够使组件可以支持多种类型的数据。
7.1 泛型函数
function identityT(arg: T): T {return arg;
}let output identitystring(myString); // 手动指定类型
let output2 identity(myString); // 类型推断7.2 泛型接口
interface GenericIdentityFnT {(arg: T): T;
}function identityT(arg: T): T {return arg;
}let myIdentity: GenericIdentityFnnumber identity;在这个例子中GenericIdentityFn 接口描述了一个泛型函数类型并且 myIdentity 是一个特定类型的泛型函数。
7.3 泛型类
class GenericNumberT {zeroValue: T;add: (x: T, y: T) T;
}let myGenericNumber new GenericNumbernumber();
myGenericNumber.zeroValue 0;
myGenericNumber.add function (x, y) {return x y;
};在这个例子中GenericNumber 是一个泛型类它可以处理任意类型的数字。
7.4 泛型约束
有时候我们想要限制某种类型的泛型函数这时候可以使用泛型约束
interface Lengthwise {length: number;
}function loggingIdentityT extends Lengthwise(arg: T): T {console.log(arg.length);return arg;
}loggingIdentity({ length: 10, value: 3 });在这个例子中loggingIdentity 函数要求传入的参数必须有 length 属性。
7.5 在泛型约束中使用类型参数
function getPropertyT, K extends keyof T(obj: T, key: K) {return obj[key];
}let x { a: 1, b: 2, c: 3, d: 4 };getProperty(x, a); // 有效
getProperty(x, m); // 错误类型“m”的参数不能赋给类型“a | b | c | d”的参数在这个例子中getProperty 函数接受一个对象和一个属性名称并返回该属性的值。K 被约束为 T 的属性名称。
8. 模块
模块在 TypeScript 中是用于组织代码的主要方式它们有助于分离代码和避免全局作用域的污染。
8.1 导出
export interface StringValidator {isAcceptable(s: string): boolean;
}export const numberRegexp /^[0-9]$/;8.2 导入
import { StringValidator } from ./StringValidator;let myValidator: StringValidator;你可以使用 export default 导出一个默认的对象
export default class ZipCodeValidator {static numberRegexp /^[0-9]$/;isAcceptable(s: string): boolean {return ZipCodeValidator.numberRegexp.test(s);}
}然后可以使用 import 导入默认对象
import ZipCodeValidator from ./ZipCodeValidator;let myValidator new ZipCodeValidator();9. 类型推断
TypeScript 能够根据代码中的一些简单的规则推断变量的类型。如果变量声明时没有指定类型TypeScript 会自动推断出一个类型。
9.1 基础示例
let x 3; // x 被推断为 number 类型9.2 最佳通用类型
当需要从多个表达式中推断类型时TypeScript 会选择最合适的通用类型
let x [0, 1, null]; // x 的类型推断为 (number | null)[]10. 类型兼容性
TypeScript 中的类型兼容性是基于结构子类型的。结构类型系统是基于类型的成员来确定类型的兼容性。
10.1 接口兼容性
interface Named {name: string;
}class Person {name: string;
}let p: Named;
p new Person(); // OK, 因为 Person 有一个兼容的 name 属性10.2 函数兼容性
let x (a: number) 0;
let y (b: number, s: string) 0;y x; // OK
x y; // 错误
11. 高级类型
TypeScript 提供了许多高级类型操作帮助你在编写复杂类型定义时提供更强的灵活性。
11.1 交叉类型
交叉类型 是将多个类型合并为一个类型
function extendT, U(first: T, second: U): T U {let result T U{};for (let id in first) {(result as any)[id] (first as any)[id];}for (let id in second) {if (!result.hasOwnProperty(id)) {(result as any)[id] (second as any)[id];}}return result;
}let x extend({ a: hello }, { b: 42 });
let a x.a; // string
let b x.b; // number11.2 联合类型
联合类型 | 表示一个值可以是几种类型之一
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 ${typeof padding}.);
}padLeft(Hello world, 4); // 返回 Hello world
padLeft(Hello world, ); // 返回 Hello world11.3 类型别名
类型别名可以为类型起一个新名字
type Name string;
type NameResolver () string;
type NameOrResolver Name | NameResolver;function getName(n: NameOrResolver): Name {if (typeof n string) {return n;} else {return n();}
}11.4 字面量类型
字面量类型约束一个变量的值只能是某个特定的值
type Easing ease-in | ease-out | ease-in-out;class UIElement {animate(dx: number, dy: number, easing: Easing) {if (easing ease-in) {// ...} else if (easing ease-out) {// ...} else if (easing ease-in-out) {// ...} else {// 错误参数必须是 ease-inease-out 或 ease-in-out}}
}let button new UIElement();
button.animate(0, 0, ease-in); // 有效
button.animate(0, 0, uneasy); // 错误参数不是有效的字面量12. 装饰器
装饰器是一个特殊类型的声明能够被附加到类声明、方法、访问器、属性或参数上。装饰器使用 expression 这种形式expression 必须求值为一个函数它将在运行时被调用被装饰的声明信息作为参数传入。
12.1 类装饰器
function sealed(constructor: Function) {Object.seal(constructor);Object.seal(constructor.prototype);
}sealed
class Greeter {greeting: string;constructor(message: string) {this.greeting message;}greet() {return Hello, this.greeting;}
}12.2 方法装饰器
function enumerable(value: boolean) {return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {descriptor.enumerable value;};
}class Greeter {greeting: string;constructor(message: string) {this.greeting message;}enumerable(false)greet() {return Hello, this.greeting;}
}13. 编译选项
TypeScript 编译器可以通过命令行参数和 tsconfig.json 文件进行配置。
13.1 tsconfig.json
tsconfig.json 文件用于配置 TypeScript 项目。一个简单的示例
{compilerOptions: {target: es6,module: commonjs,strict: true,esModuleInterop: true,skipLibCheck: true,forceConsistentCasingInFileNames: true},include: [src/**/*],exclude: [node_modules, **/*.spec.ts]
}14. 常见问题与最佳实践
14.1 如何进行类型定义
在 TypeScript 中进行类型定义时推荐尽量使用接口因为接口可以被类实现和扩展并且更加灵活和易于阅读。
14.2 何时使用类型断言
类型断言用于告诉编译器某个值的具体类型
let someValue: any this is a string;
let strLength: number (someValue as string).length;尽量避免过度使用类型断言因为它可能隐藏潜在的类型错误。
14.3 如何处理第三方库的类型定义
可以使用 DefinitelyTyped 项目提供的类型定义文件
npm install types/jquery --save-dev这样就可以在 TypeScript 项目中使用 jQuery 的类型定义文件。
14.4 如何调试 TypeScript 代码
可以通过生成 Source Map 文件来调试 TypeScript 代码
{compilerOptions: {sourceMap: true}
}这样就可以在调试工具中直接看到 TypeScript 代码并且设置断点进行调试。
14.5 如何提高代码质量
启用严格模式在 tsconfig.json 中启用 strict 选项。使用代码格式化工具如 Prettier 来保持代码风格一致。使用代码静态分析工具如 ESLint 来发现和修复代码中的潜在问题。编写单元测试确保代码的正确性和稳定性。
总结
TypeScript 通过增加静态类型检查和现代 JavaScript 特性为开发大型 JavaScript 项目提供了更强的开发体验和更高的代码质量。通过合理使用 TypeScript 的类型系统、接口、类、泛型、模块、装饰器等特性开发者可以更高效地构建可维护、可扩展的 JavaScript 应用程序。
