Typescript基础入门笔记

最新推荐文章于 2024-06-02 22:39:24 发布

写代码的李白

最新推荐文章于 2024-06-02 22:39:24 发布

阅读量288

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/m0_66316685/article/details/124907790

版权

TypeScript的基本使用

安装

npm i typescript -g

编译

tsc TS_fillename

解决TS和JS冲突问题

tsc --init

自动编译

tsc --watch

常见问题

配置文件中设置严格模式三个检查标记

"script" : false;//是否启动严格模式,是下面两种的综合
"noImplicitAny":true;//不启动则允许any类型数据的定义和使用
"scrictNullChecks":true//限制null或undefind的赋值

TS代码存在错误时不进行自动编译

tsc --noEmitOnError --watch

定义显示类型

person：string //类型后面加：（冒号

自动推断类型

在这里插入图片描述
类型由第一次赋值时的数据类型决定

降级编译（兼容低版本浏览器）

配置tsconfig.js中的target

//"target":"es2016"
"target":"es5"

配置文件自定义编译入口/出口路径

"rootDir":"./src"//配置文件自定义编译入口路径,
"outDir":"./dist"//配置文件自定义编译出口路径

数组定义的方法

arr : number[ ] = [1,2,3]//数组里的元素只能是数值类型
arr : Array<string> = ['w','a','n']//数组里的元素只能是数值类型

any类型

当你不希望某个特定值导致类型检查错误（紧用所有的类型检查）

限制函数形参和返回值类型

在这里插入图片描述

对象类型数据的数据类型定义和限制

在这里插入图片描述

联合类型

能够增加数据类型的选择
在这里插入图片描述

定义-类型别名

在这里插入图片描述

接口

在这里插入图片描述
几乎所有的interface定义的类型，都可以通过Type类型别名来定义

接口与类型别名的区别：

接口和类型别名的拓展

在这里插入图片描述

2.向现有的类型中添加字段
在这里插入图片描述

类型断言

当我们不知道一个数据的类型是时，可以将数据断言成一个差不多的类型在这里插入图片描述

文字类型的工作方式

在这里插入图片描述

数字文字类型的工作方式

在这里插入图片描述

布尔值类型的工作方式

在这里插入图片描述

方法类型的工作方式

在这里插入图片描述

枚举

在这里插入图片描述

不常用的原语

在这里插入图片描述

类型防护和

类型防护：特殊的检查
类型缩小：将类型细化为比声明更具体的类型的过程

在这里插入图片描述

真值缩小

在这里插入图片描述

等值缩小

在这里插入图片描述

in操作符缩小

在这里插入图片描述

instanceof操作符缩小

在这里插入图片描述

分配缩小

在这里插入图片描述

控制流分析

在这里插入图片描述

类型谓词

在这里插入图片描述

受歧视的联合类型

在这里插入图片描述

never类型与穷尽性检查

在这里插入图片描述
never类型可以分配给每个类型，但没有任何类型可以分配给never（除了never本身以外）

TS函数

函数类型表达式
调用签名

构造签名

在这里插入图片描述

范型函数

范型：两个值之间存在的对应关系
在这里插入图片描述

多个范型的定义：

范型参数的限制条件

在这里插入图片描述

使用受限值
指定类型参数

编写优秀通用函数的准则

在这里插入图片描述
1.第一种准则的体现：选择firstElement1方法
2.第二种准则的体现：选择filter1方法

3.第三个准则的体现：选择greet2方法

函数的可选参数

普通函数

1.传参数默认值
在这里插入图片描述

回调函数的可选参数

在这里插入图片描述

函数重载

将重复定义的函数和参数的形式称为函数签名
在这里插入图片描述

- 参数不正确问题：

在这里插入图片描述

- 参数类型不正确问题：

在这里插入图片描述

- 返回类型不正确问题

在这里插入图片描述

- 如何编写好的重载

在这里插入图片描述

函数内的this声明

在这里插入图片描述
箭头函数内不能定义this做参数

需要了解的其他类型

void

在这里插入图片描述

object

在这里插入图片描述

unknow

在这里插入图片描述

never

在这里插入图片描述

Function

在这里插入图片描述

参数展开运算符

形参展开

在这里插入图片描述

实参展开

在这里插入图片描述

参数解构

在这里插入图片描述

函数返回void类型注意事项

在这里插入图片描述

对象

匿名对象

在这里插入图片描述

接口命名

在这里插入图片描述

类型别名

在这里插入图片描述

属性修改器

可选属性
只读属性
索引签名
拓展类型
extents：
交叉类型
接口继承与交叉类型直接的选择
接口同名不同属性会进行并运算，而类型别名不可以（实现类型合并选interface，避免冲突选Type

在这里插入图片描述

泛型对象类型
不可取：

可取：
在这里插入图片描述

类型操纵

从类型中创建类型

在这里插入图片描述

泛型

在这里插入图片描述

泛型类型

在这里插入图片描述

泛型类

在这里插入图片描述

泛型约束

在这里插入图片描述

泛型约束中使用类型参数

在这里插入图片描述

泛型中国使用类类型

在这里插入图片描述

keyof类型操作符

在这里插入图片描述

typeof类型操作符

在这里插入图片描述

索引访问类型

在这里插入图片描述

条件类型

在这里插入图片描述

条件类型约束

在这里插入图片描述

在条件类型内推理

在这里插入图片描述

分布式条件类型

在这里插入图片描述

类

类的成员

在这里插入图片描述

类属性

在这里插入图片描述

readonly操作符

在这里插入图片描述

构造器 constructor（）

在这里插入图片描述

类中的方法

在这里插入图片描述

Getters/Setters

在这里插入图片描述

索引签名

在这里插入图片描述

类的继承

implements（类继承接口）

在这里插入图片描述

extends（类继承其他类）

在这里插入图片描述

类的重写

要子类中重写的类方法需要兼容父类原方法中的数据类型兼容
在这里插入图片描述

父类与子类的初始化顺序

在这里插入图片描述

继承内置类型

在这里插入图片描述

成员可见性

在这里插入图片描述

public

在这里插入图片描述

protected

在这里插入图片描述

private

在这里插入图片描述

跨实例访问私有属性？
java、C#、C++等不允许，
但Typescript是允许的

静态成员

在这里插入图片描述

类里的static 区块

在这里插入图片描述

泛型类

在这里插入图片描述

类运行时的this

为了保证我们类里面的某个函数的this指向没有问题，我们可以采用

箭头函数（箭头函数会浪费更多的内存，因为每个类实例都将有它自己的副本，每个函数都是这样定义的；使用箭头函数不能在派生类中使用super.getName（），也就是不能在子类中通过super来调用父类这个方法了，因为在原型链中没有入口可以获得基类的方法）
this 参数（使用的时候一定要权衡，this这个值保证在运行的时候是正确的即使我们没有经过TS检查代码，也是如此；JavaScript调用者任然可能在不知不觉的在错误中使用；每一个类在定义只有一个函数被分配，而不是每个实例会创建一个函数；基类中的方法依然可以通过super来调用，更优于箭头函数）