Typescript入门教程(B站黑马程序员)

视频链接:https://www.bilibili.com/video/BV14Z4y1u7pi?p=1

1. TypeScript 介绍

1.1 TypeScript 是什么

Typescript入门教程(B站黑马程序员)_第1张图片

1.2 TypeScript 为什么要为 JS 添加类型支持?

Typescript入门教程(B站黑马程序员)_第2张图片

1.3 TypeScript 相比 JS 的优势

Typescript入门教程(B站黑马程序员)_第3张图片

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

Typescript入门教程(B站黑马程序员)_第4张图片

2.2 编译并运行 TS 代码

Typescript入门教程(B站黑马程序员)_第5张图片

2.3 简化运行 TS 的步骤

Typescript入门教程(B站黑马程序员)_第6张图片

  • 注意:若ts-node hello.ts执行报错,需要先执行命令tsc --init创建一个 tsconfig.json 文件,该文件是 TypeScript 项目的配置文件
  • tsconfig.json 包含 TypeScript 编译的相关配置,通过更改编译配置项,我们可以让 TypeScript 编译出 ES6、ES5、node 的代码。

3. TypeScript 常用类型

Typescript入门教程(B站黑马程序员)_第7张图片

3.1 类型注解

Typescript入门教程(B站黑马程序员)_第8张图片

3.2 常用基础类型概述

Typescript入门教程(B站黑马程序员)_第9张图片

3.3 原始类型

Typescript入门教程(B站黑马程序员)_第10张图片

3.4 数组类型

Typescript入门教程(B站黑马程序员)_第11张图片

3.5 类型别名

Typescript入门教程(B站黑马程序员)_第12张图片

3.6 函数类型

Typescript入门教程(B站黑马程序员)_第13张图片
Typescript入门教程(B站黑马程序员)_第14张图片

  • 如果函数没有返回值,那么,函数返回值类型为:void。

Typescript入门教程(B站黑马程序员)_第15张图片
Typescript入门教程(B站黑马程序员)_第16张图片

3.7 对象类型

Typescript入门教程(B站黑马程序员)_第17张图片
Typescript入门教程(B站黑马程序员)_第18张图片

3.8 接口

Typescript入门教程(B站黑马程序员)_第19张图片
Typescript入门教程(B站黑马程序员)_第20张图片
Typescript入门教程(B站黑马程序员)_第21张图片

3.9 元组

Typescript入门教程(B站黑马程序员)_第22张图片

3.10 类型推论

Typescript入门教程(B站黑马程序员)_第23张图片

3.11 类型断言

Typescript入门教程(B站黑马程序员)_第24张图片
Typescript入门教程(B站黑马程序员)_第25张图片

3.12 字面量类型

Typescript入门教程(B站黑马程序员)_第26张图片
Typescript入门教程(B站黑马程序员)_第27张图片

3.13 枚举

Typescript入门教程(B站黑马程序员)_第28张图片
Typescript入门教程(B站黑马程序员)_第29张图片
Typescript入门教程(B站黑马程序员)_第30张图片
Typescript入门教程(B站黑马程序员)_第31张图片
Typescript入门教程(B站黑马程序员)_第32张图片

3.14 any 类型

Typescript入门教程(B站黑马程序员)_第33张图片

3.15 typeof

Typescript入门教程(B站黑马程序员)_第34张图片

4. TypeScript 高级类型

Typescript入门教程(B站黑马程序员)_第35张图片

4.1 class 类

Typescript入门教程(B站黑马程序员)_第36张图片
Typescript入门教程(B站黑马程序员)_第37张图片
Typescript入门教程(B站黑马程序员)_第38张图片
Typescript入门教程(B站黑马程序员)_第39张图片

  • 类继承的两种方式:1 extends(继承父类) 2 implements(实现接口)。

Typescript入门教程(B站黑马程序员)_第40张图片
Typescript入门教程(B站黑马程序员)_第41张图片

  • 类成员可见性:可以使用 TS 来控制 class 的方法或属性对于 class 外的代码是否可见。
  • public
    Typescript入门教程(B站黑马程序员)_第42张图片
  • protected
    Typescript入门教程(B站黑马程序员)_第43张图片
  • private
    Typescript入门教程(B站黑马程序员)_第44张图片
  • readonly
    Typescript入门教程(B站黑马程序员)_第45张图片

