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

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

1. TypeScript 介绍

1.1 TypeScript 是什么

在这里插入图片描述

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

在这里插入图片描述

1.3 TypeScript 相比 JS 的优势

在这里插入图片描述

2. TypeScript 初体验

2.1 安装编译 TS 的工具包

在这里插入图片描述

2.2 编译并运行 TS 代码

在这里插入图片描述

2.3 简化运行 TS 的步骤

在这里插入图片描述

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

3. TypeScript 常用类型

在这里插入图片描述

3.1 类型注解

在这里插入图片描述

3.2 常用基础类型概述

在这里插入图片描述

3.3 原始类型

在这里插入图片描述

3.4 数组类型

在这里插入图片描述

3.5 类型别名

在这里插入图片描述

3.6 函数类型

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

3.7 对象类型

在这里插入图片描述
在这里插入图片描述

3.8 接口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.9 元组

在这里插入图片描述

3.10 类型推论

在这里插入图片描述

3.11 类型断言

在这里插入图片描述
在这里插入图片描述

3.12 字面量类型

在这里插入图片描述
在这里插入图片描述

3.13 枚举

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.14 any 类型

在这里插入图片描述

3.15 typeof

在这里插入图片描述

4. TypeScript 高级类型

在这里插入图片描述

4.1 class 类

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

  • 类成员可见性:可以使用 TS 来控制 class 的方法或属性对于 class 外的代码是否可见。
  • public
    在这里插入图片描述
  • protected
    在这里插入图片描述
  • private
    在这里插入图片描述
  • readonly
    在这里插入图片描述

4.2 类型兼容性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.3 交叉类型

在这里插入图片描述在这里插入图片描述

4.4 泛型

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • Partial<Type>
    在这里插入图片描述
  • Readonly<Type>在这里插入图片描述
  • Pick<Type, Keys>
    在这里插入图片描述
  • Record<Keys, Type>

在这里插入图片描述

4.5 索引签名类型

在这里插入图片描述

4.6 映射类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. TypeScript 类型声明文件

在这里插入图片描述

5.1 TS 中的两种文件类型

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 在 React 中使用 TypeScript

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.2 TS 配置文件 tsconfig.json

在这里插入图片描述
在这里插入图片描述

6.3 React 中的常用类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 11
    点赞
  • 91
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
什么是TypeScriptTypeScriptJavaScript的加强版,它给JavaScript添加了可选的静态类型和基于类的面向对象编程,它拓展了JavaScript的语法。不过,你不必担心TypeScript跟浏览器不兼容,因为在编译时,它产生的都是JavaScript代码。为什么要学TypeScritpt?TypeScript是一门很有前景和钱景的语言;它能大幅的提高工作效率,并且减少错误;这堂课我们能学到什么?随着前端行业越来越受到重视,前端的逻辑也越来越复杂,对前端从业者的职业要求也越来越高,Vue、Angular、React和一些新的框架层出不穷,而作为Angular等框架的推荐语言TypeScript也在市场中得到了认可和追捧,不管是前端、还是游戏引擎、以及一些大型项目开发都中开始展露头角。但是这方面学习资源相对较少。课程特点:本堂课程通过深入浅出的讲解,幽默风趣的风格; 让大家在3个小时的课程中能够掌握大部分TypeScript的核心知识; 同时能够使用TypeScript进行React等框架的项目开发; 为大家的学习和在工作中使用TypeScript打下坚实的基础。课程大纲:1.TS的初步配置2.TS 数据类型 any 枚举3.函数的参数和返回值类型4.类非常重要 非常重要5.静态类属性和方法 Math6.泛型7.模块化 systemjs8.项目TS+react+webpack结合的工作流应类型管理 js->tsx 2.0如何用TS开发react->TSX(难点->官网 项目)工作流 package.json -> npm start npm run build 适用人群:1.Typescript零基础想掌握ts正确学习姿势和入门的初学者2.经验丰富的jser想拓宽自己知识掌握ES6和ES7新功能的从业者3.想在工作和项目中使用ts结合VAR框架的人员4.有志于成为全栈开发人员却苦于无法入门后端和跟后端沟通不畅的开发者5.想深入了解和使用angular的人员
如果你想学习 TypeScript,我推荐你查看引用中提到的一篇入门教程。这篇教程将带你一步步学习 TypeScript 的十四个入门知识点,并且提供了详细的内容大纲。教程会教你如何在系统中全局安装 TypeScript,可以使用 npm 或者 yarn 进行安装。TypeScriptJavaScript 的超集,它在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程特性。微软在 2012 年正式发布了 TypeScript,并且持续更新和维护了 8 年。因此学习 TypeScript 是非常有价值的,尤其对于前端开发人员来说,它已经成为一门必备的技能。所以如果你想学习 TypeScript,这个入门教程会是一个不错的起点。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [最全TypeScript 入门基础教程,看完就会](https://blog.csdn.net/qq_43623970/article/details/107067306)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [TypeScript入门教程](https://blog.csdn.net/SoSalty/article/details/129372440)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值