TypeScript学习进程（一）

学前端有一段时间了，对于Ts一直有尝试的想法，now，try

image.png

首先放张图，这将是ts的学习路径，现在的话是配置sass+ts的环境

环境配置真滴累

默认完成了ruby、webpack、create-react-app脚手架安装

create一个TypeScript+React应用

npx create-react-app my-app --template typescript

完成了这一步，你可以用VsCode打开文件夹看看了

在这里插入图片描述

安装对TypeScript的依赖

npm install typescript @types/node @types/react @types/react-dom @types/jest

安装node-sass

npm install --save node-sass@5.0.0

为啥是5.0.0呢......因为最新版本不兼容啊

修改App.css为App.scss

在这里插入图片描述

App.tsx引入修改

在这里插入图片描述

npm start报错1

在这里插入图片描述

• 解决方法： npm i web-vitals --save-dev

搞完了？ 没有，把一些常用的包也安装下来再说。

安装redux和对应的react-redux

npm install redux react-redux --save

安装axios

npm install axios

TS start

TS的编译过程

首先要知道，ts的编译和c++这些语言的编译是不一样的过程

image.png

从图里可以看到，ts没有所谓的编译失败，即便报错那也能生成js文件，ts的编译目标是js代码。

TS的类型系统

TS采用结构类型系统

image.png

这和名义类型系统的区别在哪嘞？ 主要的体现就是，ts中的类，只要结构相同，即便名字不同也算一个类型！

类型注解

上边的代码里应该也能看到

const a:Foo =new Foo();

这是ts对比js可见的特殊，类型注解

image.png

这张图中对比了四种语言的类型注解，并不算太麻烦。TS是在变量后以：的形式进行类型注解

类型与集合的关系

image.png

图注不算清晰，下边这张应该是更为清晰

image.png