4.2 类型兼容性

Typescript入门教程(B站黑马程序员)_第46张图片
Typescript入门教程(B站黑马程序员)_第47张图片
Typescript入门教程(B站黑马程序员)_第48张图片
Typescript入门教程(B站黑马程序员)_第49张图片
Typescript入门教程(B站黑马程序员)_第50张图片
Typescript入门教程(B站黑马程序员)_第51张图片
Typescript入门教程(B站黑马程序员)_第52张图片

4.3 交叉类型

Typescript入门教程(B站黑马程序员)_第53张图片Typescript入门教程(B站黑马程序员)_第54张图片

4.4 泛型

Typescript入门教程(B站黑马程序员)_第55张图片
Typescript入门教程(B站黑马程序员)_第56张图片Typescript入门教程(B站黑马程序员)_第57张图片
Typescript入门教程(B站黑马程序员)_第58张图片
Typescript入门教程(B站黑马程序员)_第59张图片
Typescript入门教程(B站黑马程序员)_第60张图片
Typescript入门教程(B站黑马程序员)_第61张图片
Typescript入门教程(B站黑马程序员)_第62张图片
Typescript入门教程(B站黑马程序员)_第63张图片
Typescript入门教程(B站黑马程序员)_第64张图片
Typescript入门教程(B站黑马程序员)_第65张图片
Typescript入门教程(B站黑马程序员)_第66张图片
Typescript入门教程(B站黑马程序员)_第67张图片

  • Partial
    Typescript入门教程(B站黑马程序员)_第68张图片
  • ReadonlyTypescript入门教程(B站黑马程序员)_第69张图片
  • Pick
    Typescript入门教程(B站黑马程序员)_第70张图片
  • Record

Typescript入门教程(B站黑马程序员)_第71张图片

4.5 索引签名类型

Typescript入门教程(B站黑马程序员)_第72张图片

4.6 映射类型

Typescript入门教程(B站黑马程序员)_第73张图片
Typescript入门教程(B站黑马程序员)_第74张图片
Typescript入门教程(B站黑马程序员)_第75张图片
Typescript入门教程(B站黑马程序员)_第76张图片
Typescript入门教程(B站黑马程序员)_第77张图片

5. TypeScript 类型声明文件

Typescript入门教程(B站黑马程序员)_第78张图片

5.1 TS 中的两种文件类型

Typescript入门教程(B站黑马程序员)_第79张图片

5.2 类型声明文件的使用说明

Typescript入门教程(B站黑马程序员)_第80张图片
Typescript入门教程(B站黑马程序员)_第81张图片
Typescript入门教程(B站黑马程序员)_第82张图片
Typescript入门教程(B站黑马程序员)_第83张图片
Typescript入门教程(B站黑马程序员)_第84张图片
Typescript入门教程(B站黑马程序员)_第85张图片
Typescript入门教程(B站黑马程序员)_第86张图片

6. 在 React 中使用 TypeScript

Typescript入门教程(B站黑马程序员)_第87张图片

6.1 使用 CRA 创建支持 TS 的项目

Typescript入门教程(B站黑马程序员)_第88张图片
Typescript入门教程(B站黑马程序员)_第89张图片
Typescript入门教程(B站黑马程序员)_第90张图片

6.2 TS 配置文件 tsconfig.json

Typescript入门教程(B站黑马程序员)_第91张图片
Typescript入门教程(B站黑马程序员)_第92张图片

6.3 React 中的常用类型

Typescript入门教程(B站黑马程序员)_第93张图片
Typescript入门教程(B站黑马程序员)_第94张图片
Typescript入门教程(B站黑马程序员)_第95张图片
在这里插入图片描述
Typescript入门教程(B站黑马程序员)_第96张图片
Typescript入门教程(B站黑马程序员)_第97张图片
Typescript入门教程(B站黑马程序员)_第98张图片
Typescript入门教程(B站黑马程序员)_第99张图片
Typescript入门教程(B站黑马程序员)_第100张图片

你可能感兴趣的:(typescript,javascript,前端)