深入浅出 Typescript

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

文章目录

  • 1 TypeScript VS JavaScript
  • 2 TypeScript基础
    • 2.1 TS基础-基础类型
    • 2.2 TS基础-函数类型
    • 2.3 TS基础-interface
    • 2.4 TS基础-类
  • 3 TypeScript 进阶
    • 3.1 TS进阶-高级类型
    • 3.2 TS进阶-泛型-什么时候需要泛型?
    • 3.3 TS进阶-泛型-什么时候需要泛型?
    • 3.4 TS进阶-泛型-基本使用
    • 3.5 TS进阶-泛型工具类型-基础操作符
    • 3.6 TS进阶-泛型工具类型-常用工具类型
  • 4 TypeScript 实战
    • 4.1 TS实战-声明文件
    • 4.2 TS实战-泛型约束后端接口类型

1 TypeScript VS JavaScript

在这里插入图片描述

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

2 TypeScript基础

2.1 TS基础-基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型 []
  6. 元组类型 tuple
// 举个例子
function test(x:string | number):boolean {if (typeof x === 'string') {return true;} else if (typeof x === 'number') {return false;}return throwError('参数格式不对');
}function throwError(message:string):never {throw new Error(message);
}

2.2 TS基础-函数类型

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

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

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

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

function add(x:number[]):number
function add(x:string[]):string
function add(x:any[]):any {if (typeof x[0] === 'string') {return x.join()}if (typeof x[0] === 'number') {return x.reduce((acc,cur) => acc + cur)}
}

2.3 TS基础-interface

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

特点:

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

总结:接口非常灵活duck typing

interface RandomKey {[propName:string]:string
}const obj:RandomKey = {a:'hello',b:'world',c:'typescript',
}

2.4 TS基础-类

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

特点:

  • 增加了 public、private、protected 修饰符
  • 抽象类:
    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface:约束类,使用implements关键字

3 TypeScript 进阶

3.1 TS进阶-高级类型

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

3.2 TS进阶-泛型-什么时候需要泛型?

官方定义:

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。

组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,

一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

有点晦涩,还是举个栗子。

3.3 TS进阶-泛型-什么时候需要泛型?

在这里插入图片描述

3.4 TS进阶-泛型-基本使用

基本定义:

  1. 泛型的语法是◇里面写类型参数,一般用T表示;
  2. 使用时有两种方法指定类型:
    1. 定义要使用的类型
    2. 通过TS类型推断,自动推导类型
  3. 泛型的作用是临时占位,之后通过传来的类型进行推导;
function print<T>(arg:T):T {console.lLog(arg)return arg
}
print<string>('hello')  // 定义T为string
print('hello')  // TS类型推断,自动推导类型为string

3.5 TS进阶-泛型工具类型-基础操作符

在这里插入图片描述

3.6 TS进阶-泛型工具类型-常用工具类型

  • Partials:将类型属性变为可选
  • Required:将类型属性变为必选
  • Readonly.:将类型属性变为只读
  • Pick、Record…
type Partials<T> ={[P in keyof T]?:T[P];
};type Required<T> = {[P in keyof T]-?:T[P]
};type Readonly<T> = {readonly [P in keyof T]:T[P];
};

4 TypeScript 实战

4.1 TS实战-声明文件

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

4.2 TS实战-泛型约束后端接口类型

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/62604.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echart图案例

效果 代码&#xff1a; index.vue <template><div class"pageBox"><div class"oneLineBox"><div class"fourColorImgBox"><div class"titleBox">企业风险四色图</div><div class"conte…

Scrum敏捷模型的三个角色!如何在线绘制Scrum敏捷模型图?

1. 什么是Scrum敏捷模型&#xff1f; Scrum是一种敏捷开发方法&#xff0c;用于管理和组织软件开发项目。它强调团队的自组织和迭代式开发&#xff0c;通过不断的反馈和调整来快速交付高质量的软件产品。 Scrum敏捷模型将项目分解为一系列短期的迭代周期&#xff0c;每一个…

