TypeScript 基本原理和使用方法
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持。以下是 TypeScript 的基本原理和使用方法：
基本原理
-
静态类型检查：
- TypeScript 在编译时进行类型检查，而不是运行时
- 可以提前发现潜在的类型错误
-
类型推断：
- 即使没有显式类型注解，TypeScript 也能根据上下文推断变量类型
-
渐进式类型系统：
- 可以逐步为 JavaScript 代码添加类型
- 允许部分代码使用
any类型绕过类型检查
-
编译过程：
- TypeScript 代码通过编译器 (tsc) 转换为 JavaScript 代码
- 编译时会移除所有类型注解和接口等只在 TypeScript 中存在的特性
基本使用方法
1. 安装 TypeScript
npm install -g typescript
2. 初始化项目
tsc --init # 创建 tsconfig.json 配置文件
3. 基本类型
// 原始类型
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
// 数组
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3]; // 泛型语法
// 元组
let tuple: [string, number] = ["hello", 10];
// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// any
let notSure: any = 4;
notSure = "maybe a string instead";
// void
function warnUser(): void {
console.log("This is a warning message");
}
// null 和 undefined
let u: undefined = undefined;
let n: null = null;
// never (表示永远不会返回的类型)
function error(message: string): never {
throw new Error(message);
}
4. 接口
interface Person {
name: string;
age?: number; // 可选属性
readonly id: number; // 只读属性
[propName: string]: any; // 任意属性
}
function greet(person: Person) {
console.log(`Hello, ${person.name}`);
}
let tom: Person = {
name: 'Tom',
id: 1
};
5. 类
class Animal {
private name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
bark() {
console.log('Woof! Woof!');
}
}
const dog = new Dog('Cooper');
dog.bark();
dog.move(10);
6. 泛型
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
let output2 = identity("myString"); // 类型推断
interface GenericIdentityFn<T> {
(arg: T): T;
}
let myIdentity: GenericIdentityFn<number> = identity;
7. 模块
// math.ts
export function add(x: number, y: number): number {
return x + y;
}
// app.ts
import { add } from './math';
console.log(add(2, 3));
8. 编译 TypeScript
tsc # 编译所有 .ts 文件
tsc --watch # 监听文件变化并自动编译
高级特性
-
类型别名：
type StringOrNumber = string | number; -
联合类型和交叉类型：
let value: string | number; type Combined = Person & Employee; -
装饰器：
@sealed class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } @enumerable(false) greet() { return "Hello, " + this.greeting; } } -
命名空间：
namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } }
TypeScript 通过提供强大的类型系统，大大提高了 JavaScript 代码的可维护性和开发效率，同时保持了与现有 JavaScript 代码的兼容性。
补充 TypeScript 发布历史的详细时间线
TypeScript 的第一个公开版本由 微软 在 2012年10月1日 发布。
下面是其关键发展历程的详细时间线：
timeline
title TypeScript 发布历程
section 2012
10月 : 首次公开发布<br>v0.8
section 2014
04月 : 迎来转折点<br>v1.0 发布
section 2016
09月 : 关键革新<br>v2.0 发布
section 2018
10月 : 重大重构<br>v3.0 引入工程引用
section 2020
08月 : 新的里程碑<br>v4.0 发布
section 2022
至今 : 持续迭代<br>每年发布多个版本
关键版本和里程碑详解
1. 诞生与早期 (2012-2013)
- 2012年10月1日：微软的 Anders Hejlsberg（C# 的首席架构师）团队宣布 TypeScript 的第一个公开版本 v0.8。这是一个早期预览版，旨在收集社区反馈。
- 2013年6月：发布了 v0.9，带来了重要的泛型支持。
2. 正式版与转折点 (2014)
- 2014年4月2日：在 Build 开发者大会上，微软发布了 TypeScript 1.0。这个版本标志着 TypeScript 已经足够稳定，可以用于生产环境。这是其发展史上的第一个重大里程碑。
3. 快速发展与生态巩固 (2015-2017)
- 2016年9月：TypeScript 2.0 是一个巨大的飞跃，引入了许多关键特性，如：
non-nullable类型 (strictNullChecks)：极大地帮助了避免可怕的undefined is not a function错误。- 控制流类型分析：基于代码路径的类型推断。
never类型。- 从此，TypeScript 开始被大型项目（包括 Angular 团队）广泛采用。
4. 成为主流 (2018-2019)
- 2018年7月：TypeScript 3.0 引入了 工程引用，支持将大型项目拆分成更小的、相互依赖的部分，极大地改善了大型代码库的构建体验。
- 2019年：TypeScript 的受欢迎程度爆炸式增长。几乎所有主流前端框架（React, Vue, Angular, Svelte）都提供了优先的 TypeScript 支持。
create-react-app和Vue CLI等工具都内置了 TypeScript 模板。
5. 持续创新与 refinement (2020至今)
- 2020年8月：TypeScript 4.0 发布，引入了可变元组、标签元组、自定义 JSX 工厂等强大特性。
- 2021-2023：版本 4.x 和 5.x 系列持续迭代，专注于提升性能、优化开发体验（如更智能的类型推导、更快的构建速度）和增加精致的类型系统功能（如模板字面量类型、模板字符串类型），巩固了其作为大型 JavaScript 项目首选语言的地位。
为什么 TypeScript 能获得成功？
- 微软背书与 Anders Hejlsberg：由世界顶级的编程语言设计师领导，保证了语言的设计质量。
- 渐进式采用：JavaScript 就是有效的 TypeScript。开发者可以将现有的 JS 项目逐步迁移到 TS，无需重写一切。
- 解决痛点：它精准地解决了大型 JavaScript 应用程序难以维护、重构和协作的核心痛点。
- 强大的生态系统：出色的编辑器支持（尤其是 VS Code，也是微软开发的）、完善的类型定义文件（
DefinitelyTyped@types 仓库）和主流框架的全面拥抱。
总结来说，TypeScript 并非一夜成名，而是经过多年的稳步发展和不断完善，最终在 2016-2019 年间 从“一个不错的选择”成长为“大型前端项目的默认选择”。
PS:创作不易 学会了记得，点赞，评论，收藏，分享
