typescript的简介

简介

在这里插入图片描述

tsc

在这里插入图片描述

npm install -g typescript

tsc -v

作用

检查类型和语法错误，提前纠错

ts的类型

在这里插入图片描述

如何穿件带有ts的vue工程

在这里插入图片描述

作用

在这里插入图片描述

常见类型

在这里插入图片描述

用法

编写一个ts文件

let username:string = "John";let age:number = 25;let isUpdated:boolean = true;let data:any = "Hello World!";console.log(username);
console.log(age);
console.log(isUpdated);
console.log(data);

编译

 tsc .\tsDemo.ts

效果

对应的ts文件下多了一个js文件

ts文件是不能直接运行的，只有编译成js才能运行

这是编译之后的js文件

var username = "John";
var age = 25;
var isUpdated = true;
var data = "Hello World!";
console.log(username);
console.log(age);
console.log(isUpdated);
console.log(data);

约束字面量类型（类似于enum枚举）

在这里插入图片描述

myPrintFunction("Hello World!","center");
myPrintFunction("Hello World!","left");
myPrintFunction("Hello World!","right");function myPrintFunction(content:string,alignment:'right'|'left'|'center'):void {console.log(content,alignment);
}

接口

接口类似于java，但是要求更加严格，不能多也不能少

在这里插入图片描述

const myCat: Cat = {name: "Whiskers",age: 3
}// 报错：多了color属性
const myCat2: Cat = {name: "Whiskers",age: 3,color: "white"
}// 报错：少了age属性
const myCat3: Cat = {name: "Whiskers",
}console.log(myCat);

设置非强制类型的属性

问号是为了那些可有可无的属性准备的

interface Cat {name: string;age?: number;color?: string;
}

类class

在这里插入图片描述

// 类 有两个必须的  属性和构造函数  普通函数可有可无
class Animal {name: string;constructor(name: string) {this.name = name;}move(distance: number = 0) {console.log(`${this.name} moved ${distance}m.`);}
}// 使用构造器创建实例
const myAnimal = new Animal("Cat");
myAnimal.move(10);

类是可以实现接口的

类必须实现接口中的所有方法

// 类实现接口
class Student implements Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}// 类必须实现接口中的所有方法eat() {console.log(`${this.name} is eating.`);}// 类可以有自己的方法study() {console.log(`${this.name} is studying.`);}
}// 使用构造器创建实例
const myStudent = new Student("John", 25);
myStudent.eat();
myStudent.study();

类的继承

和java几乎是一样的

// 类继承
class Dog extends Animal {// 子类构造函数默认调用父类构造函数   构造函数可以不写constructor(name: string) {super(name);}bark() {console.log(`${this.name} is barking.`);}
}const myDog = new Dog("Buddy");
// 继承父类的方法
myDog.move(20);
// 自己的方法
myDog.bark();