ffmpeg命令行是如何打开vf_scale滤镜的

前言 在ffmpeg命令行中&#xff0c;ffmpeg -i test -pix_fmt rgb24 test.rgb&#xff0c;会自动打开ff_vf_scale滤镜&#xff0c;本章主要追踪这个流程。 通过gdb可以发现其基本调用栈如下&#xff1a; 可以看到&#xff0c;query_formats&#xff08;&#xff09;中创建的v…

【遍历】非递归法 二叉树的前中后序遍历

文章目录 非递归法前序遍历后序遍历中序遍历 递归法DFS 非递归法 通过栈Stack来模拟递归。 前序遍历 LeetCode 144 前序遍历&#xff1a;1 2 3 定义&#xff1a;存放答案的List、栈Stack 将root入栈出栈&#xff1a;node&#xff0c;为null则舍弃将node放入list将node.r…

安全测试中常见的业务安全问题

“在测试过程中&#xff0c;特殊的操作往往容易触发异常场景&#xff0c;而这些异常场景也很容易引起安全问题&#xff01;” 常见的安全漏洞就不多说了&#xff0c;这里主要介绍常见的业务安全问题及修复建议。 01 刷短信 问题描述&#xff1a; 当发送短信的请求接口只需要…

股票自动交易接口开发原理及源码分享

股票自动交易接口的开发原理涉及多个方面&#xff0c;主要包括以下几个步骤&#xff1a; 1. 数据接口获取&#xff1a;通过连接到证券交易所或第三方数据提供商的API&#xff0c;获取实时市场数据&#xff0c;包括股票报价、交易成交量、买卖盘口等信息。 2. 策略定义&#x…

田间农业数字管理系统-高标准农田建设

政策背景 2019年11月&#xff0c;国务院办公厅印发的《国务院办公厅关于切实加强高标准农田建设提升粮食安全保障能力的意见》明确提出&#xff0c;到2022年&#xff0c;全国要建成10亿亩高标准农田。 2021年9月16日&#xff0c;由农业农村部印发的《全国高标准农田建设规划&a…

Ajax 笔记(二)—— Ajax 案例

笔记目录 2. Ajax 综合案例2.1 案例一-图书管理2.1.1 渲染列表2.1.2 新增图书2.1.3 删除图书2.1.4 编辑图书 2.2 案例二-背景图的上传和更换2.2.1 上传2.2.2 更换 2.3 案例三-个人信息设置2.3.1 信息渲染2.3.2 头像修改2.2.3 信息修改2.3.4 提示框 Ajax 笔记&#xff1a; Ajax…

创新零售,京东重新答题?

继新一轮组织架构调整后&#xff0c;京东从低价到下沉动作不断。 新成立的创新零售部在京东老将闫小兵的带领下悄然完成了整合。近日&#xff0c;京喜拼拼已改名为京东拼拼&#xff0c;与七鲜、前置仓等业务共同承载起京东线上线下加速融合的梦想。 同时&#xff0c;拼拼的更…

JVM系统优化实践(24):ZGC(一)

您好&#xff0c;这里是「码农镖局」CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; 截止到目前&#xff0c;算上ZGC&#xff0c;Java一共有九种类型的GC&#xff0c;它们分别是&#xff1a; 1、Serial GC 串行/作用于新生代/复制算法/响应速度优先/适用于单…

安科瑞物联网表在虚拟电厂的应用

安科瑞 崔丽洁 应用场景 一般应用于控制中心 功能 能计量当前组合有功电能&#xff0c;正向有功电能&#xff0c;反向有功电能&#xff0c;正向无功电能&#xff0c;反向无功电能&#xff1b; ADW300支持RS485通讯、LORA通讯、NB、4G及Wifi通讯&#xff1b; 三套时段表,一年可以…

【Gitee的使用】Gitee的简单使用,查看/创建SSH公匙、创建版本库、拉取代码、提交代码

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 本篇文章简单介绍&#xff0c;如何在Gitee上面创建版本库、拉取…