typescript中的数据类型
typescript为了使代码编写更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了如下数据类型：
- boolean 布尔型
- number 数值型
- string 字符串型
- array 数组型
- tuple 元组类型
- enum 枚举类型
- any 任意类型
- null
- undefined
- void类型
- never型：是其他类型（null 和 undefined）的子类型，代表从不会出现的值。这代表声明never的变量只能被never类型赋值
函数的写法
- 三点运算符 接受新传过来的值
// 写法一
function sum(...num:number[]):number {
for (let i = 0; i < num.length; i++) {
sum+=num[i];
}
return sum;
}
sum(1,2,3,4,); // 输出10
// 写法二
function sum(a:number, b:number, ...num:number[]):number {
let sum = a +b;
for (let i = 0; i < num.length; i++) {
sum+=num[i];
}
return sum;
}
sum(1,2,3,4); // 输出10重载
1.函数重载
- java中方法的重载：指两个或两个以上的同名函数，由于参数不一样，出出现函数重载的情况
- ts中的重载：通过为同一个函数提供多个不同类型的参数，来实现多种功能目的
- ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数
2.ts函数重载
- ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数 ,但ts则不会
function getResult(str:string):string;
function getResult(str:number):number;
function getResult(str:any):any {
if (typeof str === 'string') {
console.log('传参为string型');
} else {
console.log('传参为number型')
}
}
getResult('这是string型');
getResult(123);
getResult(true); //错误写法，因为在方法重载中没有找到可以匹配boolean型的函数说明：上面例子中function getResult(str:any):any {}并不是重载的一部分
typescript类说明
- typescript 定义类时，给我们提供了三种修饰符
- public ：公有。 在当前类、子类、外面都可以访问
- protected： 保护。 在当前类、子类可以范围，外面不可以访问
- private ： 私有。 在当前类可以范围，子类、外面不可以访问
属性如果不加修饰符，那默认为：public
- static
不需要实例化，可直接调用 - 多态
定义：父类定义了一个方案，但不去实现，让继承它的子类去实现，每一个子类有不同的表现 - 抽象类
- 抽象类时提供其他类继承的基类，不能直接被实例化
- 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现，并且必须在继承类中实现
- abstract抽象方法只能在抽象类中，否则报错
- 抽象类和抽象方法用来定义标准（供继承类实现的标准）
接口
待更新命名空间
- 命名空间
- 在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的类、函数、接口等放置到命名空间内
- 同java的包、.Net的命名空间一样，Typescropt的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export向外暴露
- 命名空间和模块的区别
- 命名空间：内部模块，主要用于组织代码，避免命名冲突
- 模块：侧重代码服用，一个模块里可能包含多个命名空间
装饰器
修饰器是js过去几年中js最大的成就之一，现已是ES7的标准特性
- 装饰器
装饰器是一种特殊类型的声明，他能被附加到类、方法、属性或参数上，可以修改类的行为。
通俗的讲：装饰器就是一个方法，可以注入到类、方法、属性和参数上来扩展类、方法、属性、参数的功能 - 常见装饰器
- 类装饰器
- 普通装饰器无法传参
- 类装饰器，在类声明之前被声明（紧靠着类声明）
function addClass(params: any) {
console.log(params); // params 为当前类
params.prototype.name = '我是重定义的name';
params.prototype.getClass = () => {
return this.name;
}
}
@addClass
class Animal {
public name: string = '我是固有的name';
constractor() {
}
}
let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name- 装饰器工厂
- 带参数的装饰器
// 例子1（重写属性）
function addClass(params: any) {
console.log(params); // params 为传入的参数
return (target: any) => {
console.log(params); // params 为传入的参数
console.log(target); // target 列的原型
target.name = '我是重定义的name';
}
}
@addClass('我是重定义的name')
class Animal {
public name: string = '我是固有的name';
constractor() {
}
}
let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name
// 例子2（重载方法）
function addClass(params: any) {
console.log(params); // params 为传入的参数
return class extends Animal {
console.log(params); // params 为传入的参数
console.log(target); // target 列的原型
eat() {
this.name = '狗';
console.log(this.name + '喜欢吃鱼')
}
}
}
@addClass('我是重定义的name')
class Animal {
public name: string = '猫';
constractor() {
}
eat() {
console.log(this.name + '喜欢吃鱼')
}
}
let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼- 属性装饰器
接收两个参数
- 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
- 类的属性
function addProperty(params: any) {
return function (target:any, attr:any) {
console.log(target); // 输出：类的原型
console.log(attr); // 输出：类的属性，本例输出：'name'
target[attr] = params;
}
}
class Animal {
@addProperty('狗')
public name: string = '猫';
constractor() {
}
eat() {
console.log(this.name + '喜欢吃鱼')
}
}
let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼- 方法装饰器
他会被应用到方法的属性描述上，可以用来监听、修改、替换方法定义，接收三个参数：
- 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
- 方法名称
- 方法的属性的描述
function addMethod(params: any) {
return function (target:any, methodName:any, methodDesc) {
console.log(target); // 输出：类的原型
console.log(methodName); // 输出：方法名称，本例输出：'eat'
console.log(methodDesc); // 输出：方法的属性的描述，本例输出：eat方法的描述
target['name'] = params;
// 修改装饰器的方法，如修改传入的参数类型都改为string型
let oldMethod = methodDesc.value; // 保存原class类中的方法
// 修改当前方法
methodDesc.value = function(...arg:any) {
console.log(arg); // [111, 'abc']
arg.map((val) => {
return String(val);
})
console.log(arg); // ['111', 'abc']
// 使用老方法
oldMethod.apply(this, arg); // this:把当前方法传进去，arg把参数传进去。 表示在本方法中调用老方法
}
}
}
class Animal {
public name: string = '猫';
constractor() {
}
@addMethod('狗')
eat() {
console.log(this.name + '喜欢吃鱼')
}
}
let animal:any = new Animal();
animal.eat(); // 输出：[111, 'abc'] ['111', 'abc'] 狗喜欢吃鱼- 方法参数装饰器
使用时可以为类的原型添加一些元素数据，接收三个参数：
- 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
- 方法名称
- 参数在方法参数中的索引
function methodParam(params: any) {
return function (target:any, methodName:any, paramIndex:number) {
console.log(target); // 输出：类的原型
console.log(methodName); // 输出：方法名称，本例输出：'eat'
console.log(paramIndex); // 输出：参数在方法参数中的索引，本例输出：0
target['name'] = params;
}
}
class Animal {
public name: string = '猫';
constractor() {
}
eat(@methodParam('狗') name) {
console.log((name || this.name) + '喜欢吃鱼')
}
}
let animal:any = new Animal();
animal.eat(); // 输出：类的原型 eat 0 狗喜欢吃鱼- 装饰器执行顺序
- 属性装饰器 > 方法装饰器 > 方法参数装饰器 > 类装饰器
- 如果有多个同类型装饰器，则先执行后面的
@addClass1
@addClass2
class Animal {
@addProperty1()
@addProperty2()
public name: string | undefined
constructor() {}
@addMethod1()
@addMethod2()
eat(@methodParam1() name:string, @methodParams2() color:string) {
}
}
/**
* 上例执行顺序为：@addProperty2 > @addProperty1 > @addMethod2 > @addMethod1 > @methodParams2 > @methodParams1 > @addClass2 > @addClass1
* /
typescript中的数据类型
typescript为了使代码编写更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了如下数据类型：
- boolean 布尔型
- number 数值型
- string 字符串型
- array 数组型
- tuple 元组类型
- enum 枚举类型
- any 任意类型
- null
- undefined
- void类型
- never型：是其他类型（null 和 undefined）的子类型，代表从不会出现的值。这代表声明never的变量只能被never类型赋值
函数的写法
- 三点运算符 接受新传过来的值
// 写法一
function sum(...num:number[]):number {
for (let i = 0; i < num.length; i++) {
sum+=num[i];
}
return sum;
}
sum(1,2,3,4,); // 输出10
// 写法二
function sum(a:number, b:number, ...num:number[]):number {
let sum = a +b;
for (let i = 0; i < num.length; i++) {
sum+=num[i];
}
return sum;
}
sum(1,2,3,4); // 输出10重载
1.函数重载
- java中方法的重载：指两个或两个以上的同名函数，由于参数不一样，出出现函数重载的情况
- ts中的重载：通过为同一个函数提供多个不同类型的参数，来实现多种功能目的
- ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数
2.ts函数重载
- ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数 ,但ts则不会
function getResult(str:string):string;
function getResult(str:number):number;
function getResult(str:any):any {
if (typeof str === 'string') {
console.log('传参为string型');
} else {
console.log('传参为number型')
}
}
getResult('这是string型');
getResult(123);
getResult(true); //错误写法，因为在方法重载中没有找到可以匹配boolean型的函数说明：上面例子中function getResult(str:any):any {}并不是重载的一部分
typescript类说明
- typescript 定义类时，给我们提供了三种修饰符
- public ：公有。 在当前类、子类、外面都可以访问
- protected： 保护。 在当前类、子类可以范围，外面不可以访问
- private ： 私有。 在当前类可以范围，子类、外面不可以访问
属性如果不加修饰符，那默认为：public
- static
不需要实例化，可直接调用 - 多态
定义：父类定义了一个方案，但不去实现，让继承它的子类去实现，每一个子类有不同的表现 - 抽象类
- 抽象类时提供其他类继承的基类，不能直接被实例化
- 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现，并且必须在继承类中实现
- abstract抽象方法只能在抽象类中，否则报错
- 抽象类和抽象方法用来定义标准（供继承类实现的标准）
接口
待更新命名空间
- 命名空间
- 在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的类、函数、接口等放置到命名空间内
- 同java的包、.Net的命名空间一样，Typescropt的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export向外暴露
- 命名空间和模块的区别
- 命名空间：内部模块，主要用于组织代码，避免命名冲突
- 模块：侧重代码服用，一个模块里可能包含多个命名空间
装饰器
修饰器是js过去几年中js最大的成就之一，现已是ES7的标准特性
- 装饰器
装饰器是一种特殊类型的声明，他能被附加到类、方法、属性或参数上，可以修改类的行为。
通俗的讲：装饰器就是一个方法，可以注入到类、方法、属性和参数上来扩展类、方法、属性、参数的功能 - 常见装饰器
- 类装饰器
- 普通装饰器无法传参
- 类装饰器，在类声明之前被声明（紧靠着类声明）
function addClass(params: any) {
console.log(params); // params 为当前类
params.prototype.name = '我是重定义的name';
params.prototype.getClass = () => {
return this.name;
}
}
@addClass
class Animal {
public name: string = '我是固有的name';
constractor() {
}
}
let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name- 装饰器工厂
- 带参数的装饰器
// 例子1（重写属性）
function addClass(params: any) {
console.log(params); // params 为传入的参数
return (target: any) => {
console.log(params); // params 为传入的参数
console.log(target); // target 列的原型
target.name = '我是重定义的name';
}
}
@addClass('我是重定义的name')
class Animal {
public name: string = '我是固有的name';
constractor() {
}
}
let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name
// 例子2（重载方法）
function addClass(params: any) {
console.log(params); // params 为传入的参数
return class extends Animal {
console.log(params); // params 为传入的参数
console.log(target); // target 列的原型
eat() {
this.name = '狗';
console.log(this.name + '喜欢吃鱼')
}
}
}
@addClass('我是重定义的name')
class Animal {
public name: string = '猫';
constractor() {
}
eat() {
console.log(this.name + '喜欢吃鱼')
}
}
let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼- 属性装饰器
接收两个参数
- 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
- 类的属性
function addProperty(params: any) {
return function (target:any, attr:any) {
console.log(target); // 输出：类的原型
console.log(attr); // 输出：类的属性，本例输出：'name'
target[attr] = params;
}
}
class Animal {
@addProperty('狗')
public name: string = '猫';
constractor() {
}
eat() {
console.log(this.name + '喜欢吃鱼')
}
}
let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼- 方法装饰器
他会被应用到方法的属性描述上，可以用来监听、修改、替换方法定义，接收三个参数：
- 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
- 方法名称
- 方法的属性的描述
function addMethod(params: any) {
return function (target:any, methodName:any, methodDesc) {
console.log(target); // 输出：类的原型
console.log(methodName); // 输出：方法名称，本例输出：'eat'
console.log(methodDesc); // 输出：方法的属性的描述，本例输出：eat方法的描述
target['name'] = params;
// 修改装饰器的方法，如修改传入的参数类型都改为string型
let oldMethod = methodDesc.value; // 保存原class类中的方法
// 修改当前方法
methodDesc.value = function(...arg:any) {
console.log(arg); // [111, 'abc']
arg.map((val) => {
return String(val);
})
console.log(arg); // ['111', 'abc']
// 使用老方法
oldMethod.apply(this, arg); // this:把当前方法传进去，arg把参数传进去。 表示在本方法中调用老方法
}
}
}
class Animal {
public name: string = '猫';
constractor() {
}
@addMethod('狗')
eat() {
console.log(this.name + '喜欢吃鱼')
}
}
let animal:any = new Animal();
animal.eat(); // 输出：[111, 'abc'] ['111', 'abc'] 狗喜欢吃鱼- 方法参数装饰器
使用时可以为类的原型添加一些元素数据，接收三个参数：
- 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
- 方法名称
- 参数在方法参数中的索引
function methodParam(params: any) {
return function (target:any, methodName:any, paramIndex:number) {
console.log(target); // 输出：类的原型
console.log(methodName); // 输出：方法名称，本例输出：'eat'
console.log(paramIndex); // 输出：参数在方法参数中的索引，本例输出：0
target['name'] = params;
}
}
class Animal {
public name: string = '猫';
constractor() {
}
eat(@methodParam('狗') name) {
console.log((name || this.name) + '喜欢吃鱼')
}
}
let animal:any = new Animal();
animal.eat(); // 输出：类的原型 eat 0 狗喜欢吃鱼- 装饰器执行顺序
- 属性装饰器 > 方法装饰器 > 方法参数装饰器 > 类装饰器
- 如果有多个同类型装饰器，则先执行后面的
@addClass1
@addClass2
class Animal {
@addProperty1()
@addProperty2()
public name: string | undefined
constructor() {}
@addMethod1()
@addMethod2()
eat(@methodParam1() name:string, @methodParams2() color:string) {
}
}
/**
* 上例执行顺序为：@addProperty2 > @addProperty1 > @addMethod2 > @addMethod1 > @methodParams2 > @methodParams1 > @addClass2 > @addClass1
* /