TS学习笔记（一）

JS的痛点

由于各种历史因素，JavaScript语言本身存在很多的缺点：
比如ES5以及之前的使用的var关键字关于作用域的问题；
比如最初JavaScript设计的数组类型并不是连续的内存空间；
比如直到今天JavaScript也没有加入类型检测这一机制；

但毫无疑问JavaScript正在慢慢变好
不可否认的是，JavaScript正在慢慢变得越来越好，无论是从底层设计还是应用层面。
ES6、7、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便
但是直到今天，JavaScript在类型检测上依然是毫无进展，JavaScript不可以在代码编译期间发现代码的错误

例子：

function foo(message)
if (message){
	console.log(message.length);
}
foo("Hello World");
foo();//报错
//永远执行不到
console.log("渲染界面成千上万行的DavaScript代码需要执行，去渲染界面")

当然我们可以给JavaScript加上很多限制，在开发中就可以很好的避免这样的问题了：
比如我们的getLength函数中str是一个必传的类型，没有调用者没有传值编译期间就会报错：
比如我们要求它的必须是一个String类型，传入其他类型就直接报错：
那么很多的错误问题在编译期间就被发现，而不是等到运行时再去发现和修改；

我们已经简单体会到没有类型检查带来的一些问题，JavaScript因为从设计之初就没有考虑类型的约束问题，所以造成了前端开发人员关于类型思维的缺失：
前端开发人员通常不关心变量或者参数是什么类型的，如果在必须确定类型时，我们往往需要使用各种判断验证

Vue2.x的时候采用的就是flow来做类型检查；
Vue3.x已经全线转向TypeScript,98.3%使用TypeScript进行了重构；
而Angular在很早期就使用TypeScript进行了项目重构并且需要使用TypeScript来进行开发；

认识TypeScript

TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。
理解：
我们可以将TypeScripti理解成加强版的JavaScript:
JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的;
在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型(Eum)、元组类型(Tuple)等；
TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先;
并且TypeScript最终会被编译成JavaScript代码，所以你并不需要担心它的兼容性问题，在编译时也不需要借助于Babel这样的工具；
所以，我们可以把TypeScript理解成更加强大的JavaScript,不仅让JavaScript更加安全，而目给它带来了诸多好用的好用特性

众多项目采用TypeScript
正是因为有这些特性，TypeScript目前已经在很多地方被应用：
Angular源码在很早就使用TypeScript来进行了重写，并且开发Angular也需要掌握TypeScript;
Vue3源码也采用了TypeScript进行重写，在前面阅读源码时我们看到大量TypeScript的语法；
包括目前已经变成最流行的编辑器VSCode也是使用TypeScript来完成的；
包括在React中已经使用的ant-design的UI库，也大量使用TypeScript来编写；
目前公司非常流行Vue3+TypeScript、React+TypeScript的开发模式；
包括小程序开发，也是支持TypeScript的；

TypeScript的编译环境

安装tsc
npm install typescript -g
tsc --version
重名冲突的解决方案：
export{} 当做模块 有自己的作用域
搭建自动转换js环境：
1.通过webpack搭建ts环境(做项目)
npm init 创建package.json
npm install webpack webpack-cli -D 本地安装 出现node_modules和package-lock.json
npm install ts-loader typescript -D
自建webpack.config.js配置文件

const path require('path')
module.exports={
	entry:"./src/main.ts",
	output:{
		path:path.resolve(__dirname,"./dist"),
		filename:"bundle.js"
	},
	resolve:{
		extensions:[".ts"]        //因为前面有AB两个ts文件，BrequireA时文件末尾不带.ts
	},
	modules:{
		rules:[
			{
				test:/\.ts$/,
				loader:'ts-loader'
			}
		]
	}
}

在package.json里的scripts中添加"build":"webpack"
由于会报错error while parsing tsconfig.json(缺少ts的配置文件)，那么就执行tsc --init
最后npm run build 把生成的js引入html即可

2.ts-node -g>安装(依赖另外两个包npm install tslib @types/node -g )
ts-node TypeScript.ts
编译>跑在node(学语法)

详细配置指路链接

TS学习笔记（二）

第一篇主要讲了对ts的认识，需要关注与js的区别，还有环境的搭建。第二篇开始记录ts相关语法。指路TS学习笔记（二）