TypeScript 是 JavaScript 的一个超集,它为 JavaScript 添加了静态类型系统。以下是一些必须了解的 TypeScript 基本知识点和特性:
-
基本类型:
TypeScript 支持与 JavaScript 相同的基本类型,并提供了一些额外的类型选项。let isDone: boolean = false; let decimal: number = 6; let color: string = "blue";
-
数组:
可以在元素类型后面直接跟上[]
,形成元素类型的数组。let list: number[] = [1, 2, 3];
-
枚举:
枚举类型是 TypeScript 为 JavaScript 提供了一个方便的添加命名数值集合的方法。enum Color {Red, Green, Blue} let c: Color = Color.Green;
-
任意值 (Any):
当你不希望类型检查器检查某些值时,可以使用any
类型。let notSure: any = 4; notSure = "maybe a string instead";
-
空值 (Void):
用于表示没有任何类型,通常用于表示没有返回值的函数的返回类型。function warnUser(): void { console.log("This is my warning message"); }
-
接口 (Interfaces):
接口是代码或第三方代码的契约,或者是在你的代码或第三方代码之间的契约。interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); }
-
类 (Classes):
TypeScript 的类只是 JavaScript 的类的一个简单的语法糖。class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
-
模块 (Modules):
TypeScript 与 ECMAScript 2015 一样,任何包含顶级 import 或 export 的文件都被视为模块。// module.ts export function hello() { return "Hello!"; } // main.ts import { hello } from './module'; console.log(hello());
-
泛型 (Generics):
泛型是创建可重用组件的一种方法,一个组件可以支持多种类型的数据。function identity<T>(arg: T): T { return arg; }
-
装饰器 (Decorators):
装饰器为您编写类声明时的修饰的声明提供了一种方式。function sealed(constructor: Function) { Object.seal(constructor); Object.seal(constructor.prototype); } @sealed class Greeter { // ... }
-
命名空间 (Namespaces):
命名空间是将代码包裹在一个全局名称下的一种方式,以防止与在其他地方编写的代码冲突。namespace MyNamespace { export interface SomeInterface { // ... } export class SomeClass { // ... } }
-
类型断言:
类型断言好比其它语言里的类型转换,但不进行特殊的数据检查和解构。它没有运行时的影响,只是在编译阶段起作用。let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;
-
映射类型 (Mapped Types):
TypeScript 允许你从旧的类型中创建新的类型,例如将所有的属性变为可选或只读。type Readonly<T> = { readonly [P in keyof T]: T[P]; }; type Partial<T> = { [P in keyof T]?: T[P]; };
-
条件类型 (Conditional Types):
通过条件表达式对类型进行选择。type TypeName<T> = T extends string ? "string" : T extends number ? "number" : "object"; type T1 = TypeName<string>; // "string" type T2 = TypeName<number>; // "number"
-
索引类型 (Indexed Types):
使用索引类型查询和索引类型访问操作来实现“从对象中选择属性”的模式。function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] { return names.map(n => o[n]); }
-
模板字面量类型 (Template Literal Types):
允许你在类型级别使用字符串模板字面量语法。type World = "world"; type Greeting = `hello ${World}`;
-
递归类型 (Recursive Types):
类型可以引用它们自己,形成递归或嵌套类型。type JsonValue = string | number | boolean | null | JsonObject | JsonArray; interface JsonObject { [key: string]: JsonValue; } interface JsonArray extends Array<JsonValue> {}
-
类型断言和类型保护:
自定义类型保护允许你明确地影响类型检查的结果。function isString(test: any): test is string { return typeof test === "string"; }
-
类型推断 (Type Inference):
TypeScript 尝试根据代码自动确定表达式的类型。let x = 3; // `x` has the type `number`
-
声明合并 (Declaration Merging):
TypeScript 允许声明合并,以便用户可以将类、接口、模块等拆分成多个文件。interface Cloner { clone(animal: Animal): Animal; } interface Cloner { clone(animal: Sheep): Sheep; }
-
全局声明 (Global Declarations):
你可以在全局范围内声明变量、类型、函数等,以便在项目中共享。declare var jQuery: (selector: string) => any;
-
类型和命名空间导入/导出:
使用 import/export 语法来组织和共享代码。import { SomeType } from './some-module'; export { SomeType };
-
装饰器工厂:
创建和组合装饰器。function loggable(target: Function) { return class extends target { log() { console.log('Logging...'); } } } @loggable class MyClass { // ... }
-
使用 tsconfig.json:
使用tsconfig.json
文件来配置 TypeScript 项目的编译选项和包含的文件。 -
使用第三方库的类型定义:
通过 DefinitelyTyped 项目和@types
作用域包来获取和使用第三方库的类型定义。
这些基本知识点和特性为您提供了使用 TypeScript 编写强类型和面向对象的 JavaScript 代码的基础。TypeScript 具有很多其他高级特性和配置选项,可以通过阅读 TypeScript 官方手册 或其他相关资源来进一步学习和掌握。