文章目录
- 1. 类型注解
- 2. 接口(Interfaces)
- 3. 类(Classes)
- 4. 泛型(Generics)
- 5. 枚举(Enums)
- 6. 高级类型
- 7. 模块
- 8. 装饰器(Decorators)
- 9. 映射类型(Mapped Types)
- 10. 条件类型(Conditional Types)
- 11. 索引访问类型(Indexed Access Types)
- 12. Null 安全性(Null Safety)
- 13. 模块解析
- 14. 命名空间(Namespaces)
- 15. 模块与命名空间的混合使用
- 16. 装饰器工厂
- 17. 类型守卫和类型区分(Type Guards and Differentiating Types)
- 18. 高级类型和技巧
- 19. 模块声明
TypeScript 是 JavaScript 的一个超集,由 Microsoft 开发。它添加了类型系统和一些其他特性,旨在增强代码的可靠性和开发效率。TypeScript 最终会被编译成纯 JavaScript,以便在各种浏览器和节点环境中运行。下面,我们将介绍 TypeScript 的一些基本语法和特性。
1. 类型注解
类型注解是 TypeScript 最核心的特性之一,它允许你明确地指定变量、函数参数和函数返回值的类型。
let isDone: boolean = false;
let age: number = 20;
let firstName: string = "Alice";function greet(name: string): string {return "Hello, " + name;
}
2. 接口(Interfaces)
接口是定义对象形状的强大方式,它指定了对象应该有哪些属性以及对应的类型。
interface User {name: string;age?: number; // 可选属性
}function register(user: User) {console.log(user.name);
}register({ name: "John" }); // 有效
register({ age: 25 }); // 编译错误,缺少'name'属性
3. 类(Classes)
TypeScript 支持基于类的面向对象编程。类可以使用 public
、private
、protected
这些访问修饰符来控制成员的访问权限。
class Animal {private name: string;constructor(name: string) {this.name = name;}public move(distance: number) {console.log(`${this.name} moved ${distance}m.`);}
}
4. 泛型(Generics)
泛型提供了一种方法来创建可重用的组件,一个组件可以支持多种类型的数据,这样用户就可以以自己的数据类型来使用组件。
function identity<T>(arg: T): T {return arg;
}let output = identity<string>("myString");
let outputNumber = identity<number>(100);
5. 枚举(Enums)
枚举是一种定义命名常数组的方式,用于创建有限集合的明确值。
enum Color {Red,Green,Blue,
}let c: Color = Color.Green;
6. 高级类型
- 联合类型:允许一个值可以是几种类型之一。
- 交叉类型:组合多种类型成为一种类型。
- 类型别名:提供类型的新名称。
type StringOrNumber = string | number;
type UserResponse = User & { token: string };
7. 模块
TypeScript 支持模块,允许从外部文件导入其他模块,也可以导出模块使其它文件可以使用。
// some-module.ts
export const pi = 3.14;
export function square(x: number) {return x * x;
}// main.ts
import { pi, square } from "./some-module";
console.log(pi);
console.log(square(10));
8. 装饰器(Decorators)
装饰器是一种特殊类型的声明,它可以被附加到类声明,方法,访问器,属性或参数上。装饰器使用 @expression
这种形式,expression
必须计算为一个函数。
function sealed(constructor: Function) {Object.seal(constructor);Object.seal(constructor.prototype);
}@sealed
class BugReport {type = "report";title: string;constructor(t: string) {this.title = t;}
}
继续深入探讨 TypeScript 的更多高级特性和用法,这些特性可以帮助开发者更有效地编写健壮且可维护的代码。
9. 映射类型(Mapped Types)
映射类型允许你从一个已知的类型创建新类型,它的属性是基于原始类型的属性变换而来。这是一种灵活的方法来创建相关类型,而不必重复定义。
type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };const featureFlags: Flags = {option1: true,option2: false,
};
10. 条件类型(Conditional Types)
条件类型允许类型具有类似 JavaScript 中 if 语句的逻辑。这可以用于在类型层面进行条件判断。
type Check<T> = T extends string ? 'String' : 'Not String';
type Type1 = Check<string>; // 'String'
type Type2 = Check<number>; // 'Not String'
11. 索引访问类型(Indexed Access Types)
通过索引访问类型,可以通过其他类型的索引来查询属性的类型。
type User = { name: string; age: number; };
type UserName = User['name']; // string
12. Null 安全性(Null Safety)
TypeScript 强制性地处理了 null 和 undefined,可以在编译阶段防止很多运行时错误。
function doSomething(x: string | null) {console.log(x!.toUpperCase()); // 使用 '!' 非空断言操作符
}
13. 模块解析
TypeScript 模块解析逻辑决定了模块和导入语句如何互动,支持相对和非相对模块导入。
14. 命名空间(Namespaces)
命名空间是 TypeScript 的一个早期功能,它提供了一种将多个相关的全局类型、接口和类组合到一起的方式。
namespace Validation {export interface StringValidator {isValid(s: string): boolean;}const lettersRegexp = /^[A-Za-z]+$/;export class LettersOnlyValidator implements StringValidator {isValid(s: string) {return lettersRegexp.test(s);}}
}
15. 模块与命名空间的混合使用
TypeScript 允许在模块中使用命名空间来组织代码,反之亦然。
16. 装饰器工厂
装饰器工厂是一个表达式,返回一个函数,该函数在运行时被调用来装饰类或类成员。
function Color(value: string) { // 装饰器工厂return function (target) {// 这是装饰器Object.defineProperty(target, 'color', {value: value});}
}@Color('blue')
class Car {
}
17. 类型守卫和类型区分(Type Guards and Differentiating Types)
类型守卫允许你在代码块中保证变量属于某个特定类型。这通常通过自定义的类型保护函数实现。
function isFish(pet: Fish | Bird): pet is Fish {return (pet as Fish).swim !== undefined;
}// 现在可以安全地使用 'swim' 方法
const pet = getSmallPet();
if (isFish(pet)) {pet.swim();
} else {pet.fly();
}
18. 高级类型和技巧
TypeScript 支持许多高级类型技巧,如使用 Partial
, Readonly
, Pick
, Record
等实用的内置类型。
19. 模块声明
当需要引入非 TypeScript 模块(如某些 JavaScript 库或 JSON 文件)时,可以使用模块声明来告诉 TypeScript 如何处理它们。
declare module "*.json"{const value: any;export default value;
}