TS快速入门（1）基本概念

TypeScript 入门教程

TS快速入门（1）基本概念

1、TypeScript是什么？

TypeScirpt = Type + JavaScript （在JS基础上，为JS添加了类型支持）

解释型：写的代码，无需进行编译，直接运行，也需要一个翻译器，一边翻译一边执行

编译型：人类写的是英语，机器不认识，需要一个编译器，将人类写的语言转换成机器识别的语言，这个过程叫编译

弱类型：声明变量型无需制定类型

强类型：声明变量是必须制定类型

动态语言：在代码执行过程中可以动态添加对象的属性

静态语言：不允许在执行过程中随意添加属性

//JS
function Person(name){
	this.name = name
}

const p1 = new Person('李白')
p1.gender = '男'

//Java
class Person {
	private String name;
	public Person(name){
		this.name = name; 
	}
}

Person p1 = new Person('李白')
p1.gender = '男'; //报错Person没有gender属性
//	好处：1、有完整的代码提示，2、如果有不符合规则会立马报错

结论：JS的特点是灵活，高效。很短的代码实现负载功能，缺点是没有代码提示，容易出错且编辑工具不会给任何提示，而java则相反。

2、为什么有TypeScript？

JS的类型系统存在"先天缺陷"弱类型，JS代码大部分都是类型错误（Uncaught TypeError）。这些错误增加了找Bug和改Bug的时间，严重影响开发效率。

• 对于JS来说：需要代码执行后发现错误（晚）
• 对于TS来说：在代码编译时（执行前）发现错误（早）

配合VSCode等工具，TS可以在编写代码时就发现代码中的错误，减少找Bug和改Bug时间。

对比：

• 使用JS：

  1.在VSCode里面写代码

  2.在浏览器中运行代码–>运行时发现错误【晚】

• 使用TS：

  1.在VSCode里面写代码–>写代码时发现错误【晚】

  2.在浏览器中运行代码

Vue3 源码使用TS重写，Angular默认支持TS，React与TS完美配合，TS已成为中大型项目首选编程语言。

目前。前端最新开发技术栈：

1. React：TS + Hooks
2. Vue：TS + Vue3

• Vue2 对 TS 支持不好～

3、安装编译TS的工具包

目标：能安装ts的工具包来编译ts

内容：

• 问题：为什么要安装编译TS的工具包？
• 回答：Node.js/浏览器，只认识JS代码，不认识TS代码。需要先讲TS代码转换成JS代码，才能运行。
• 安装命令：yarn global add typescript 或者 npm i -g typescript
  • mac 需要前面加上sudo
  • tsc命令实现 TS --> JS的转换
• 验证成功使用命令tsc -v

4、 编译与运行TS代码

1 创建ts文件 => 2 编译 TS => 3 执行JS

touch hello.jhs =>tsc hello.ts=>node hello.js

• TS生成的JS文件代码中，没有类型信息。
• 所有合法的JS代码都是TS代码，有JS基础只需要学习TS类型就行了。

真正开发过程中，其实不用自己手动使用tsc转换ts文件，这些工作交给webpack或者vite完成。

5、创建基于TS的vue项目

1. 进入到桌面路径，执行命令：yarn create vite vite-ts-demo --template vue-ts

2. 进入项目目录，执行命令：yarn

之后的学习将在 main.vue中执行