TypeScript 入门 ｜ 青训营笔记

旺崽
90 阅读1分钟

TypeScript 入门

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

TypeScript 介绍

发展历史

在这里插入图片描述

JS vs TS

JavaScriptTypeScript
动态类型静态类型
弱类型语言弱类型语言

TypeScript 特性

静态类型

  • 可读性增强：基于语法解析TSDoc，ide增强
  • 可维护性增强：在编译阶段暴露大部分错误

多人合作的大型项目中，获得更好的稳定性和开发效率

JS 的超集

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

基本语法

基础数据类型

在这里插入图片描述

对象类型

在这里插入图片描述

函数类型

在这里插入图片描述

函数重载

在这里插入图片描述

数组类型

在这里插入图片描述

TypeScript 补充类型

在这里插入图片描述

TypeScript 泛型

在这里插入图片描述

在这里插入图片描述

类型别名 & 类型断言

在这里插入图片描述

字符串 / 数字 字面量

在这里插入图片描述

高级类型

联合 / 交叉类型

  • 联合类型：A｜B 联合类型表示一个值可以是几种类型之一
  • 交叉类型：A & B 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

在这里插入图片描述

在这里插入图片描述

类型保护与类型守卫

在这里插入图片描述

在这里插入图片描述

高级类型

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

函数返回值类型

在这里插入图片描述

在这里插入图片描述

工程应用

Web

  1. 配置 webpack loader 相关配置

  2. 配置 tsconfig.js 文件

  3. 运行 webpack 启动 / 打包

  4. loader 处理 ts 文件时，会进行编译与类型检查

Node

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

在这里插入图片描述

avatar
文章
阅读
粉丝