关于typescript:TypeScript-学习笔记

53次阅读

共计 9682 个字符，预计需要花费 25 分钟才能阅读完成。

Hello, 各位怯懦的小伙伴, 大家好, 我是你们的嘴强王者小五, 身体健康, 脑子没病.

自己有丰盛的脱发技巧, 能让你一跃成为资深大咖.

一看就会一写就废是自己的宗旨, 菜到抠脚是自己的特点, 低微中透着一丝丝坚强, 傻人有傻福是对我最大的刺激.

欢送来到 小五 的随笔系列 之TypeScript 学习笔记.

导读

本文初衷为笔者在应用一段时间 TS 后, 对所学所想做一个记录. 文章内容较为根底, 适宜作为入门级教程学习; 且涵盖内容并不全面, 缺失蕴含类在内的诸多内容. 如果各位看官不介意以上几点, 欢送与笔者一起进入这谨严却又妙不可言的奇幻旅途.

根底类型

Boolean – 布尔

let flag: boolean = false;

Number – 数字

let num: number = 10;

👺 扩大: number 类型还反对 二进制 (0b 结尾)、 八进制 (0o 结尾)、 十六进制(0x 结尾) 字面量. 运算或输入时会转换为对应的十进制.

let num02: number = 0b1010;
let num08: number = 0o744;
let num16: number = 0xf00d;

String – 字符串

let str: string = '黄刀小五';

Array – 数组

数组共有两种定义形式: Array<T> 或 T[] (T 为该数组每项的元素类型)

let numArr: number[] = [1, 2, 3];
let numArr: Array<number> = [1, 2, 3];

Tuple – 元组

👺 特点: < 数组 >, < 长度已知 >, < 每项元素类型不尽相同 >

😼 就是一个给每项都定义数据类型的数组

let tuple: [string, string, number, boolean?] = ['No.1', '黄刀小五', 18];

🦥 利用:

  • React Hook 的 useState
import {useState} from 'react';
const [loading, setLoading] = useState<boolean>(false); // 这里类型可省略, 详见后文类型推断
  • csv 数据格式
type Touple = [string, number, string];
let csvData: Touple[] = [['黄刀小五', 18, '男'], ['二狗子', 14, '男']];

👺 扩大: 元组越界

let tuple: [number, string] = [1, '黄刀小五'];
tuple.push(2); // ✅ right 元组越界时, 该项类型相当于对元组的各项类型做联结

/* 过程如下, 看不懂的看官莫慌, 请先看后文 */
type UnionType<T> = T extends (infer P)[] ? P : never;
type TupleType = UnionType<typeof tuple>; // number | string

Enum – 枚举

enum Active {
  inactive,
  active,
}

enum Fruit {
  apple = 'apple',
  orange = 'orange',
  banana = 'banana',
}

若枚举类型未指定值或指定的值为 number 类型, 如上述 Active, 可对其进行双向取值: Active[0]、Active['active'], 其映射如下【👇】

{
  0: 'inactive',
  1: 'active',
  inactive: 0,
  active: 1,
}

可对枚举的其中一项进行指定数值(通常为第一项), 其余项会程序递增

enum Type {
  active = 1,
  inactive,
}

{ // 对应映射为
  1: 'active',
  2: 'inactive',
  active: 1,
  inactive: 2,
}

😼 tips: 倡议采纳赋值模式的枚举. 可读性更高, 如上述 Fruit

🦥 利用:

  • 联合 switch … case 应用:
enum ActionType {
  ADD = 'ADD',
  EDIT = 'EDIT',
  DELETE = 'DELETE',
}

const reducer = (type: ActionType) => {switch(type) {
    case ActionType.ADD:
      // xxx
      break
    case ActionType.EDIT:
      // xxx
      break
    ...
  }
}

reducer(ActionType.ADD); // ✅ right
let params = 'ADD';
reducer(params); // ❎ error (类型“string”的参数不能赋给类型“ActionType”的参数)

/* 😼 tips: 非赋值模式大家可自行尝试 */
  • 定义类型映射 或 定义一组常量
enum Status { // 类型映射
  unprocessed = 1, // 未解决
  processed, // 已解决
  refused, // 已回绝
}

enum Fruit { // 常量
  apple = '苹果',
  orange = '橘子',
  banana = '香蕉',
}

👺 扩大: keyof typeof Enum, 可将枚举类型转换为联结类型; 置信我, 你会用到的😏

enum ActionType {
  ADD,
  EDIT,
  DELETE,
}
type ActionTypeConst = keyof typeof ActionType // 'ADD' | 'EDIT' | 'DELETE'

Any – 任意类型

let value: any;

😼 tips: 食物链最顶端, 应尽量减少 any 的应用.

Unknown – 未知类型

let value: unknown;

