TypeScript深入浅出|青训营笔记

64 阅读5分钟

因为之前没有学习过TS,所以老师在讲的时候有点懵,看过课之后,对老师没有细讲的一些部分扩展了一点

为什么要学习typescript?

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

typescript不仅仅是一门语言,更是生产力工具

typescript推荐: Awesome Typescript:TS开源教程及应用

ByteTech:TS&React:TS&React开发模式介绍

Typescript Playground:TS到JS在线编译

TS基础-基础类型

1.booleannumberstring
2.枚举enum

枚举类型用于定义数值集合

3.anyunknownvoid

any:任意类型,声明为any的变量可以赋值任意类型的值。有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量

某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

4.never

never 是其它类型(包括 nullundefined)的子类型,代表从不会出现的值。

5.数组类型
6.元组类型tuple

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never

TS基础-函数类型

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

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

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

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

TS基础-interface

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

特点:

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

总结:接口非常灵活duck typing

TS基础-类

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

特点:

  • 增加了publicprivateprotected修饰符

  • 抽象类

    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface约束类,使用implements关键字

TS进阶-高级类型

1.联合类型|

联合类型与交叉类型很有关联,但是使用上却完全不同。 偶尔你会遇到这种情况,一个代码库希望传入 numberstring类型的参数。

2.交叉类型&

交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。 例如, Person & Serializable & Loggable同时是 Person Serializable Loggable。 就是说这个类型的对象同时拥有了这三种类型的成员。

3.类型断言

有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。

类型断言有两种形式。其一是尖括号语法

let someValue: any = "this is a string";
​
let strLength: number = (<string>someValue).length;

另一个是as语法

let someValue: any = "this is a string";
​
let strLength: number = (someValue as string).length;
4.类型别名

定义:给类型起一个别名

相同点:

  1. 都可以定义对象或函数
  2. 都允许继承

差异点:

  1. interface是TS用来定义对象,type是用来定义别名方便使用
  2. type可以定义基类,interface不行
  3. interface可以用合并重复声明,type不行

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

官方定义: 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能

在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据,这样用户就可以以自己的数据类型来使用组件

应用场景: 定义一个print函数,这个函数的功能是把传入的参数打印出来,再返回这个参数,传入参数的类型是string,函数返回的类型是string

但是如果是想要支持打印number类型呢?打印数组类型呢?打印任意类型呢?

TS进阶-泛型-基本使用

基本定义:

  1. 泛型的语法是<>里面写类型参数,一般用T表示;

  2. 使用时有两种方法指定类型:

    1. 定义要使用的类型
    2. 通过TS类型推断,自动推导类型
  3. 泛型的作用是临时占位,之后通过传来的类型进行推导

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

typeof:获取类型

keyof:获取所有键

in:遍历枚举类型

T[K]:索引访问

extends:泛型约束

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

  • Partial<>:将类型属性变为可选
  • Required<>:将类型属性变为必选
  • Readonly<>:将类型属性变为可读
  • Pick、Record…

TS实战-声明文件

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