TypeScript 学什么?
一、TypeScript 入门基础
掌握 安装 TypeScript 编译器(
npm install -g typescript)并使用tsc命令编译.ts文件。掌握 使用
let和const声明变量,理解与var的作用域差异。理解 TypeScript 是 JavaScript 的超集,通过静态类型提升代码可维护性。
了解 开发环境搭建,如 VS Code 集成 TypeScript 支持。
二、基础类型与变量
掌握 常见基础类型:
string、number、boolean、array(number[]或Array<number>)、tuple(元组)。掌握 使用
enum定义枚举类型,并理解其数字和字符串赋值方式。理解
null和undefined的类型特性及其在--strictNullChecks下的行为。理解
void表示无返回值,never表示永不存在的值,unknown作为安全的顶层类型。了解
any类型的使用场景及应尽量避免的原因。
三、函数与类型注解
掌握 为函数参数和返回值添加类型注解,如
function greet(name: string): void。掌握 可选参数(
?)、默认参数(=)和剩余参数(...args: string[])的语法与用法。理解 函数类型的完整写法,如
(x: number, y: number) => number。理解 箭头函数对
this的绑定机制及其在回调中的优势。了解 函数重载的基本概念与简单实现。
四、接口与对象类型
掌握 使用
interface定义对象结构,如{ label: string }。掌握 接口中的可选属性(
color?: string)和只读属性(readonly x: number)。理解 额外属性检查机制及绕过方式(类型断言或索引签名)。
理解 接口描述函数类型,如
(source: string, sub: string): boolean。了解 可索引类型(如
[index: number]: string)及其只读限制。
五、类与面向对象编程
掌握 类的基本语法:属性、构造函数、方法,以及
public、private、protected访问修饰符。掌握 使用
class实现接口(implements),确保类符合契约。理解 类的静态成员与实例成员的区别。
理解 类的继承(
extends)与方法重写。了解 抽象类(
abstract class)与抽象方法的使用场景。
六、高级类型与工具
掌握 联合类型(
string | number)和交叉类型(T & U)的定义与应用。掌握 泛型的基本使用,如
<T>在函数、接口和类中的应用。理解 类型别名(
type)与接口的区别和适用场景。理解 映射类型和条件类型的初步概念。
了解 内置实用工具类型,如
Partial<T>、Required<T>、Readonly<T>、Pick<T, K>等。
七、模块化与工程配置
掌握 使用
import和export进行模块管理。理解 命名空间(
namespace)的作用及与模块的区别。理解
tsconfig.json的核心配置项,如target、module、strict、outDir等。了解 工程引用(Project References)和监视模式(
--watch)的基本用法。
八、类型系统进阶
掌握 类型断言的两种语法:
<Type>value和value as Type,特别是在 JSX 中只能使用as。理解 类型推论的工作机制,以及如何让编译器自动识别变量类型。
理解 类型兼容性原则——基于结构而非名义的“鸭式辨型”。
了解
declare关键字用于声明全局变量或第三方库类型。
九、实践与调试
掌握 在 HTML 页面中引入编译后的
.js文件运行 TypeScript 应用。掌握 利用编辑器(如 VS Code)进行类型提示、自动补全和错误检查。
理解 如何通过接口和类型检查捕获潜在 bug,提升代码健壮性。
了解 使用
--noImplicitThis等编译选项增强类型安全性。
TypeScript 是一种为 JavaScript 添加了静态类型检查的编程语言,它能够在开发阶段帮助开发者发现潜在的错误,提升代码的可维护性和可读性。它完全兼容 JavaScript,支持现有的 JS 代码和第三方库,同时提供了丰富的类型系统,包括接口、泛型、联合类型以及实用工具类型等高级特性。在前端开发中,TypeScript 广泛应用于 Vue、React 等框架,例如在 Vue 单文件组件中通过 lang="ts" 即可启用 TypeScript,使模板和脚本都获得更强的类型支持和开发时的智能提示。