黑马TypeScript笔记

一、安装

node版本>=14.17

npm i -g typescript

tsc -v

二、初体验

创建ts文件 demo.ts

console.log("hello")

cmd中转为js

tsc ./demo.ts

查看

node demo.js

三、简化ts运行步骤

npm i -g ts-node

重新执行的话就是(不会生成js文件)

ts-node demo.ts

如果报运行报错的话就是版本太新了

# 卸载
npm uni -g ts-node
# 安装
npm i -g ts-node@8.5.4

四、 常用类型

4.1 简单介绍

1、标记错误

ts 可以在代码提示你类型错误啥的

2、类型注解

3、常用类型

4.2 常用类型使用

1、原始类型（类型都是小写的）

2、对象类型

上面的联合类型可以有下面的写法

let arr1: number | string[] = 123
// 或者
let arr2: number | string[] = ["xxxx","xxx"]

3、类型别名

4、函数别名

上图中的横线不要疑惑：意思就是先指定类型和返回值，后面再写方法实现

5、对象类型

6、接口

7、继承

8、元组

9、类型推论

小技巧鼠标放上去就知道返回的类型

10、类型断言

上图中的<>这个在react中不支持，原因语法冲突

11、字面量类型

12、枚举

上图中第二个中的函数是自调用函数

13、any类型

上图中不提供类型和变量解释如下俩图

14、typeof简化类型写法

上两个图中是简化类型的写法，不能查询函数返回值类型，只知道变量或者对象的类型（猜测可以用变量接一下 然后就可以判断了）

五、高级类型

5.1 class

1、class书写格式

2、构函数

3、实例方法

4、类的继承

5、实现接口

6、公共的私有的

内部辅助方法只能在当前类中使用

7、只读

5.2 类型兼容性

1、类型兼容性

2、对象之间兼容性的问题

3、接口之间的兼容性

4、函数兼容性

5、交叉类型

5.3 泛型

1、简单介绍

2、使用

3、泛型约束

4、添加约束

5、多个泛型变量约束

6、泛型接口

7、数组是泛型接口

8、class配合使用

9、泛型的工具类型

5.4 索引签名类型

5.5 映射类型

1、简单介绍使用

2、映射类型keyof

3、映射类型泛型工具类

4、索引查询类型

5、查询多个索引类型

六、类的声明文件

6.1 概述

6.2 简单使用

6.3 两种文件类型

6.4 类型文件的使用说明

1、说明

2、使用

3、使用第三方库类声明文件

自带

提供的

上面图片是有三方库，告诉你如何使用，install中
也可以在编辑器中…放在上面就会告诉你安装命令

4、 自己的类声明文件

5、为已有js文件创建类声明文件

说明

使用

七、前端项目使用ts

7.1 概述

7.2 创建支持ts的react项目

7.3 配置和目录

1、目录介绍

2、ts配置文件

3、配置命令

7.4 常用类型

1、简介

2、函数组件

函数组件默认的参数值

事件绑定和对象

3、class函数组件

class中的属性和属性默认值


状态和事件