TypeScript基础介绍 ｜ 青训营笔记

SaraiNoQ
120 阅读2分钟

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

语言层面

language.jpeg

  • 动态类型：变量定义时无类型声明。
    • 变量的类型在运行的时候确定。
    • 变量的类型在运行可以修改。
  • 静态类型：变量定义时有类型声明。
    • 变量的类型在编译的时候确定
    • 变量的类型在运行时不能修改，这样编译器就可以确定运行时需要的内存总量。
  • 弱类型语言：数据类型可以被忽略。
  • 强类型语言：强制数据类型定义。一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了。

TS基础内容

TypeScript静态弱类型语言

  • 可读性增强：基于语法解析TSDoc；ide增强：类型提示、代码补全。
  • 可维护性增强：在编译简短暴露大部分错误
    • 语法拼写错误
    • 类型匹配错误
  • 多人合作的大型项目中，获得更好的稳定性和开发效率

TS基础语法

详细语法请参照官方文档：

基础类型 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

类型

  • null 和 undefined：所有类型的子类型
  • boolean：布尔值
  • number：数字
  • string：字符串
  • 枚举类型：支持枚举值到枚举名的正、反映射
  • any
  • 数组
    • T[]
    • Array
  • 元组
    • [string, number…]
  • void
  • never
  • object

函数重载

泛型

type IGetRepeatArr = (target: any) => any[];

// 不预先指定具体的类型，而是在使用的时候再指定类型
type IGetRepeatArr = <T>(target: T) => T[];

// interface
interface IX<T, U> {
	key: T;
	val: U;
}

// class
class IMan<T> {
	instance: T;
}

// alias
type ITypeArr<T> = Array<T>

泛型约束

T = ...

T extends typeof ...

约束.png

类型别名&类型断言

  • varaibleName as T

  • varaibleName

assert.png

高级类型

联合、交叉类型

  • 联合类型：IA | IB；联合类型表示一个值可以是几种类型之一。
  • 交叉类型：IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特征。

Union.png

继承接口

// 获得一个新的类型，让某些类型可选 => Partial
export interface DefaultOptons {
  uuid: string | undefined,
  requestUrl: string | undefined,
  sdkVersion: string | number,
  extra: Record<string, any> | undefined,
}

export interface Options extends Partial<DefaultOptons> {
  // requestUrl必选，其他可选
  requestUrl: string
}

工程实践

Webpack

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

Node

  1. 安装配置node环境
  2. 配置tsconfig.js文件
  3. 使用npm安装tsc
  4. 使用tsc运行编译得到js文件

Rollup

  1. 创建基础目录结构
  2. 初始化项目
    1. pnpm init
    2. pnpm install …
  3. 使用tsc初始化tsconfig.js，配置后可正常使用
  4. rollup -c打包项目
avatar
文章
阅读
粉丝