当前位置: 首页 > news >正文

深入浅出 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.lryc.cn/news/110646.html

相关文章:

  • Vue3和TypeScript项目-移动端兼容
  • 基于STM32CubeMX和keil采用通用定时器中断实现固定PWM可调PWM波输出分别实现LED闪烁与呼吸灯
  • mysql大表的深度分页慢sql案例(跳页分页)
  • 集中/本地转发、AC、AP
  • Spring集成Seata
  • 三种方式创建对象的几种方式及new实例化时做了什么?
  • vue2-vue实例挂载的过程
  • C++ 右值引用案例
  • 2.文件的逻辑结构
  • 20天学rust(一)和rust say hi
  • 牢记这16个SpringBoot 扩展接口,写出更加漂亮的代码
  • c++两种设计模式 单例和工厂模式
  • 2023-08-05——JVM 栈
  • Camera之PhysicalCameraSettingsList/SurfaceMap/CameraMetadata/RequestList的关系(三十二)
  • 【ONE·Linux || 基础IO(二)】
  • 【LeetCode 算法】Power of Heroes 英雄的力量
  • 合宙Air724UG LuatOS-Air script lib API--ntp
  • LangChain+ChatGLM大模型应用落地实践(一)
  • PSO粒子群优化算法
  • 记一次 .NET某医疗器械清洗系统 卡死分析
  • C# 基于Rijndael对文件进行加解密
  • Elasticsearchr入门
  • 【ARM】imx6ul移植kernel记录,恩智浦github提供的最新kernel(2023年7月31)
  • eeglab(自用)
  • Dockerfile构建Tomcat镜像(源码)
  • Frida Error: getPackageInfoNoCheck(): has more than one overload的解决方法
  • flutter开发实战-RawKeyboardListener监听键盘事件及keycode。
  • Temu、希音们全托管引争议,跨境电商应变“工贸一体化”
  • 某科技公司提前批测试岗
  • 一次redis缓存不均衡优化经验