作为一个后端开发，后台管理页面经历了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.js

vscode自动编译

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的更多语法。