TypeScript入门 | 青训营笔记

努力的小Qin
60 阅读3分钟

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

【人生若尘露，天道邈悠悠。】

一、本堂课重点内容：

  • TS是什么
  • TS的基本语法
  • TS高级类型
  • 工程应用

二、详细知识点介绍：

2.1 TS是什么

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

  • JS:动态类型、弱类型语言
  • TS:静态类型、弱类型语言

image.png

2.2 TS的基本语法

一、基础数据类型

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

// 字符串
const q1:string = 'string';
// 数字
const w1:number = 1;
// 布尔值
const e1:boolean = true;
// null
const r1:null = null;
// undefined
const t1:undefined = undefined;

二、 对象类型

interface IBytedancer{
  // 只读属性：约束属性不可在对象初始化外赋值
  readonly jobId: number;
  name: string;
  sex: 'man'| 'woman'| 'other';
  age: number;
  // 可选属性：定义该属性可以不存在
  hobby?: string;
  [key: string]: any;
}

const bytedancer: IBytedancer = {
  jobId: 9302245,
  name: 'Lee',
  sex: 'man',
  age: 28,
  hobby: 'swimming',
}

image.png

三、函数类型

function add(x, y){
  return x + y;
}
const multy = (x, y) => x * y;

function add1(x: number, y: number): number{
  return x + y;
}
const multy1 :  (x: number, y: number) => number = (x, y) => x * y;

---

interface IMult {
  (x: number, y: number): number;
}
const multy2: IMulty = (x, y) => x * y;

四、函数重载

image.png 五、数组类型

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

image.png

五、TS补充类型

image.png

六、TypeScript泛型

image.png

image.png

image.png

七、类型别名 & 类型断言

// 通过type关键字定义了IObjArr的别名类型
type IObjArr = Array<{
  key: string;
  [objKey: string]: any;
}>

function keyBy<T extends IOnjArr>(objArr: Array<T>){
  // 未指定类型时，result类型为{}
  const result = objArr.reduce((res, val, key) => {
    res[key] = val;
    return res;
  }, {});
  // 通过as关键字，断言result类型为正确类型
  return result as Record<string, T>;
}

八、字符串 / 数字 字面量 image.png

2.3 TS高级类型

一、联合类型与交叉类型

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

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

image.png

二、类型保护与类型守卫

类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

联合类型 + 类型保护 = 自动类型推断

三、实现 merge 函数类型

索引类型：关键字【keyof】，其相当于取值对象中的所有key组成的字符串字面量

关键字【in】，其相当于取值 字符串字面量 中的一种可能，配合泛型P，即表示每个key

关键字【?】,通过设定对象可选选项，即可自动推导出子集类型

四、函数返回值类型

image.png

五、实现函数delayCall的类型声明

关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式：如 T === 判断类型 ？类型A : 类型B

关键字【infer】出现在类型推荐中，表示定义类型变量，可以用于指代类型

2.4 工程应用

Web

  • webpack

    • 配置webpack loader相关配置
    • 配置tsconfig.js文件
    • 运行webpack启动/打包

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

  • loader：awesome-typescript-loader、babel-loader

Node

使用TSC编译

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

三、课后个人总结：

通过本次课程，认识了TS的基础内容，最近也正在系统学习TS的课程。

avatar
文章
阅读
粉丝