「TypeScript 入门|青训营笔记」

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

今日学习：

• 为什么学TypeScript？
• TypeScript基本语法
• TypeScript高级类型
• TypeScript的工程应用

为什么学TypeScript？

TypeScript发展历史；

• 2021-10：微软发布了TypeScript第一个人版本（0.8）
• 2014-10：Angular发布了基于TypeScript的2.0版本
• 2015-04：微软发布了 Visual Studio Code
• 2016-05：@types/react 发布，TypeScript可开发React
• 2020-09：Vue发布了3.0版本，官方支持TypeScript
• 2021-11：V4.5版本发布

TS的优势：

• 静态类型：

  • 可读性增强：基于语法解析TSDoc，ide增强。

  • 可维护性增强：在编译阶段暴露大部分错误

    =>多人的大项目中，获得更好的稳定性和开发效率。

• JS的超集：

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

基本语法

基础数据类型：

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

对象类型：

interface IBytedacer{
    /* 只读属性：约束属性不可在对象初始化外赋值 */
    readonly jobID:number;
    
    /* 可选属性：定义该属性可以不存在 */
    hobby?:string;
    
    /* 任意属性：约束所有对象属性都必须是该属性的子集 */
    [key:string]:any;
}

函数类型：

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

数组类型：

/* 【类型+方括号】表示 */
type IArr1 = number[];
​
/* 泛型表示 */
type IArr2 = Array<string|number|Record<string,number>>;
​
/* 元祖表示 */
type IArr3 = [number,number,string,string];
​
/* 接口表示 */
interface IArr4 {
    [key:number]:any;
}

补充类型：

/* 空类型，表示无赋值 */
type IEmptyFunction = () =>void;
​
/* 任意类型，是所有类型的子类型 */
type IAnyType = any;
​
/* 枚举类型：支持枚举值的正、反向映射 */
enum EnumExample {
    add='+';
    mult = '*';
}
​
EnumExample['add'] === '+';
EnumExample['+'] === 'add';
​
/* 泛型 */
type INumArr = Array<number>;

字符串/数字 字面量

/* 允许指定字符串/数字必须的固定值 */
​
/* IDomTag必须为html、body、div、span、中的之一 */
type IDomTag = 'html'|'body'|'div'|'span';

高级类型

为书籍列表编写类型 => 类型声明繁琐，存在较多重复

interface IHistoryBook{
    author:string;
    type:string;
    range:string;
}
interface IStoryBook{
    author:string;
    type:string;
    theme:string;
}
type IBookList = Array<IHistoryBook|IStoryBook>

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

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

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

工程应用：

1. web

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

2. Node

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