TypeScript学习之路 | 青训营笔记

GinYue
72 阅读4分钟

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

本堂课主要讲解的重点内容

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

对讲解的部分知识点进行介绍

一、TS优势解读（ JS 和 TS 的区别）

JavaScript：动态类型（执行时编译）、弱类型语言

TypeScript：静态类型（执行前编译）、弱类型语言

静态类型的优势：

  • 可读性增强：基于语法解析TSDoc,ide增强
  • 可维护性增强：在编译阶段暴露大部分错误
  • 多人合作的大型项目中，获得更好的稳定性和开发效率

TS 是 JS 的超集：

  • 包含于兼容所有Js特性，支持共存
  • 支持渐进式引入与升级

二、数据类型介绍

1、基础数据类型

图片.png

2、对象数据类型

图片.png

sex: 'man' | 'woman' | 'other';
// 👆字符串字面量：允许指定字符串或数字必须的固定值，只能为其中之一
num: 1 | 2 | 3 | 4 | 5;

3、函数类型

图片.png

函数重载

图片.png

4、数组类型

开发中常用第一、二种方式： 图片.png

5、补充类型（空类型、任意类型、枚举类型）

图片.png

6、泛型

泛型：不预先指定具体的类型，而是根据使用时的数据类型进行指定

开发中需要输入某一类型，并期望返回同一类型数据，但是如果定义为any，则会导致返回的数据类型丢失，无法使获取到的数据与输入的参数数据类型统一。因此通过泛型可以解决该问题👇 图片.png

图片.png

泛型约束：extends（限制泛型必须符合某种数据类型）、=（泛型参数默认类型） 图片.png

7、类型别名 && 类型断言

图片.png

8、联合/交叉类型

  • 不使用联合交叉时的写法👇：声明繁琐，重复内容多

图片.png

  • 使用联合/交叉写法👇：

联合类型：A|B；联合类型表示一个值可以是几种类型之一

交叉类型：A&B；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

图片.png

三、类型保护与类型守卫

IA、IB之间没有交集，该写法在TS中会报错（JS不会报错） 图片.png

// 类型守卫案例👇

interface IA { a: 1, a1: 2 }
interface IB { b: 1, b1: 2 }

/* 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域 */
function getIsIA(arg: IA | IB): arg is IA {
    return !!(arg as IA).a;
    // as断言：断言a一定属于IA
}
function log2(arg: IA | IB) {
    if (getIsIA(arg)) {
        console.log(arg.a1)
    } else {
        console.log(arg.b1);
    }
}

// 类型保护案例👇

// 实现函数logBook类型
// 函数接受书本类型，并logger出相关特征
function logBook(book: IBookItem) {
    // 联合类型+类型保护=自动类型推断
    if (book.type ==='history') {
        console.log(book.range)
    } else {
        console.log(book.theme);
    }
}

四、高级类型

图片.png

图片.png 通过泛型的方式进行改进👇 （Partial的表示很高级 图片.png

五、函数返回值类型

// 实现函数delayCal的类型声明
// delayCall接受一个函数作为入参，其实现延迟1s运行函数
// 其返回promise,结果为入参函数的返回结果
function delayCall(func) {
    return new Promise(resolve => {
        setTimeout(() => {
            const result = func();
            resolve(result);
        },1000);
    });
}

通过泛型表达👇（泛型必须是函数，需要做一定的限定 图片.png

六、工程应用

1、浏览器Web -webpack

a. 配置webpack loader相关配置

b. 配置tsconfig,js文件

c. 运行webpack启动/打包

d. loader处理ts文件时，会进行编译与类型检查

相关loader推荐:

1)awesome-typescript-loader

2)babel-loader

2、Node.js

将ts文件转换为js文件进行：Code.ts -> TSC(Code.ts) -> Code.js (TSC需要手动运行）

a. 安装Node与npm

b. 配置tsconfig,.js文件

c. 使用npm安装tsc

d. 使用tsc运行编译得到js文件

个人总结

第一次接触 TypeScript，感觉很新奇，相比js还是有一定的不同的，虽然通过此次课程进行了一些了解，但仍然还不那么熟练，接下来会通过尝试改造ToDoList项目进行一定的实践~

avatar
文章
阅读
粉丝