深入浅出TypeScript | 青训营笔记

Kincy
81 阅读3分钟

为什么要学习TS？

TS vs JS

TypeScriptJavaScript
JavaScript 的超集，用于解决大型项目的代码复杂度一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋值成不同类型

TS 带来了什么

  • 类型安全
  • 下一代 JS 特性
  • 完善的工具链

不仅仅是一门语言，更是生产力工具。

TS 推荐

  • Awesome Typescript：TS 开源教程及应用
  • ByteTech：TS&React：React + TypeScript 开发模式介绍
  • Typescript Playground：TS 到 JS 在线编译

TS基础

基础类型

  1. boolean、number、string
  2. 枚举 enum
  3. any、unknown、void
  4. never
  5. 数组类型 []
  6. 元组类型 tuple

函数类型

  • 定义：TS 定义函数类型时要定义输入参数类型和输出参数类型

    • 输入参数：参数支持可选参数和默认参数
    • 输出参数：输出可以自动推断，没有返回值时，默认为 void 类型

  • 函数重载：名称相同但参数不同，可以通过重载支持多种类型

 function sum(x: number[]): number;

interface

  • 定义：接口是为了定义对象类型

  • 特点：

    • 可选属性：?
    • 只读属性：readonly
    • 可以描述函数类型
    • 可以描述自定义属性

  • 总结：接口非常灵活 duck typing

 interface Person {
   name: string;
   age: number;
 }

类

  • 定义：写法和 JS 差不多，增加了一些定义

  • 特点：

    • 增加了 public、private、protected 修饰符

      public：公有的（所有的都可以用）

      private：私有的（只有自身可以用）

      protected：受保护的（只有自身和子类可以用）

    • 抽象类：

      • 只能被继承，不能被实例化
      • 作为基类，抽象方法必须被子类实现

    • interface 约束类，使用 implements 关键字

 class Person {
   protected name: string;
   private sex: string;
   public constructor(name: string) {
     this.name = name;
     this.sex = 'male';
   }
 }

TS进阶

高级类型

  1. 基础操作符

  2. typeof：获取实例类型

     interface Person {
   name: string;
   age: number;
 }
 const person: Person = { name: 'jk', age: 20 };
 type Person1 = typeof person;
 // 等价于
 type Person1 = Person;

  3. keyof：获取所有键

     interface Person {
   name: string;
   age: number;
 }
 type K1 = keyof Person; // "name" | "age"
 type K2 = keyof Person[]; // "length" | "toString" | "pop" | "push" | "concat" | "join"

  4. in：遍历枚举类型

     type Keys = "a" | "b" | "c";
 type Obj = {
   [k in Keys]: any;
 } // -> { a: any, b: any, c: any }

  5. T[K]：索引访问

     interface Person {
   name: string;
   age: number;
 }
 let type1: Person['name']; // string
 let type2: Person['age']; // number

  6. extends：泛型约束

     interface Person {
   name: string;
 }
 function Person1<T extends Person>(arg: T): T {
   return arg;
 }
 Person1({ name: 'jk' });
 Person1({ age: 20 }); // 报错

常用工具类型

  • Partial<T>：将类型属性变为可选

    // 原理
type Partial<T> = {
  [t in keyof T]?: T[t];
};

  • Required<T>：将类型属性变为必选

    // 原理
type Required<T> = {
  [t in keyof T]-?: T[t];
};

  • Readonly<T>：将类型属性变为只读

    // 原理
type Readonly<T> = {
  readonly [t in keyof T]: T[t];
};

  • Pick、Record...

实战&工程向

声明文件

  • declare：三方库需要类型声明文件
  • .d.ts：声明文件定义
  • @types：三方库 TS 类型包
  • tsconfig.json：定义 TS 的配置

泛型约束后端接口类型

import axios from 'axios'

interface API {
  '/book/detail': {
    id: number
  },
  '/book/comment': {
    id: number,
    comment: string
  }
}

function request<T extends keyof API>(url: T, obj: API[T]) {
  return axios.post(url, obj)
}

request('/book/comment', {
  id: 1,
  comment: '非常棒！'
})

总结

  1. TS 目前已经被越来越多的人使用，是一门非常值得学习的语言
  2. TS 相比 JS 最大的不同就是支持定义类型，这会使得在项目中减少来自类型方面的问题
avatar
文章
阅读
粉丝