人气值 13
本视频由 保利威 提供技术支持

6.1 字面类型

预售课程，正在更新中，每周预计更新两到三节

前端进入工程化时代，JavaScript 技术框成功打入后端。高效、高质量的开发都更需要工具的支持。TypeScript 将类型系统引入 JavaScript 技术栈，承载着增强编辑器、静态检查等工具的作用，提升了模块化、框架化的开发体验，逐渐成为 JavaScript 技术栈的必学技能之一。

TypeScript 建立在弱类型高灵活度的 JavaScript 基础之上，引入类型系统的强制约束以高程序的自检能力和自解释能力，不仅是前端开发者进入中大型应用开发的桥梁，也为后端强类型语言开发者带来熟悉的语法体验，让后端开发者可以更快地进入前端开发。

课程概要

本课程从类型化角度讲述了 TypeScript 诞生的必要性和必然性，然后从细节抽丝剥茧，以不断发现问题，解决问题的的思路带领学员逐步深入学习 TypeScript。主要知识点：

  1. 类型系统的理论基础。这里包含类型基础知识、强弱类型的区别，以及通过正确运用静态类型检查和动态类型检查来提升代码的正确性和健壮性。
  2. TypeScript 的主要语法，包括基本类型、函数、接口、类、泛型等类型相关的语法声明和实际应用，以及模块化的开发方式。
  3. TypeScript 开发示例，通过短小易懂的示例演示如何应用 TypeScript 语法的同时，介绍相关语法的应用场景和在设计模式中的应用。
  4. TypeScript 开发工具应用，包括编辑器、静态检查工具、编译器配置、构建工具及其配置等。
  5. TypeScript 项目开发实践，前端以 Vue为例，后端在 Koa 为例，通过一个小型应用展示 TypeScript 在项目中的实际应用，为最佳开发实践提供有效参考。

课程大纲

第一部分 开篇

  • 我为什么选择TypeScript？

    第二部分 TypeScript 基础

    环境搭建

    编程语言和开发技术都需要实践性的学习方法，通过实践加深理解，增强记忆。本课程在讲授过程中会有大量的示例代码演示，完全基于这部分环境搭建过程建立起来的实验场。

  • 环境搭建：搭建开发环境
  • 环境搭建：编写你的第一个 TypeScript 程序

  • 环境搭建：搭建ts-playgroud

    类型基础

    通常 ES5 中大家相对熟悉的基础类型，引导学员从已知的模糊的类型概念，逐渐细化，明晰。理解类型的作用，类型检查的工作方式，学习类型声明的细节，完成从模糊类型到明确类型的思维转变。

  • 类型基础：强/弱类型和静/动态类型检查
  • 类型基础：认识类型
  • 类型基础：声明变量和常量
  • 声明函数类型：定义函数
  • 声明函数类型：参数进阶

  • 声明函数类型：函数重载

    对象和接口

    接口是一种抽象类型，在接口的实现者和使用者之间形成明确的契约。具体地说就是接口的实现者决定了接口的使用方式，而接口的使用者很清楚应该如何来使用它们。接口的基本概念是对对象类型的抽象。本节从基本的 TypeScript 接口语法讲起，讲解接口在应对不同需求时的细节上的变化，以及使用接口声明函数和接口继承等进阶话题。

  • 对象和接口：声明接口
  • 对象和接口：接口属性进阶
  • 对象和接口：接口和函数

  • 对象和接口：接口继承

    类

    类是 OOP 语法的核心元素，它不仅声明自己能做什么，还得真实地去做这些事情。从抽象层次来角度来看，类介于接口和具体对象之间，既包含类型抽象，又包含具体实现。类语法丰富，应用灵活。本节课程仔细介绍了类的语法细节，并通过大量的代码演示来帮助理解。

  • 类：定义类
  • 类：类和接口
  • 类：构造函数
  • 类：this引用和this类型
  • 类：属性、方法和及其修饰符
  • 类：从构造函数生成属性
  • 类：类和静态成员
  • 类：类的继承

  • 类：抽象类

    高级类型

    类型系统并不只是一纸约定，类型系统中的各个元素之间本身也存在着一定的逻辑关系。高级类型部分通过讲解具体的高级类型语法，分析实际案例中的类型关系，声明基本类型，对类型进行计算推导，并最终建立符合安全需求的高级类型结构，实现对复杂数据类型灵活有效的描述。

  • 高级类型：枚举
  • 高级类型：泛型
  • 高级类型：类型映射

  • 高级类型：预置工具类型

    第三部分：应用实战

    这部分类型设计了一个简单的 TODO 应用。说它简单，是因为这个应用贴近开发者的生活，功能相对单一，易于理解。但在这个简单的应用示例上，我们会应用到前后端分离模式、前端工程化、分析和设计等，最关键是我们在前后端开发技术栈中都使用 TypeScript 作为主要开发语言。

  • 开发一个Todo应用vue？
  • Todo List 的需求和设计，前后端分离开发模式
  • Todo List 接口设计和开发 (TS + Koa)
  • Todo List 的前端设计和开发 (TS + Vue + AntDesign

  • Todo List 的移动前端设计和开发

    第四部分：课程总结

  • 总结回顾

讲师介绍

边城 | SF社区声望值前三；西南科技大学 | (计算机科学与技术) (MBA)；目前在四川凯路威科技有限公司担任软件总工程师一职。 从事软件开发 20 年，在软件分析、设计、架构、开发及软件开发技术研究和培训等方面有着非常丰富的经验，近年主要在研究 Web 前端技术、基于 .NET 的后端开发技术和相关软件架构。

本课程技术栈

  1. TypeScript@latest，
  2. Node.js@12+，TypeScript 构建工具运行环境以及 JS Server Side 运行环境
  3. VSCode@latest，最优秀的 TypeScript 编辑器之一
反馈意见给小姐姐