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

本节课的知识要点：

• TypeScript的历史及定义
• TypeScript的优势
• TypeScript的练习工具
• 联合交叉类型
• 类型保护与类型守卫
• Merge函数类型实现
• 函数返回值类型
• TypeScript的工程化应用

JS和TS比较

• JS是一个动态语言，在执行的时候才会做类型匹配
• TS是一个静态类型，会执行一次编译流程，类似于Python等
• 都是弱类型语言

TypeScript的优势

• 可读性增强：基于语法来解析TSDoc，ide增强
• 可维护性增强：在编译阶段暴露出大部分错误
• 在多人开发的大型项目中会有更好的稳定性和开发效率
• 可以兼容JS所有特性，可以与JS共存
• 支持渐进式引入和升级、

TypeScript的基础语法

• 基础的数据类型：字符串、数字、布尔值、null和undefined
• 对象类型：通过interface来对对象进行一个定义。对象有只读属性、可选属性和任意属性。
• 函数定义：
  • 普通定义

    function add(x, y) {
        return x + y;
    }
    const mult = (x, y) => x * y;
    

  • 通过interface定义

    interface IMult {
        (x: number, y: number): number;
    }
    const mult: IMult = (x, y) => x * y;
    

  • 指定数据类型定义

    function add(x: number, y: number): number {
        return x + y;
    }
    const mult: (x: number, y: number) => number = (x, y) => x * y;
    

• 函数重载
• 数组类型：类型+[]、泛型表示、元组表示、接口表示
• 允许指定字符串/数字必须的固定值

联合/交叉类型

• 联合类型：A|B；联合类型表示一个值可以是几种类型之一
• 交叉类型：A&B；多种类型叠加在一起成为一种类型，包含了所需所有类型的特性

类型保护和类型守卫

• 在访问联合类型时，出于程序安全，只可以访问到联合类型中交集部分
• 类型守卫：定义一个函数，返回值是一个类型谓词，生效范围是子作用域
• 联合类型 + 类型保护 = 自动类型判断

Merge函数

• 要实现这个函数类型的话，必须要sourceObj为targetObj的子集

函数返回值类型

• 关键字extends 跟随泛型出现的时候表示是类型判断，可以类比三元表达式
• 关键字infer 出现在类型推荐中时，表示定义类型变量，用来指代类型

工程应用

• 浏览器Web
  • 通过webpack举例，流程：配置webpack loader相关配置=》配置tsconfig.js文件=》运行webpack启动/打包=》loader处理ts文件时，会进行编译与类型检查
• NodeJS
  • 流程：安装node和npm=》配置tsconfig.js文件=》使用npm安装tsc=》使用tsc运行编译得到js文件

个人思考总结：

ts功能强大，方便多人共同开发一个项目而且在某些方面是要比js更加方便的，这就是它最近在互联网论坛上很火的原因。通过本次课程，我开拓了眼界，不应该只局限于js还要继续去学习ts，丰富强化自己的职业技能。