unknown 示意未知类型, 与 any 不同的是无奈对 unknown 类型执行任何操作. 认真思考下 <any: 任意类型 >、<unknown: 未知类型 > 的区别.

👉 以 number 的 toFixed() 办法举例:

  • unknown 代表我不晓得这是什么类型, 而只有 number 有 toFixed() 办法, 故不能应用;
  • 而 any 代表我能够是任意类型, 此时调用 toFixed() 办法的我就是 number 类型;

😼 tips: 如想应用 any, 请先思考是否可用 unknown 代替. (搭配后文类型爱护可安心食用)

Void – 无类型

罕用于没有具体返回值的函数

const fn = (str: string): void => {// 执行 xxx 事件}

Null 和 Undefined

let u: undefined = undefined;
let n: null = null;

这两个不晓得要说点啥, 就补充以下两点吧 (然而与 TS 没啥关系)

  1. Number(undefined) => NaN, Number(null) => 0
  2. const fn = (arg?: string) => {...} arg 的类型是 string | undefined

Never – 永不返回

let n: never;
  • never 示意那些永远不存在的值, 当咱们不想捕捉以后值时, 可应用 never;
  • 任何类型都不可赋值给 never, 包含 any;
  • never | T = T 此个性可用来过滤掉不须要的值;

🦥 利用:

  • 做类型查看
type Type = string | number;

const fn = (arg: Type) => {if (typeof arg === 'string') {...}
  else if (typeof arg === 'number') {...}
  else {const check: never = arg;}
}

如上, 此时永远不会走到 else, 上面咱们做以下操作:

- type Type = string | number;
+ type Type = string | number | boolean;

* 此时 else 中的 check 会报错 (不能将类型“boolean”调配给类型“never”)

类型推论

如果没有指定类型, TS 会依据类型推论推断出一个类型.

let val; // 推论成: let val: any;
let num = 10; // 推论成: let num: number = 10;
num = '黄刀小五'; // ❎ error (不能将类型“string”调配给类型“number”)

🦥 利用: < 繁多动态类型 - 如上述 num>、< 函数返回值 - 个别状况均可正确推断其返回值类型, 不必额定指定 >、< 循环中的子元素 >

😼 tips: 如果 TS 能正确推断出其类型, 咱们可采纳类型推论而不用定义类型.

类型断言

类型断言用来通知编译器“我晓得本人在干什么”, 有 尖括号 和 as 两种写法. 在 $tsx$ 语法中, 只反对 as.

* 😼 tips: 上面咱们应用数组来举个例子, 理论场景中应应用元组.

type Key = string | number;
let arr: Key[] = ['黄刀小五', 18];

// 不能将类型“Key”调配给类型“string”- let name = arr[0];
- console.log(name.length);

// 应用类型断言
+ let name = arr[0] as string;
+ let name = <string>arr[0];
+ console.log(name.length);

Interface – 接口

接口用来定义对象的类型

interface User {
  readonly id: number; // 只读属性, 不可批改
  name: string; // 必须属性
  desc?: string; // 可选属性
  say?: (name: string) => void; // 办法
}

const say = (name: string) => {...}
let user: User = {
  id: 1,
  name: '黄刀小五',
  say,
}

user.id = 2; // ❎ error (无奈调配到 "id"，因为它是只读属性)

索引签名 – 使接口更加灵便

interface User {[key: string]: string; // 示意 key 为 string, value 为 string 的任意属性
}

let user:User = {
  name: '黄刀小五',
  desc: '菜鸡前端一只',
}

😼 tips: 所有成员都必须合乎索引签名的特色, 索引签名参数类型必须为 string | number

interface User {[key: string]: string;
  age: number; // ❎ error (类型“number”的属性“age”不能赋给字符串索引类型“string”。)
}

接口合并

interface User {name: string;}
interface User {age: number;}
/* 两者会合并为👇 */
interface User {
  name: string;
  age: number;
}

接口继承

关键字: extends

interface Person {name: string;}
interface User {age: number;}
interface Student extends Person, User {desc: string;}
/* Student 接口格局如下👇 */
interface Student {
  name: string;
  age: number;
  desc: string;
}

😼 tips: 接口和类型别名均可应用的状况下应用接口

🤔 思考: ❓ 如何定义一个树形构造

interface Tree {
  key: number;
  value: string;
  child?: Tree[];}
let tree: Tree[] = [];

类型别名

顾名思义, 为该类型取一个新的名字

type Key = string | number;

与 Interface 比照

  • type 不反对继承和申明合并, interface 能够, 参考上文;
  • type 更为通用, 右侧能够是任意类型, interface 次要用于定义对象;
  • type 和 interface 均可应用的状况下应用 interface;

联结类型与穿插类型

  • 联结类型 (A | B)
type Key = string | number; // 代表 string 或 number 类型

😼 tips: 联结类型能够用来申明具体的值

type Status = 'active' | 'inactive';
  • 穿插类型 (A & B)
interface User {name: string;}
interface Student {age: number;}
type Blogger = User & Student;

/* Blogger 类型格局如下👇 */
{
  name: string;
  age: number;
}

😼 tips: 两个根底类型做穿插, 会生成 never 类型

type Key = string & number; // never, 没有类型能够满足即是 string 又是 number

类型查找

类型查找能够提取对象类型上某一属性的类型

interface Person {
  User: {
    name: string;
    age?: number;
  }
}
type User = Person['User']

😼 tips: 罕用于第三方库类型无奈援用的场合

罕用关键字

const

👺 配合类型断言 as 来申明常量

type Status = 'active' | 'inactive';
const fn = (status: Status) => {...}

- let status = 'active'; // 此时 'active' 被解析为字符串而十分量
- fn(status); // ❎ error (类型“string”的参数不能赋给类型“Status”的参数)

* 以下 3 种等价, 均可将 'active' 解析为常量
+ let status = 'active' as const;
+ const status = 'active';
+ let status: Status = 'active';
+ fn(status); // ✅ right

😼 tips: 第三方插件定义的常量常常须要配合 as const 应用呦

typeof

👺 用来获取变量的类型

let str = '黄刀小五';
type Str = typeof str; // type Str = string

let user = {name: '黄刀小五'}
type User = typeof user; // type User = {name: string;}

keyof

👺 用来提取对象类型的 key 值

interface User {
  name: string;
  age?: number;
}
type Key = keyof User; // type Key = 'name' | 'age'

类型爱护

❓ 为什么须要类型爱护

const fn = (value: string | number) => {if (value.length) {...} // ❎ error (类型“string | number”上不存在属性“length”)
}

上述代码, 如果想在 value: string 时执行一段逻辑要怎么办呢?

此时就须要类型爱护了, 应用类型爱护后, 以后代码段会依照当时所指定的类型执行.

👺 typeof

const fn = (value: string | number) => {if (typeof value === 'string') { // 利用 typeof 限度 value 的类型为 string
    console.log(value.length);
  }
}

👺 is

const isString = (x: unknown): x is string => {return typeof x === 'string';}
const fn = (value: string | number) => {if (isString(value)) console.log(value.length); // value is string
}

👺 in

示意某属性是否在以后对象中存在

interface User {
  name: string;
  age?: number;
}
const fn = (args: User) => {if ('age' in args) {...}
  else {...}
}

fn({name: '黄刀小五', age: 18}); // 执行 if 语句
fn({name: '黄刀小五'}); // 执行 else 语句

泛型

👺 作用: 用于做代码复用

先来看个例子

const fn = (value: number): number => value;

🤔 思考 ❓ 如果此时我想传入一个 string 类型并返回一个 string 类型呢

const fn = <T>(value: T): T => value;
fn<string>('黄刀小五'); // const fn: <string>(value: string) => string

* 😼 tips: 可依据 类型推断 推断出其为 string 类型, 而不必特意指定 -> `fn('黄刀小五');`

以上, 一个泛型就实现好了, 其能够将类型作为一个参数, 在调用时传入类型进行指定.

👺 留神: 在 $tsx$ 中, <T> 会被解析成标签, 可应用上面的写法:

const fn = <T extends {}>(value: T): T => value; // extends 也可用于放大 T 的范畴
const fn = <T,>(value: T): T => value;
  • 传入多个类型:
const fn = <T, U>(type: T, value: U): U => {...};
fn<boolean, string>(true, '黄刀小五');

泛型的作用相当之广, 如定义一个接口:

interface Teacher<T> {
  readonly id: number;
  name: string;
  student?: T[];}
interface Student {
  readonly id: number;
  name: string;
  age?: number;
}
let teahcer: Teacher<Student> = {
  id: 1,
  name: '黄刀小五',
  student: [{
    id: 1001,
    name: '二狗子',
    age: 14,
  }]
}

罕用语法糖

上面咱们来用上述常识实现下 TS 中封装好的语法糖 (舒适提醒: 倡议先搞懂上文, 至多搞懂泛型在浏览上面内容) look down 👇

Readonly

👺 将对象类型的属性均变为只读

  • 代码实现
type Readonly<T> = {readonly [K in keyof T]: T[K];
};
  • Demo
interface Person {
  readonly name: string;
  age: number;
  desc?: string;
}
let person: Readonly<Person> = {
  name: '黄刀小五',
  age: 18,
}
person.age = 19; // ❎ error (无奈调配到 "age"，因为它是只读属性)

Partial

👺 将对象类型的属性均变为可选

  • 代码实现
type Partial<T> = {[K in keyof T]?: T[K];
};
  • Demo
interface Person {
  readonly name: string;
  age: number;
  desc?: string;
}
let person: Partial<Person> = {}; // 此时所有属性均为可选

Required

👺 将对象类型的属性均变为必须

  • 代码实现
type Required<T> = {[K in keyof T]-?: T[K];
};

😼 tips: -? 示意去掉可选符号 ?, 此符号 (–) 同样可用于其它地位, 如: -readonly 可去掉只读属性等.

  • Demo
interface Person {
  readonly name: string;
  age: number;
  desc?: string;
}
let person: Required<Person>> = {
  name: '黄刀小五',
  age: 18,
  desc: '基于搜索引擎的复制粘贴工程狮',
}; // 此时所有属性均为必须

Record

👺 将一个类型的所有属性值映射到另一个类型上并创立一个新的类型

  • 代码实现
type Record<K extends string, T> = {[P in K]: T;
};
  • Demo
interface Person {
  readonly name: string;
  age: number;
  desc?: string;
}
type Kind = 'teacher' | 'student';
let person: Record<Kind, Person> = {
  teacher: {
    name: '黄刀小五',
    age: 18,
  },
  student: {
    name: '二狗子',
    age: 14,
  }
}; // 将 Person 类型映射到 Kind 类型中

/* Record<Kind, Person> 相当于👇 */
type NewPerson = {[key in Kind]: Person
};

Extract

👺 从 T 中提取 U

  • 代码实现
type Extract<T, U> = T extends U ? T : never;
  • Demo
type Student = '二狗子' | '如花';
type Teacher = '黄刀小五' | '二狗子';
type Trainee = Extract<Student, Teacher>; // 输入 '二狗子'

/* Extract<Student, Teacher> 相当于👇 */
'二狗子' in Teacher -> '二狗子'
'如花' in Teacher -> never
'二狗子' | never = '二狗子'

Exclude

👺 从 T 中排除 U

  • 代码实现
type Exclude<T, U> = T extends U ? never : T;
  • Demo
type Student = '二狗子' | '如花';
type Teacher = '黄刀小五' | '二狗子';
type OnlyStudent = Exclude<Student, Teacher>; // 输入 '如花'

/* Exclude<Student, Teacher> 相当于👇 */
'二狗子' in Teacher -> never
'如花' in Teacher -> '如花'
'如花' | never = '如花'

Pick

👺 筛选对象中的局部属性

  • 代码实现
type Pick<T, K extends keyof T> = {[P in K]: T[P];
}
  • Demo
interface Person {
  readonly name: string;
  age: number;
  desc?: string;
}
let person: Pick<Person, 'age' | 'desc'> = {age: 18,};

/* Pick<Person, 'age' | 'desc'> 相当于👇 */
interface Person {
  age: number;
  desc?: string;
}

Omit

👺 疏忽对象中的局部属性

  • 代码实现
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
  • Demo
interface Person {
  readonly name: string;
  age: number;
  desc?: string;
}
let person: Omit<Person, 'name'> = {age: 18,};

/* Omit<Person, 'name'> 相当于👇 */
interface Person {
  age: number;
  desc?: string;
}

ReturnType

👺 获取办法的返回值类型

  • 代码实现
type ReturnType<T> = T extends (...args: any[]
) => infer R ? R : any;

-> infer 配合 extends 应用, 用于推断函数的返回值类型

  • Demo
const getName = (name: string) => name;
type ReturnGetName = ReturnType<typeof getName>; // string

Parameters

👺 获取办法的参数类型

  • 代码实现
type Parameters<T> = T extends (...args: infer P) => any ? P : never;

-> 这里 infer 用于推断函数的参数类型, Parameters 返回格局为元组.

  • Demo
const getName = (name: string) => name;
type ParamGetName = Parameters<typeof getName>; // [name: string]

NonNullable

👺 排除 null 和 undefined 类型

  • 代码实现
type NonNullable<T> = T extends null | undefined ? never : T;
  • Demo
type NewPerson = Person | null;
let person: NonNullable<NewPerson> = null; // ❎ error (不能将类型“null”调配给类型“Person”)

结束语

联合文章内容, 大家可依据理论需要封装更多的语法糖, 便于在我的项目中应用. 若想更粗疏的学习 TS, 这里举荐一个博主 阿宝哥, 其发表了很多对于 TS 的文章, 并针对 TS 的某一特色做了具体的解说.

参考🔗链接

【TypeScript 文档】

【FESKY】联合实例学习 Typescript

【刘哇勇】TypeScript infer 关键字

正文完
typescript
发表至： typescript
2021-06-03
 0
关于typescript:TypeScript-Basic-Part-I
关于typescript:游戏开发性能优化之对象池
关于typescript:TypeScript-类装饰器的一个例子和使用单步调试搞清楚其运行原理
关于typescript:开发人员面临的10个最常见的JavaScript问题