深入浅出TypeScript ｜ 青训营笔记

凤2018
65 阅读3分钟

前言

本课程从TS基础入手，由基础类型一步步延伸到高级类型，通过示例来深入浅出的了解TypeScript的各种优势。主要内容包括整体介绍:Ts 背景、优缺点、社区活跃度等；TS常用类型基本概念，即基础类型、对象类型、接口、断言等；进阶用法，类、泛型及使用场景等等。内容精彩，快来跟我一起看看吧！

TypeScript 与 JavaScript的比较

TypeScript

  • JavaScript的超集，用于解决大型项目的代码复杂性
  • 强类型，支持静态和动态类型
  • 可以在编译期间发现并纠正错误
  • 不允许改变变量的数据类型

JavaScript

  • 一种脚本语言，用于创建动态网页
  • 动态弱类型语言
  • 只能在运行时发现错误
  • 变量可以被赋值成不同类型

TypeScript基础

TS基础类型

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

image.png

函数类型

image.png

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

  • 输入参数:参数支持可选参数和默认参数

  • 输出参数:输出可以自动推断，没有返回值时，默认为void类型

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

interface

定义:接口是为了定义对象类型

特点:

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

总结:接口非常灵活duck typing

image.png

image.png

类

image.png

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

特点:

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

  • 抽象类:

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

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

TS进阶

高级类型

  1. 联合类型 |
  2. 交叉类型 &
  3. 类型断言
  4. 类型别名(type VS interface)
  • 定义:给类型起个别名
    • 相同点
      1. 都可以定义对象或函数
      2. 都允许继承
    • 差异点:
      1. interface是TS用来定义对象，type是用来定义别名方便使用;
      2. type可以定义基本类型，interface不行;
      3. interface可以合并重复声明，type不行;

泛型

  • 官方定义

    软件工程中，我们不仅要创建一致的定义良好的API,同时也要势虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

    在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

  • 应用场景

    定义一个print函数，这个函数的功能是把传入的参数打印出来，

    再返回这个参数，传入参数的类型是string,函数返回类型为string。

  • 基本定义

image.png

  1. 泛型的语法是<里面写类型参数，一般用T表示;
  2. 使用时有两种方法指定类型:
    1. 定义要使用的类型
    2. 通过TS类型推断，自动推导类型
  3. 泛型的作用是临时占位，之后通过传来的类型进行推导;

TS实战-声明文件

  • declare:三方库需要类型声明文件

  • .d.ts: 声明文件定义

  • @types: 三方库TS类型包

  • tsconfig.json:定义TS的配置

其他

通过这一部分的学习，大致了解了TypeScript的一些基础东西，为后续的学习奠定了基础。本次课程还介绍了TS的基础，包括基础类型、函数类型等，以及泛型的相关知识，感兴趣的同学可以自行去学习字节内部课程。

（ ps：本次学习主打的就是快乐！！！）

avatar
文章
阅读
粉丝