建立网站很重要的要素是什么,图片展示网页设计,seo网站优化服务,英文公司网站建设MENU typescript类型别名、限制值的大小typescript使用class关键字定义一个类、static、readonlytypescript中class的constructor(构造函数)typescript中abstractClass(抽象类)、extends、abstracttypescript中的接口、type、interfacetypescript封装属性、public、private、pr… MENU typescript类型别名、限制值的大小typescript使用class关键字定义一个类、static、readonlytypescript中class的constructor(构造函数)typescript中abstractClass(抽象类)、extends、abstracttypescript中的接口、type、interfacetypescript封装属性、public、private、protected、constructor、get、set、extendstypescript枚举、enum typescript类型别名、限制值的大小
type myType 1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
let m: myType;k 2; // 正常
l 6; // 报错
m 3; // 正常typescript使用class关键字定义一个类、static、readonly
// 使用class关键字来定义一个类
// 类对象中主要包含了两个部分属性和方法
class Person {// 01----------------------------------// 直接定义的属性是实例属性需要通过对象的实例去访问a a;// 02----------------------------------// 使用static开头的属性是静态属性类属性可以直接通过类去访问static b: number 18;// 03----------------------------------// readonly开头的属性表示一个只读的属性无法修改readonly c: string 半晨;// 04----------------------------------// 静态只读属性static readonly d: string 舒冬;// 05----------------------------------// 直接定义方法e() {console.log(直接定义方法);// 直接定义方法}// 05----------------------------------// 定义静态方法static f() {console.log(定义静态方法);// 定义静态方法}
}const person new Person();console.log(Person实例:, person);
// Person实例: Person {a: a, c: 半晨}// 01------------------------------------------------
// 直接定义的属性是实例属性需要通过对象的实例去访问
console.log(实例属性:, person.a);
// 实例属性: a
// console.log(实例属性:, Person.a);
// 实例属性: undefined
// 类型“typeof Person”上不存在属性“a”。// 02------------------------------------------------
// 类属性静态属性
console.log(类属性静态属性:, Person.b);
// 类属性静态属性: 18
// console.log(类属性静态属性:, person.b);
// 类属性静态属性: undefined
// 属性“b”在类型“Person”上不存在。你的意思是改为访问静态成员“Person.b”吗?// 03------------------------------------------------
// readonly开头的属性表示一个只读的属性无法修改
console.log(只读属性, person.c);
// 只读属性 半晨
// person.c 哈哈;
// 无法分配到 c 因为它是只读属性。// 04------------------------------------------------
// 静态只读属性
console.log(静态只读属性, Person.d);
// 静态只读属性 舒冬
// Person.d 哈哈;
// 无法分配到 d 因为它是只读属性。// 05------------------------------------------------
// 直接定义方法
person.e();
// Person.e();
// 类型“typeof Person”上不存在属性“e”。// 05------------------------------------------------
// 直接定义方法
Person.f();
// person.f();
// 属性“f”在类型“Person”上不存在。你的意思是改为访问静态成员“Person.f”吗?typescript中class的constructor(构造函数)
class Dog {// 01--------------------------------------------------------// name 旺财;// age 7;// 02--------------------------------------------------------// name: string;// 属性“name”没有初始化表达式且未在构造函数中明确赋值。// age: number;// 属性“age”没有初始化表达式且未在构造函数中明确赋值。// 构造函数会在对象创建时执行constructor(name: string, age: number) {// 在实例方法中this就表示当前当前的实例// 在构造函数中当前对象就是当前新建的那个对象// 可以通过this向新建的对象中添加属性this.name name;this.age age;}bark() {console.log(汪汪汪);// 汪汪汪// 在方法中可以通过this来表示当前调用方法的对象return this.name;}
}// 错误示例--------------------------------------------------------
// const dog1 new Dog();
// const dog2 new Dog();// 01--------------------------------------------------------
// console.log(dog1:, dog1);
// // dog1: Dog {name: 旺财, age: 7}
// console.log(dog2:, dog2);
// // dog2: Dog {name: 旺财, age: 7}// 02--------------------------------------------------------
// console.log(dog1:, dog1);
// // dog1: Dog {}
// console.log(dog2:, dog2);
// // dog2: Dog {}// 正确示例--------------------------------------------------------
const dog1 new Dog(小黑, 6);
const dog2 new Dog(小白, 7);console.log(dog1:, dog1);
// dog1: Dog {name: 小黑, age: 6}
console.log(dog2:, dog2);
// dog2: Dog {name: 小白, age: 7}// 03--------------------------------------------------------
// 调用类中的方法
console.log(dog1:, dog1.bark());
// dog1: 小黑
console.log(dog2:, dog2.bark());
// dog1: 小白typescript中abstractClass(抽象类)、extends、abstract
// 自执行函数的作用是形成单独模块块作用域
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () {// 以abstract开头的类是抽象类// 抽象类和其他类区别不大只是不能用来创建对象// 也就是不能new Animal()的意思。// 抽象类就是专门用来被继承的类// 抽象类中可以添加抽象方法abstract class Animal {name: string;constructor(name: string) {this.name name;}// 定义一个抽象方法// 抽象方法使用abstract开头没有方法体// 抽象方法只能定义在抽象类中子类必须对抽象方法进行重写// void没有返回值返回值为空abstract sayHello(): void;}class Dog extends Animal {sayHello() {console.log(汪汪汪汪);}}// 非抽象类“Cat”不会实现继承自“Animal”类的抽象成员“sayHello”。class Cat extends Animal {// sayHello() {// console.log(喵喵喵喵);// }}const dog new Dog(旺财);const cat new Cat(喵喵);dog.sayHello();cat.sayHello();
})();typescript中的接口、type、interface
// 自执行函数的作用是形成单独模块块作用域
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () {// 描述一个对象的类型type myType {name: string,age: number};const obj: myType {name: sss,age: 111,};console.log(myType:, obj);// myType: {name: sss, age: 111}// 接口用来定义一个类结构// 用来定义一个类中应该包含哪些属性和方法// 同时接口也可以当成类型声明去使用// 接口可以声明相同的接口名称// 只是接口会打散合并interface myInterface {name: string;age: number;}interface myInterface {gender: string;}// 如果属性个数对应不上会报错// 说明了接口是可以定义相同接口名称// 并且接口会打散合并const objs: myInterface {name: sss,age: 111,gender: 男};console.log(myInterface:, objs);// myInterface: {name: sss, age: 111, gender: 男}// 接口可以在定义类的时候去限制类的结构// 接口中的所有的属性都不能有实际的值// 接口只定义对象的结构而不考虑实际值// 在接口中所有的方法都是抽象方法interface myInter {name: string;sayHello(): void;}// 定义类时可以使类去实现一个接口// 实现接口就是使类满足接口的要求class MyClass implements myInter {name: string;constructor(name: string) {this.name name;}sayHello() {console.log(大家好~~);// 大家好~~console.log(this.name);// 半晨}}let myclass new MyClass(半晨);myclass.sayHello();
})();typescript封装属性、public、private、protected、constructor、get、set、extends
// 自执行函数的作用是形成单独模块块作用域
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () {// 可以任意修改类中属性的值class ArbitrarilyEdit {name: string;age: number;constructor(name: string, age: number) {this.name name;this.age age;}}let arbitrarilyEdit new ArbitrarilyEdit(半晨, 24);// 在对象中直接设置属性// 属性可以任意的被修改// 属性可以任意被修改将会导致对象中的数据变得非常不安全console.log(before-arbitrarilyEdit:, arbitrarilyEdit);// before-arbitrarilyEdit: ArbitrarilyEdit {name: 半晨, age: 24}arbitrarilyEdit.name 舒冬;arbitrarilyEdit.age -33;console.log(after-arbitrarilyEdit:, arbitrarilyEdit);// arbitrarilyEdit: ArbitrarilyEdit {name: 舒冬, age: -33}// 定义一个不可以任意修改类中值的类class Person {// typescript可以在属性前添加属性的修饰符// public 修饰的属性可以在任意位置访问修改 默认值// private 私有属性私有属性只能在类内部进行访问修改// 通过在类中添加方法使得私有属性可以被外部访问// protected 受包含的属性只能在当前类和当前类的子类中访问修改private _name: string;private _age: number;constructor(name: string, age: number) {this._name name;this._age age;}// getter方法用来读取属性// setter方法用来设置属性// 它们被称为属性的存取器// 定义方法用来获取name属性getName() {return this._name;}// 定义方法用来设置name属性setName(value: string) {this._name value;}getAge() {return this._age;}setAge(value: number) {// 判断年龄是否合法if (value 0) {this._age value;}}get name() {return this._name;}set name(value) {this._name value;}get age() {return this._age;}set age(value) {if (value 0) {this._age value}}}const per new Person(半晨, 18);console.log(before-per:, per);// before-per: Person {_name: 半晨, _age: 18}per._name 舒冬;per._age -36;console.log(after-per:, per);// after-per: Person {_name: 舒冬, _age: -36}// 此时是可以编译通过// 但是_name和_age会出现下波浪线提示错误// 定义方法获取name属性console.log(getName:, per.getName());// getName: 舒冬// 定义方法设置name属性per.setName(苏檀);console.log(setName:, per.getName());// setName: 苏檀// 定义方法获取age属性console.log(getAge:, per.getAge());// getAge: -36// 定义方法设置age属性// 此处无法修改原先赋值为 -36 的值per.setAge(-16);console.log(setAge:, per.getAge());// setAge: -36// 使用自带的get和set方法console.log(before-getName:, per.name);// before-getName: 苏檀console.log(before-age:, per.age);// before-age: -36per.name 宁毅;per.age 36;console.log(after-getName:, per.name);// after-getName: 宁毅console.log(after-age:, per.age);// after-age: 36// ----------------------------------------------------------class A {// protected 受包含的属性只能在当前类和当前类的子类中访问修改protected num: number;constructor(num: number) {this.num num;}}class B extends A {test() {console.log(this.num);// 33}}const b new B(3436);console.log(before-b:, b);// before-b: B {num: 3436}b.num 33;// 属性“num”受保护只能在类“A”及其子类中访问。console.log(after-b:, b);// after-b: B {num: 33}// 本来是不应该修改的// 但是编译时没有限制报错不能生成文件导致结果是可以修改b.test();// ----------------------------------------------------------// 方式一和方式二是一样的效果// class C {// name: string;// age: number// // 可以直接将属性定义在构造函数中// constructor(name: string, age: number) {// this.name name;// this.age age;// }// }// 方式二和方式一是一样的效果class C {// 可以直接将属性定义在构造函数中constructor(public name: string, public age: number) {console.log(name, age);// xxx 111}}const c new C(xxx, 111);console.log(c:, c);// c: C {name: xxx, age: 111}
})();typescript枚举、enum
enum Gender {Male,Female
};let i: { name: string, gender: Gender };
i { name: 孙悟空, gender: Gender.Male // male
};console.log(i.gender Gender.Male); // true
