-
类
1.1类的声明,Person.ts文件内容如下class Person{ /**默认访问控制符为public * private控制符修饰的变量或方法只能在本类内部使用,外部不可调用 * protected控制符修饰的变量或方法在本类内部和继承的子类调用 */ name; eat() { console.log("I'm eating"); } } var p1 = new Person(); p1.name = "batman"; p1.eat(); var p2 = new Person(); p2.name = "superman"; p2.eat();
编译后的Person.js文件内容如下var Person = /** @class */ (function () { function Person() { } Person.prototype.eat = function () { console.log("I'm eating"); }; return Person; }()); var p1 = new Person(); p1.name = "batman"; p1.eat(); var p2 = new Person(); p2.name = "superman"; p2.eat();
1.2类的构造函数,Person2.ts文件内容如下class Person{ /**以下构造函数的写法等价于 * name; * constructor(name: string) { * this.name = name; * } */ constructor(public name: string) { } sayHello() { console.log(`Hello,my name is ${this.name}`); } } var p1 = new Person("batman"); p1.sayHello(); var p2 = new Person("superman"); p2.sayHello();
编译后的Person2.js文件内容如下var Person = /** @class */ (function () { /**以下构造函数的写法等价于 * name; * constructor(name: string) { * this.name = name; * } */ function Person(name) { this.name = name; } Person.prototype.sayHello = function () { console.log("Hello,my name is " + this.name); }; return Person; }()); var p1 = new Person("batman"); p1.sayHello(); var p2 = new Person("superman"); p2.sayHello();
1.3类的继承,Person3.ts文件内容如下class Person{ constructor(public name: string) { } eat() { console.log(`eating!!!`); } } class Employee extends Person{ code; work() { console.log('working!!!'); } } var e1 = new Employee('lisi');
子类调用父类的构造函数和方法,Person4.ts文件内容如下class Person{ constructor(public name: string) { console.log('new Person'); } eat() { console.log(`eating!!!`); } } class Employee extends Person{ code; constructor(name: string, code: string) { /**必须先调用父类的构造函数 */ super(name); console.log('new Employee'); this.code = code; } work() { super.eat(); this.dowork(); } private dowork() { console.log('working!!!'); } } var e1 = new Employee('lisi', '123'); e1.work();
-
泛型
Person5.ts文件内容如下class Person{ constructor(public name: string) { console.log('new Person'); } eat() { console.log(`eating!!!`); } } class Employee extends Person{ code; constructor(name: string, code: string) { super(name); console.log('new Employee'); this.code = code; } work() { super.eat(); this.dowork(); } private dowork() { console.log('working!!!'); } } /**泛型为Person */ var worker: Array<Person> = []; worker[0] = new Person('liling'); worker[1] = new Employee('heliang', '133');
-
接口
方法参数的接口Person6.ts文件内容如下interface IPerson{ name: string; age: number; } class Person{ constructor(public config: IPerson) { } } var p1 = new Person({ age:18, name:'lining' });
编译后Person6.js的代码如下var Person = /** @class */ (function () { function Person(config) { this.config = config; } return Person; }()); var p1 = new Person({ age: 18, name: 'lining' });
类的接口Person7.ts文件的代码如下interface Animal{ eat(); } class Sheep implements Animal{ eat() { console.log('I eat grass'); } } class Tiger implements Animal{ eat() { console.log('I eat meat'); } }
编译后Person7.js的代码如下var Sheep = /** @class */ (function () { function Sheep() { } Sheep.prototype.eat = function () { console.log('I eat grass'); }; return Sheep; }()); var Tiger = /** @class */ (function () { function Tiger() { } Tiger.prototype.eat = function () { console.log('I eat meat'); }; return Tiger; }());
-
模块
文件即模块,a模块a.ts代码如下/**export向外暴露的资源*/ export var prop1; var prop2; export function func1() { } function func2(){ } export class Clazz1{ } class Clazz2{ }
b模块b.ts代码如下/**引用的资源*/ import { prop1, func1, Clazz1 } from './a' console.log(prop1); func1(); new Clazz1(); /**向外暴露的资源 */ export function func3(){ }
-
注解
为类、方法和变量加上直观明了的说明,这些说明信息与程序的业务逻辑无关,供指定的工具或框架使用 -
类型定义文件
*.d.ts文件,帮助开发者在TypeScript中使用已用的JavaScript包
搜索JavaScript包的类型定义文件工具https://github.com/typings/typings
类型定义文件下载地址https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery
06.TypeScript面向对象特性
猜你喜欢
转载自itnotesblog.iteye.com/blog/2411110
今日推荐
周排行