文章快速索引:
1、TypeScript快速入门教程(一)、基础类型和变量声明
2、TypeScript快速入门教程(二)、面向对象知识(接口、类、抽象类)
3、TypeScript快速入门教程(三)、函数、范型使用
4、TypeScript快速入门教程(四)、联合类型 & 交叉类型 & 类型保护
这次的知识点和Java
、c#
语法非常相似,所以直接快速过。
接口
1-1、 接口定义
接口定义语法格式为interface 接口名称 {}
interface Girl {
name: string; //定义属性
age: number; //同上
bust: number; //同上
waistline?: number; //可空参数
[propname: string]: any; //可选参数
say(): string; //方法定义
}
这里需要特别注意的有可空参数
和可选参数
- 可空参数,实现的时候,可以不用实现,直接使用的话返回
undefined
,比如这里的waistline
,可以不用实现,编译并不会报错。
let numOne = {name: "小红", age: 12, bust: 98, say(): string {
return "欢饮光临!"
}}
- 可选参数,可自由设置属性,可直接使用,比如下面的代码,并没有定义
hello
字段,但是可以直接设置
let numOne = {name: "小红", age: 12, bust: 98, say(): string {
return "欢饮光临!"
}, waistline: 65, hello: 22}
1-2、使用接口作为参数预定义,类似type使用
const screenResume = (girl: Girl) => {
girl.age < 24 && girl.bust > 90 && console.log(`${girl.name}进入面试`)
girl.age > 24 || girl.bust < 90 && console.log(`${girl.name}被淘汰`)
}
const getScreenResume = (girl: Girl) => {
console.log(`${girl.name}的年龄: ${girl.age}, 胸围: ${girl.bust}
, 腰围: ${girl.waistline ?? "暂无数据"}`, girl.hello)
}
进行参数预定的一个好处,就是可以对多个参数就行抽离使用,简化代码,并且可以起到约束参数作用。
1-3、结合类使用, implements
接口继承
interface ShanghaiGirl extends Girl {
sayShangHai(): string;
}
类实现接口
class PuTuoGirl implements ShanghaiGirl{
[propname: string]: any;
age: number;
bust: number;
name: string;
say(): string {
return "";
}
sayShangHai(): string {
return "";
}
}
类
2-1、类正常定义
ts
中类的定义格式为: class 类名 {}
class Lady {
//定义参数
content = 'Hi, 帅哥!';
//定义方法
sayHello(){
return this.content;
}
//定义静态参数
static className: string;
//定义静态方法
static speak(){
console.log("static method")
}
//private参数
private age: number;
//set & get方法
set age(value: number){
this.age = value;
}
get age(): number{
return this.age;
}
//只读参数
private readonly typeName: string;
//protected参数
protected typeValue: string;
//public参数
public publicRtc: string;
}
2-2、类继承关系
class Person {
public name: string;
protected age: number;
constructor(age: number) {
this.age = age;
}
public sayHello(){
console.log("sayHello");
}
}
class Teacher extends Person{
get bust(): number {
return this._bust;
}
set bust(value: number) {
this._bust = value;
}
private _bust: number;
constructor(bust: number) {
super(24);
this._bust = bust;
}
sayHello() {
super.sayHello();
console.log("age: " + this.age, this.bust)
}
static className: string;
static speak(){
console.log("static method")
}
private readonly typeName: string;
}
2-3、类的构造方法
class Person {
public name: string;
protected age: number;
// 定义构造参数
constructor(age: number) {
this.age = age;
}
public sayHello() {
console.log("sayHello");
}
}
定义构造方法之后,使用的话,需要传入构造参数的值
let p = new Person (86);
如果是继承之后,想要使用父类的构造方法,可以直接使用super.xxx
抽象类
ts
中抽象类定义为abstract class 类名 {}
abstract class Fruits {
//普通方法
sayHello() {
console.log("hello")
}
//抽象参数
abstract params: string;
//抽象方法
abstract sayWorld(): void;
}
class Mango extends Fruits {
params: string;
sayWorld(): void {
}
}
对于抽象方法
和抽象参数
,继承之后必须要实现。