TypeScript笔记 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第四天，今天所学课程是跟TypeScript有关的知识。
众所周知，JavaScript语言是动态类型、弱类型的语言，而TypeScript虽然也是弱类型语言，但TypeScript是静态类型。弱类型语言就是在计算过程中会出现隐式转换，例如数字加字符串会将数字拼接到字符串上。TS静态类型的几大特点是：1. 可续性增强，基于语法解析TSDoc，ide增强。2. 可维护性增强，能获得更好的稳定性和开发效率。

TypeScript基本语法

基础数据类型

const q: string = 'string' //字符串
const w: number = 1 //数字
const e: boolean = true //布尔值
const r: null = null //null
const t: undefined = undefined //undefined

对象属性

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

函数类型

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

数组类型

type IArry1 = number[]; //[类型+方括号]表示
type IArry2 = Array<string | number | Record<string, number>>; //泛型表示
type IArry3 = [number, number, string, string] //元组表示
interface IArry4 = {
    [key: number]: any;
} //接口表示

TS高级数据类型

联合交叉类型

联合类型：IA | IB；联合类型表示一个值可以是几种类型之一，即既可以是|前的也可以是|后的数据类型
交叉类型：IA & IB；多种类型叠加到一起成为一种类型，包含了所需的所有类型特性

type IBookList = Array<{
    Author: string; //一定有的
} & ({
    type: 'history'; //与此或者下面那种数据类型叠加在一起
    ranger: 'string';
} | {
    type: 'story';
    range: string;
}

类型保护或类型守卫

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;
} //此即为类型守卫，定义一个函数返回值为类型谓词，生效范围为子作用域

工程应用

webpack使用流程，首先配置webpack loader相关配置，之后配置tsconfig.js文件，其次运行webpack启动与打包，最后loader处理ts文件时会进行编译与类型检查
Nodejs使用流程，首先安装Node与npm，之后配置tsconfig.js文件，其次使用npm安装tsc，最后使用tsc运行编译得到js文件。