作为一个后端开发，后台管理页面经历了jsp、freemarker、thymeleaf之后，现在已基本被前后端分离的大势代替。vue作为国内最火的前端技术，学习一二以可以进行后台管理页面的开发。在一些中小公司还是必备之技能。
Day1 TypeScript的快速上手。
Vue3更好的支持了TypeScript.TS可以提供更严格的校验，编译检查，兼有面向对象的优点，易于后期维护。对于大型项目推荐使用TS,可以更好的使用基础库、功能库，极大地帮助我们提升了开发效率和体验。
安装TypeScript
命令行运行如下命令，全局安装 TypeScript：
npm install -g typescript安装完成后，在控制台运行如下命令
tsc -V编写HelloWorld
创建文件 Helloworld.ts
function sayHello(){
console.log("hello world TS");
}编译代码
tsc helloworld.ts输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavsScript 代码。
通过node.js运行代码
node helloworld.jsvscode自动编译
1). 运行命令 生成配置文件tsconfig.json
tsc --init
2). 修改tsconfig.json配置 strict严格模式改为false
"outDir": "./js",
"strict": false,
3). 启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json类型注解
使用类型注解，进行类型声明、约束
function add(a:number,b:number):number{
return a+b;
}当使用如下代码时编译器会报错 类型“string”的参数不能赋给类型“number”的参数。，在编译阶段即可排除一部分错误。
add('a',1);编译后的js代码
function add(a, b) {
return a + b;
}接口
接口定义了一个类型的结构。
如User用户包括 name,age
interface IUser{
name: String,
age: number;
}
function sayHello(user: IUser){
console.log("hello "+user.name+" "+user.age);
}
使用，当对象属性不对是编译报错
let user:IUser = {
name:'张三',
age: 20
}
sayHello(user);类
TS中类似java面向对象的类型。它带有一个构造函数和一些公共字段。
类可以通过implements实现接口
class User implements IUser{
name: string
age: number
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
}
let user2 = new User("lisi",30);
sayHello(user2);总结
Day1 初步认识了TypeScript，对类型约束，接口、类有了初步的了解，后续继续学习TypeScript的更多语法。
