likes
comments
collection
share

TypeScript入门导引

作者站长头像
站长
· 阅读数 14

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法，提供了静态类型检查和更高级的代码编辑支持。TypeScript可以被编译成纯JavaScript代码，因此可以在任何支持JavaScript的环境中运行。

TypeScript入门导引

官网：www.typescriptlang.org/

TypeScript发展历程

TypeScript由微软首席架构师Anders Hejlsberg（C#、Delphi和Turbo Pascal的设计者）领导开发，于2012年10月公开发布。TypeScript的发展历程如下：

  • 2012年10月：TypeScript 0.8首次发布。
  • 2014年7月：TypeScript 1.0发布，成为Visual Studio 2013 Update 2的一部分。
  • 2015年4月：TypeScript 1.5发布，增加了对ECMAScript 6模块和命名空间的支持。
  • 2016年9月：TypeScript 2.0发布，新增了非空类型检查、只读属性等特性。
  • 2018年3月：TypeScript 2.8发布，引入了条件类型。
  • 2019年5月：TypeScript 3.5发布，改进了类型检查性能。
  • 2020年11月：TypeScript 4.1发布，增加了模板文字类型和映射类型的键修饰符。
  • 2021年8月：TypeScript 4.4发布，引入了控制流分析的强制类型转换。
  • 2022年8月：TypeScript 4.8发布
  • 2023年3月：TypeScript 5.0发布

更新列表可查阅：github.com/microsoft/T…

TypeScript vs JavaScript

特性TypeScriptJavaScript
类型系统静态类型，编译时类型检查动态类型，运行时类型检查
类型注解支持类型注解，显式声明变量和函数的类型不支持类型注解
接口支持接口，定义对象的形状和约束不支持接口
类和继承支持类和继承，提供丰富的面向对象特性ECMAScript 6支持类和继承，但特性较少
泛型支持泛型，编写可重用的类型安全代码不支持泛型
模块化支持模块化，使用import和export关键字管理模块ECMAScript 6支持模块化，但支持较晚
编译过程需要编译成JavaScript代码后才能运行无需编译，直接运行
类型声明文件支持类型声明文件，提供第三方库的类型支持不支持类型声明文件
工具和生态提供丰富的工具和类型声明库支持生态丰富，但缺少类型支持

这个表格总结了TypeScript和JavaScript在类型系统、语法特性、编译过程等方面的主要区别。TypeScript作为JavaScript的超集，提供了更强大的类型检查和面向对象特性，有助于提高代码的可维护性和可靠性。然而，TypeScript需要编译成JavaScript代码才能运行，这可能会带来额外的开发和构建成本。在选择是否使用TypeScript时，请根据项目需求和团队经验进行权衡。

快速入门导引

以下是一份关于TypeScript的入门导引：

  1. 安装和设置TypeScript环境
  • 安装Node.js：请访问Node.js官方网站(nodejs.org/) 下载并安装适合您操作系统的Node.js版本。
  • 安装TypeScript：在命令行中运行npm install -g typescript，全局安装TypeScript编译器。
  1. 基本语法和类型
  • 变量声明：与JavaScript类似，可以使用let和const声明变量。TypeScript还支持类型注解，可以在变量名后添加一个冒号和类型名称来指定变量的类型，如let name: string = 'John';。
  • 基本类型：TypeScript支持所有JavaScript基本类型，如number、string、boolean、null和undefined。此外，TypeScript还引入了一些额外的类型，如any（任意类型）、unknown（未知类型）和never（永远不会出现的值）。
  • 数组和元组：使用Array类型或方括号[]表示数组，如let numbers: number[] = [1, 2, 3];。元组是一种固定长度和类型的数组，如let tuple: [string, number] = ['John', 30];。
  • 函数：可以使用函数类型注解指定函数参数和返回值的类型，如function add(a: number, b: number): number { return a + b; }。
  • 接口：使用interface关键字定义接口，描述对象的形状。如interface Person { name: string; age: number; }。
  • 类：TypeScript支持面向对象编程，可以使用class关键字定义类，并使用extends实现继承。如class Employee extends Person { department: string; }。
  • 泛型：泛型是一种在定义时不确定类型，而是在使用时确定类型的方式。如function identity<T>(arg: T): T { return arg; }。
  1. 编译和运行TypeScript代码
  • 编写TypeScript代码：在一个文件中编写TypeScript代码，并将文件扩展名设置为.ts，如hello.ts。
  • 编译TypeScript代码：在命令行中运行tsc hello.ts，将TypeScript代码编译成JavaScript代码。编译后会生成一个与源文件同名的.js文件，如hello.js。
  • 运行编译后的JavaScript代码：使用Node.js或浏览器运行编译后的JavaScript代码，如node hello.js。
  1. 配置TypeScript编译选项
  • 创建一个名为tsconfig.json的配置文件，用于配置TypeScript编译器的选项。
  • 常用编译选项：
    • target：指定编译后的JavaScript版本，如"target": "es2015"。
    • module：指定模块化标准，如"module": "commonjs"。
    • strict：启用所有严格类型检查选项，如"strict": true。
    • outDir：指定编译后的文件输出目录，如"outDir": "dist"。
  • 更多编译选项，请参考官方文档：www.typescriptlang.org/docs/handbo…
  1. 推荐学习资源

代码示例和重要特性：

// 类型注解
let fullName: string = "John Doe";
let age: number = 30;

// 接口
interface Person {
  name: string;
  age: number;
}

// 类
class Employee implements Person {
  constructor(public name: string, public age: number, public department: string) {}
}

// 函数和类型注解
function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

// 泛型
function identity<T>(arg: T): T {
  return arg;
}

// 类型别名
type PrimitiveArray = Array<string | number | boolean>;

// 元组
let tuple: [string, number] = ["John", 30];

// 联合类型
type StringOrNumber = string | number;

// 交叉类型
type EmployeeWithID = Employee & { id: number };

// 类型保护
function isEmployee(obj: Person | Employee): obj is Employee {
  return (obj as Employee).department !== undefined;
}

结语

本文主要for快速入门，了解TypeScript的诞生和发展历程，TypeScript的优势在于其强大的静态类型检查和丰富的语言特性，有助于提高代码的可维护性和可靠性，展望未来，随着JavaScript生态系统的不断发展，TypeScript将继续吸引更多的开发者和项目采用，成为前端和全栈开发的主流选择之一。