TypeScript 入门 | 青训营笔记

用户7756994272221
48 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第四天。

一、本堂课重点内容：

TypeScript 是 JavaScript 的语法超集，它添加了静态类型，近几年的发展中，也受到诸多开发者的喜爱。Typescript 的社区逐渐壮大，日趋完善，为越来越多前端开发者提供服务，本节课将主要为同学解读 TypeScript 的优势及其主要使用的工具。而后还带领大家认识 TypeScript 高级类型，提供常见的解决方案，帮助同学可以在日常的前端开发过程中，通过高级类型的方式，将普通类型的解决方案进行高级化。在课程最后，还将 以Web 场景为例，介绍 TypeScript 的工程应用。

二、详细知识点介绍：

1. TypeScript 定义解析

TypeScript源于JS的静态类型（先编译后执行）弱类型语言，JS为动态类型（执行阶段决定类型匹配）。

相对于JS的好处：

  • 可读性强：基于语法解析TSDoc，IDE增强
  • 可维护性增强：在编译阶段暴露大部分错误，多人合作时获得更好的稳定性和开发效率
  • 作为JS的超集，包含于兼容的所有JS特性，支持共存
  • 作为JS的超集，支持渐进式引入与升级。

2. 基本语法

  • 基础数据类型 image.png 在变量的变量名后加:，而后加上类型名称。

  • 对象类型 image.png ?：表示特征属性，可有可无

  • 函数类型

    image.png image.png image.png

  • 函数重载 image.png

  • 数组类型 image.png

  • TypeScript补充类型 image.png

  • TypeScript泛型

    • 使用时根据传入内容确定类型，不事先预设 image.png image.png image.png

  • 类型别名与类型断言 image.png

  • 字符串、数字、字面量

    • 允许指定字符串、数字必须是固定值 image.png

3. 高级类型

  • 联合/交叉类型 image.png
    • 联合类型：IA | IB表示一个值可以是几个类型之一
    • 交叉类型：IA & IB多种类型叠加到一起成为一种类型，包含了所需的所有类型的特性
  • 类型保护与类型守卫 image.png image.png image.png
  • 函数返回值类型 image.png image.png

4. 工程应用

Web

  • 配置webapack loader相关配置
  • 配置tsconfig.js文件
  • 运行webapack启动、打包
  • loader处理ts文件时，会进行编译和类型检查

使用TSC编译

  • 安装Node与npm
  • 配置tsconfig.js文件
  • 使用npm安装tsc
  • 使用tsc运行编译得到js文件

三、实践练习例子：

  • image.png
  • image.png image.png image.png

四、课后个人总结：

本课程中我学习了TypeScript的相关知识，了解了其与JavaScript的关系，知晓了TypeScript的基本语法、高级类型等相关知识，并通过其工程应用明确了如何使用TypeScript。

五、引用参考：

本篇文章代码均引用老师在掘金课堂中的示例。

avatar
文章
阅读
粉丝