深入浅出 TypeScript | 青训营

惊弓232
107 阅读2分钟

这是我参与「第六届青训营」笔记创作活动的第5天。活动详情：# 第六届青训营笔记伴读 ｜ 升级学习体验，高效掌握知识

本课程从TS基础入手，由基础类型一步步延伸到高级类型，通过示例来深入浅出的了解TypeScript的各种知识。

课程重点：

  • 整体介绍:TS背景、优缺点、社区活跃度等

  • TS常用类型基本概念：基础类型、对象类型、接口、断言等

  • 进阶用法： 类、泛型及使用场景

  • 工程向

    • 代码检测、编译配置、tsconfig介绍
    • 工程中最佳实践、迁移工具

  • 小练习

TypeScript VS JavaScript

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

2。TS数据类型：

  • boolean、number、string
  • 枚举enum
  • anyy、unknown、void
  • never
  • 数据类型[]
  • 元组类型tuple

3.interface——接口，定义对象类型

可以描述函数类型，可以描述自定义属性

interface约束类，使用imolements关键字

TypeScript进阶

  1. 联合交叉类型

联合类型：A|B 表示一个值可以是几种类型之一

交叉类型：A&B 多种类型叠加到一起成为一种，包含了所需类型的所有特性。

类型断言：@ 告诉编译器某个实例的具体类型

类型别名：type 用于对各个类型进行别名定义

type VS interface ：

  • 都可以定义对象或函数
  • 都允许继承
  1. 函数返回值类型——通过泛型进行表达< T >。

  • 泛型的作用是临时占位，之后通过传来的类型进行推导。

  • 使用时有两种方法指定类型：

    • 定义要使用的类型
    • 通过TS类型推断自动推导类型
  1. TypeScript 工程应用

浏览器Web webpack构建器

  • 配置webapack loader相关配置
  • 配置tsconfig.js文件
  • 运行webpack启动/打包
  • loader处理ts文件进行编译与检查

NodeJs 使用TSC进行编译

  • 安装Node与npm
  • 配置tsconfig.js文件
  • 使用npm安装tsc
  • 使用tsc运行编译得到js文件
avatar
文章
阅读
粉丝