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

概述

本节课程主要分为四个方面：

Typescript 见解
Typescript 基础语法，包括类型、泛型、类型别名、类型字面量等
Typescript 高级类型讲解及实例
Typescript 工程应用介绍

高级类型

1 联合交叉类型

/*  联合类型：A|B 表示一个值可以是几种类型之一
    交叉类型：A&B 多种类型叠加到一起成为一种，包含了所需类型的所有特性。*/type IBookList=Array<{
 author:string;
 }&({
  type:'history';
  range:string;
 }|{
  type:'history';
  theme:string;
})>
复制代码

2 类型保护与类型守卫

类型保护：访问联合类型时，出于程序安全考虑，仅能访问联合类型中交集部分

类型守卫：定义一个函数，其返回值为一个类型谓词，生效范围为子作用域。

function getIsIA(arg:IA|IB):arg is IA{
 return !!(arg as IA).a;
}
复制代码

联合类型+类型保护==>自动类型判断

3 Merge 函数类型实现

/*
实现merge函数类型
要求sourceObj必须为targetObj的子集
*/复制代码

索引类型：关键字keyof，其相当于取值对象中的所有key组成的字符串字面量

4 函数返回值类型

通过泛型进行表达。

/extends 跟随泛型出现时表示类型推断，类三元表达式//infer出现在类型推荐中表示定义类型变量，可用于指代类型/type IReturnType<T extends (...args:any)=>any>=T extends(...args:any)=>infer R?R:any
复制代码

5 TypeScript 工程应用

浏览器Web webpack构建器

配置webapack loader相关配置
配置tsconfig.js文件
运行webpack启动/打包
loader处理ts文件进行编译与检查

NodeJs 使用TSC进行编译

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

参考

TypeScript

【前端专场学习资料二】第五届字节跳动青训营 - 掘金

The starting point for learning TypeScript

TypeScript入门 | 青训营笔记

概述

高级类型

参考