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类似,可以使用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. 推荐学习资源

代码示例和重要特性:

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将继续吸引更多的开发者和项目采用,成为前端和全栈开发的主流选择之一。

相关推荐
吠品4 分钟前
箭头函数为什么不能 new
开发语言·javascript·原型模式
liangshanbo12158 分钟前
面试题:React.memo 和 useMemo 的区别
前端·react.js·前端框架
苹果二10 分钟前
使用Vue的指南
前端·javascript·vue.js
害人终害己32 分钟前
‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
被摘下的星星41 分钟前
CSS 基础说明
前端·css
Flynt2 小时前
SvelteKit 3 升级实录:sv migrate 改完 6 个源文件,还给我留了张任务清单
typescript·前端框架·svelte
To_OC11 小时前
从一头雾水到跑通全流程:我用一个周末啃透了JWT登录鉴权
前端·后端·http
excel12 小时前
研究 Vue 3 源码的收获
前端·vue.js
可乐鸡翅yeah_14 小时前
业务中 M3U8 水印相关坑,硬水印和动态水印区别
前端·网络·数据库·ffmpeg·m3u8在线
lerhxx14 小时前
AI 应用如何高效优雅地恢复中断?—— "连接解耦 + 状态持久化"
前端·javascript