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

一、本堂课重点内容：

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

二、详细知识点介绍：

TypeScript简介

和JavaScript的联系与区别

动态类型：边编译边执行，在执行阶段确定类型的匹配
弱类型语言：存在隐式类型转换，运行跨类型的运算

静态类型：先编译后执行，提前确定类型
- 可读性增强、维护性增强
- 在多人合作的大型项目中，稳定性和开发效率更好
弱类型语言
是JS的超集，兼容所有JS特性，支持共存
支持间进式引用与升级

基本语法

在TS编写约定中，一般情况下I开头表示类型，与一般的变量做区分

对象类型

interface IBytedancer{
    // 只读属性：约束属性不可在对象初始化外赋值
    readonly jobId: number;
    name: string;
    sex: 'man'|'woman'|'other';
    age: number;
    // 可选属性：定义该属性可以不存在
    hobby?: string;
    // 任意属性：约束所有对象属性必须是该属性的子类型
    [key:string]: any;
}

const btyedancer: IBytedancer={
    jobId: 12345,
    name: 'lin',
    sex: 'man',
    age:28,
    hobby: 'swimming',
}

// 报错：无法分配到jobId，因为它是只读属性
btyedancer.jobId=4568;
// 成功：任意属性标注下可以添加任意属性
btyedancer.plateform='data';
// 报错：缺少必须属性name
const btyedancer2:IBytedancer={
    jobId:342423,
    sex: 'woman',
    age: 18,
}

函数类型

为函数声明类型：

直接在函数上进行类型补充
给函数变量赋值函数类型声明

函数重载

数组类型

类型+方括号

type IArr1 = number[];
const arr1: IArr1 = [1,2,3,4,5,6];

泛型表示

type IArr2 = Array<string|number|Record<string,number>>;
const arr2: IArr2 = [1,2,'3','4',{a:1}];

元祖表示

type IArr3 = [number,number,string,string];
const arr3: IArr3 = [1,2,'3','4'];

接口表示

interface IArr4{
	[key:number]:any;
}
const arr4: IArr4 = ['string', ()=> null,{},[]];

泛型

不预先指定具体的类型，而在使用的时候再指定类型的一种特性

高级数据类型

联合/交叉类型

联合类型：IA | IB，表示一个值可以是几种类型之一

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

type IBookList = Array<{
	author: string;
} & ({
	type: 'history';
	range: string;
} | {
	type: 'story';
	theme: string;
})>

类型保护与类型守卫

访问联合类型时，为保护程序安全，仅能访问联合类型中的交集部分
解决方法：可以定义一个函数，返回值是一个类型谓词，生效范围为子作用域
联合类型+类型保护=自动类型推断

索引类型

关键字【keyof】：相当于取值对象中所有key组成的字符串字面量

关键字【in】：相当于取值字符串字面量中的一种可能，配合泛型P，即表示每个key

关键字【？】：通过设定对象可选选项，即可自动推导出子集类型

函数返回值类型

关键字【extends】：跟随泛型出现时，表示类型推断，其表达可类比三元表达式，如T===判断类型？类型A：类型B

关键字【infer】：出现在类型推荐中，表示定义类型变量，可以用于指代类型

工程应用

web

基于webpack做构件

配置webpack loader
配置tsconfig.js文件
运行webpack启动/打包
loade处理ts文件时，会进行编译与类型检查

相关loader：awesome-typescript-loader、babel-loader

NodeJs

使用TSC编译
1. 安装Node与npm
2. 配置tsconfig.js文件
3. 使用npm安装tsc
4. 使用tsc运行编译得到的js文件

三、课后个人总结：

函数部分有点难以理解，对typescript的关键字和语法不够熟悉，还需要课后补充学习。

TypeScript 入门| 青训营笔记