wordpress 百家号插件,seo 的原理和作用,做网站的公司倒闭,wordpress 登录 手机版今天来分享下ts中的类#xff0c;关于ts中的类的概念#xff0c;面向对象的一种思想#xff0c;以及类里面的一些属性成员#xff0c;一些基础的用法#xff0c;后面会有一个小练习。
类
基本概念
我的理解#xff1a;类是编程语言中面向对象的一种思想#xff0c;一…今天来分享下ts中的类关于ts中的类的概念面向对象的一种思想以及类里面的一些属性成员一些基础的用法后面会有一个小练习。
类
基本概念
我的理解类是编程语言中面向对象的一种思想一个类是抽象事物的一个集合比如人可以是一个类类的实例对象具体到某一个人所以这两者之间从抽象到具体。
面向对象思想
关于面向对象的一个思想的好处可以让我们在开发的过程中更易于维护我们的代码以及我们的对象实例每个都是独立出来的每次创建一个对象都是NEW一个实例每个实例之间互相不影响。面向对象用来编写模块化的代码也是非常的友好而且公共类可以抽成接口用来继承对于开发来说可以更加的清晰逻辑更加的明确同样对于灵活性和可扩展性也是有保障的。
代码重用性代码可维护性
以前传统js类写法
es5
function User(userobj){this.name userobj.name;this.age userobj.age;this.sex userobj.sex;this.phone userobj.phone;this.address userobj.address;
}const u new User({name : kakarote,age : 18,sex : 男,phone : 1008611,address : 广东深圳宝安区
});console.log(u)es6
class User{constructor(userobj){this.name userobj.name;this.age userobj.age;this.sex userobj.sex;this.phone userobj.phone;this.address userobj.address;}
}const u new User({name: kakarote,age: 18,sex: 男,phone: 1008611,address: 广东深圳宝安区
});console.log(u)打印结果 ts编写类
class User {constructor(name: string, age: number,sex:string,phone:string,address:string) {this.name name;this.age age;this.sex sex;this.phone phone;this.address address;}
}在ts中如果按照上面这种写法是会报错的ts觉得这种写法不太好如果我们写一个类我们应该是清楚这个类里面到底有哪些属性的创建属性里面的工作不允许放在构造函数里面写。因为如果可以添加的话就可能会造成很多有隐患的代码最后可能都不清楚这个对象到底是有哪些属性ts认为属性是不能添加的必须提前限制好。
ts让我们使用属性列表来描述类里面的属性
列表直接写到class里面
class User {name: stringage: numbersex: stringphone: stringaddress: stringconstructor(name: string, age: number, sex: string, phone: string, address: string) {this.name name;this.age age;this.sex sex;this.phone phone;this.address address;}
}编译结果里面不会带这个属性列表
不能随意添加属性
比如下图我想给这个u实例添加一个id这个在ts中是不允许的 更加严格的属性初始化
但是可能会有下面这种情况我没有构造函数但是我直接创建user实例也不会报错但是这样user对象的每个属性都是undefined就和类型不符合了
class User {name: stringage: numbersex: stringphone: stringaddress: string
}const u new User();或者说我写了构造函数但是有些在构造函数里没赋值希望ts能够提示出来这样怎么做呢
这里可以在tsconfig.json里面加上一个配置这个属性为strictPropertyInitialization
{compilerOptions: { //编译选项strictPropertyInitialization: true //这样ts会对类里面的属性初始化进行严格校验},}strictPropertyInitialization
这个属性它会监测
构造函数中是否赋值是否存在属性默认值
设置默认值
这里一般性别都是男或者女这里我希望能有个默认值
enum Sex{Male 男,Female 女
}class User {name: stringage: numbersex: Sex Sex.Male //设置默认值phone: stringaddress: string//这样可以少传递一个参数constructor(name: string, age: number phone: string, address: string) {this.name name;this.age age;this.phone phone;this.address address;}
}const u new User(...具体参数);
u.sex Sex.Female;可选
类里面有些属性我希望是可选的那在ts中怎么写呢
class User {name: stringage: numbersex: Sex Sex.Male //设置默认值phone?: string //可以在:前面加个?这样就代表这个属性是可选的可以传递也可以不传递
}只读属性
在有些场景下我们希望这个类的属性是只读属性不能改的比如说id属性一般来说id都是自动生成的不可以改的这里我们可以在属性前面加上readonly关键字
class User {readonly id:numbername: stringage: numbersex: Sex Sex.Male //设置默认值phone?: string //可以在:前面加个?这样就代表这个属性是可选的可以传递也可以不传递constructor(){///...//举例子this.id new Date().getTime();}
}使用访问修饰符
访问修饰符可以控制类中的某个成员的访问权限
public默认的访问修饰符公开的所有代码均可以访问private: 私有的只有在类中可以访问protected
class User {//...//设置私有的两个属性private _publishNumber: number 3 //每天一共可以发布多少篇文章private _curNumber: number 0; //当前文章发布数量publish(title: string) {if (this._curNumber this._publishNumber) {console.log(发布了一篇文章 title);this._curNumber;} else {console.log(你今日发布的文章数量已达到上限)}}
}const u new User(aa, 22);u.publish(文章1)
u.publish(文章2)
u.publish(文章3)
u.publish(文章4)Tips:开发的原则尽量少的暴露公共的属性暴露出来的成员容易被其他开发者直接修改容易造成很多隐患所以一般都是暴露出一些需要用的函数和属性一些不需要用的属性尽量私有化。
属性简写
如果某个属性通过构造函数的参数传递并且不做任何处理的赋值给该属性。可以进行简写
class User {sex: Sex Sex.Male //设置默认值phone?: string //可以在:前面加个?这样就代表这个属性是可选的可以传递也可以不传递constructor(public name: string, public age: number) {}
}const u new User(kakarote,11);console.log(u)前提是这里必须加上修饰符不加修饰符是无效的 访问器
有些属性我们不希望直接对他进行赋值以及直接进行读取这样可能会存在一些问题这里就需要用到访问器的知识
class User{//设置私有化_age变量constructor(public name: string, private _age: number) {}setAge(value: number) {if(value 0){this._age 0;}else if(value 200){this._age 200;}else{this._age value;}}getAge() {return Math.floor(this._age);}
}const u new User(aa, 22);
console.log(u.getAge())
u.setAge(11)
console.log(u.getAge())
我们可以使用这种函数的形式这样就可以实现一个访问器的效果但是js的类里面给我们提供了get和set的一个关键字这个关键字可以达到一样的效果而且还可以让我们用传统的赋值和读取的写法。它的本质还是一个函数有点类似Object.defineProperty的存取器
class User{//设置私有化_age变量constructor(public name: string, private _age: number) {}set age(value: number) {if(value 0){this._age 0;}else if(value 200){this._age 200;}else{this._age value;}}get age() {return Math.floor(this._age);}
}const u new User(aa, 22);
console.log(u.age)
u.age 11;
console.log(u.age) 这个完全是可以达到一样的效果的
小练习
我们上期typescript回顾二里面分享了扑克牌的功能现在希望使用ts的类对它进行一个改造
1. 目标创建一幅扑克牌不包括大小王打印该扑克牌增加洗牌和发牌功能2. 使用枚举改造程序3. 使用模块化4. 用接口改造程序加入大小王5. 用类改造程序目录结构
src deck.tsenum.tsindex.tstypes.ts
enum.ts
定义枚举形状以及标记
export enum Shape {heart ♥,spade ♠,club ♣,diamond ♦,
}export enum Mark {A A,two 2,three 3,four 4,five 5,six 6,seven 7,eight 8,nine 9,ten 10,eleven J,twelve Q,king K
}type.ts
用来定义类型普通牌的一个类型定义
import { Color, Mark } from ./enums;//一副牌是个Card数组
export type Deck Card[];//定义每张牌
export interface Card {getString(): string
}//普通牌
export interface NormalCard extends Card {color: Color,mark: Mark,
}//大小王
export interface Joker extends Card {type: big | small
}deck.ts
//用于定义具体的一个扑克牌游戏规则
import { Mark, Color } from ./enums;
import { Card, Joker } from ./types;//发牌对象每个玩家发xx张牌
interface PublishResult {player1: Deck,player2: Deck,player3: Deck,left: Deck
}export class Deck {private cards: Card[] [];constructor(cards?: Card[]) {if (cards) {this.cards cards;} else {this.init();}}//初始化private init() {const marks Object.values(Mark);const colors Object.values(Color);for (const m of marks) {for (const c of colors) {this.cards.push({mark: m,color: c,getString() {return this.color this.mark;}} as Card);}}let joker: Joker {type: small,getString() {return jo},}this.cards.push(joker);joker {type: big,getString() {return Jo},}this.cards.push(joker);}print() {let result \n;this.cards.forEach((card, i) {result card.getString() \t;if ((i 1) % 6 0) {result \n;}});console.log(result)}/*** 洗牌*/shuffle() {//[x1,x2,x3,x4,x5,x6,x7]for (let i 0; i this.cards.length; i) {const targetIndex this.getRandom(0, this.cards.length);const temp this.cards[i];this.cards[i] this.cards[targetIndex];this.cards[targetIndex] temp;}}// 发完牌后得到的结果有4个card[]publish(): PublishResult {let player1: Deck, player2: Deck, player3: Deck, left: Deck;player1 this.takeCards(17);player2 this.takeCards(17);player3 this.takeCards(17);left new Deck(this.cards);return {player1,player2,player3,left};}private takeCards(n: number): Deck {const cards: Card[] [];for (let i 0; i n; i) {cards.push(this.cards.shift() as Card);}return new Deck(cards);}/*** 无法取到最大值* param min * param max * returns */private getRandom(min: number, max: number) {const dec max - min;return Math.floor(Math.random() * dec min)}
}index.ts
入口引入扑克牌游戏
import { Deck } from ./deck;const deck new Deck();
deck.shuffle();
console.log(洗牌之后)
deck.print();const result deck.publish();
console.log(发牌之后);console.log(玩家1);
result.player1.print();console.log(玩家2);
result.player2.print();console.log(玩家3);
result.player3.print();console.log(玩家3);
result.player3.print();console.log(地主牌);
result.left.print();
