TypeScript入门 | 青训营笔记

涂涂图图
52 阅读4分钟

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

本堂课重点内容

本堂课重点讲述了TypeScript的发展、基本语法和高级数据类型。

TypeScript的发展

TypeScript发展史

image.png

TypeScript与JavaScript

从变量类型的处理角度看，TypeScript与JavaScript都是弱类型语言；从变量赋值角度看，TypeScript是静态类型，而JavaScript是动态类型。

  • 弱类型语言也称为弱类型定义语言，在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据，能随着环境的不同，自动变换类型。常见的弱类型语言有VB、JS、PHP等。
  • 强类型语言也称为强类型定义语言，在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据，所有变量都必须先定义后使用。如果想要改变数据类型必须进行强制转换。常见的强类型语言有Java、C/C++等。
  • 静态类型是指变量的变量类型在编译时确定，如TypeScript、Java、C++、GO等。
  • 动态类型是指变量的变量类型在运行时确定，如JavaScript、Python等。

为什么选择TypeScript

  • 是静态类型
    • 可读性增强（基于语法解析TsDoc，ide增强）
    • 可维护性增强（在编译阶段暴露大部分错误=>多人合作的大型项目中，获得更好的稳定性和开发效率）
  • 是JS的超集
    • 包含于兼容所有JS特性，支持共存
    • 支持渐进式引入与升级

基本语法

  • 基本数据类型：string、boolean、number、null、undefined
    • 字符串/数字字面量：允许指定字符串/数字必须的固定值
  • 对象类型
    • 只读属性
    • 可选属性
    • 任意属性
  • 函数类型
    • 函数重载
  • 数组类型
    • 类型 + []
    • 泛型表示
    • 元祖表示
    • 接口表示
  • TypeScript补充类型：空类型、任意类型、枚举类型、泛型、元组、接口

高级数据类型

  1. 联合/交叉类型
  • 场景：类型声明繁琐，存在较多重复==>书籍列表，区分书籍类型
  • 说明：

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

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

    • 案例代码：书籍列表，区分书籍类型

      const bookList=[{
    author:'xiaoming',
    type:'history',
    range:'2001-2021',
},{
    author:'marry',
    type:'story',
    theme:'love',
}]

// 直接定义：
interface IHistoryBook {
    author: string;
    type: string ;
    range: string
}
interface IStoryBook {
    author: string;
    type: string;
    theme: string;
}
type IBookList = Array<IHistoryBook | IStoryBook>;

    • 使用联合/交叉改写：

      type IBookList=Array<{
    author:string;
} & ({
    type:'history';
    range:string;
} | {
    type:'story';
    theme:string;
})>
  1. 类型保护与类型守卫
  • 访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分
  • 类型守卫：定义一个函数，它的返回值是一个类型谓词 ，生效范围为子作用域
  • 承接书本案例： 
    //实现函数logBook类型
//函数接受书本类型，并logger出相关特征
function LogBook ( book: IBookItem) {
    //联合类型+类型保护=自动类型推断
    if (book. type === 'history') {
        conso le. log ( book.range)
    } else {
        console. log( book.theme);
    }
}
  1. 高级类型
  • 实现子集无污染的合并：实现merge函数类型，要求sourceObj必须为targetObj的子集
  • 索引类型：关键字[keyof]， 其相当于取值对象中的所有key组成的字符串字面量，如 type IKeys = keyof { a: string; b:number }; 相当于type IKeys = "a" | "b"。
    • 关键字[in]， 其相当于取值字符串字面量中的一种可能，配合泛型P，即表示每个key
    • 关键字[?] ， 通过设定对象可选选项，即可自动推导出子集类型
  1. 函数返回值类型
  • 实现函数delayCall的类型声明：delayCall接受一个函数作为入参， 其实现延迟1s运行函数；其返回promise，结果为入参函数的返回结果
  • 关键字[extends] 跟随泛型出现时，表示类型推断，其表达可类比三元表达式 如T===判断类型?类型A:类型B
  • 关键字[infer]出现在类型推荐中，表示定义类型变量，可以用于指代类型。 
    type IDelayCall = <T extends () => any>(func: T) => ReturnType<T>;

type IReturnType<T extends (...args: any) => any> = 
T extends (... ,args: any) => inferR?R:any

TypeScript的工程应用

1. TypeScript的工程应用-Web

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

2. TypeScript的工程应用-Node

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

个人总结

本次课程只是对TypeScript语言的一个简单介绍，课程中涉及的每一个知识点都需要慢慢的消化、理解并吸收。学习前端之路，任重而道远。

avatar
文章
阅读
粉丝