TypeScript入门导引

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

官网: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

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

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

快速入门导引

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

  1. 安装和设置TypeScript环境
  • 安装Node.js:请访问Node.js官方网站(nodejs.org/)下载并安装适合您操作...%25E4%25B8%258B%25E8%25BD%25BD%25E5%25B9%25B6%25E5%25AE%2589%25E8%25A3%2585%25E9%2580%2582%25E5%2590%2588%25E6%2582%25A8%25E6%2593%258D%25E4%25BD%259C%25E7%25B3%25BB%25E7%25BB%259F%25E7%259A%2584Node.js%25E7%2589%2588%25E6%259C%25AC%25E3%2580%2582 "https://nodejs.org/)%E4%B8%8B%E8%BD%BD%E5%B9%B6%E5%AE%89%E8%A3%85%E9%80%82%E5%90%88%E6%82%A8%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E7%9A%84Node.js%E7%89%88%E6%9C%AC%E3%80%82")
  • 安装TypeScript:在命令行中运行npm install -g typescript,全局安装TypeScript编译器。
  1. 基本语法和类型
  • 变量声明:与JavaScript类似,可以使用letconst声明变量。TypeScript还支持类型注解,可以在变量名后添加一个冒号和类型名称来指定变量的类型,如let name: string = 'John';
  • 基本类型:TypeScript支持所有JavaScript基本类型,如numberstringbooleannullundefined。此外,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. 推荐学习资源

代码示例和重要特性:

typescript 复制代码
// 类型注解
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将继续吸引更多的开发者和项目采用,成为前端和全栈开发的主流选择之一。

相关推荐
小白学习日记33 分钟前
【复习】HTML常用标签<table>
前端·html
john_hjy36 分钟前
11. 异步编程
运维·服务器·javascript
风清扬_jd1 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)
javascript·c++·chrome
丁总学Java1 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele1 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
It'sMyGo1 小时前
Javascript数组研究09_Array.prototype[Symbol.unscopables]
开发语言·javascript·原型模式
懒羊羊大王呀1 小时前
CSS——属性值计算
前端·css
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
李是啥也不会2 小时前
数组的概念
javascript
用户3157476081352 小时前
前端之路-了解原型和原型链
前端