一、TypeScript简介
- TypeScript是JavaScript的一个超集,主要提供了类型系统和对ES6的支持。
- 全局安装命令:cnpm install -g typescript
- 编译文件:tsc 文件名
二、TypeScript数据类型
- 原始数据类型:string、number、boolean、null、undefined、enum、symbol 、any。
- 空值一般采用void来表示,void可以表示变量,也可以表示函数无返回值。
- never类型,从来不会用到的值
var num:number = 123;
var arr:any[] = [‘123’,34,true];
三、TypeScript函数
- 定义函数
(1)函数声明法
function run():string{
return 'run';
}
(2)匿名函数法
var fun2 = function():number{
return 123;
}
- 方法传参
function getInfo(name:string,age:number):string{
return '${name}--${age}';
}
- 可选参数
function getInfo(name:string,age?:number):string{//age是可选参数,可选参数必须放在最后
return '${name}--${age}';
}
- 默认参数
function getInfo(name:string,age:number=20):string{//age默认是20,也可以叫可选参数
return '${name}--${age}';
}
- 剩余参数
function sum(...result:number[]):number{//实参可以是任意个,都会传到这个数组中
}
- 函数重载
- 箭头函数
setTimeout(()=>{
…
},1000);
四、TypeScript类
- 定义类
class Person{
name:string;
constructor(n:string){
this.name = n;
}
run:void{
alert(this.name);
}
}
var p = new Person('张三');
p.run();
- 继承:extends+super
class Person{
name:string;
constructor(name:string){
this.name = name;
}
run():string{
return '${this.name}在运动';
}
}
class Web extends Person{
constructor(name:string){//通过构造函数继承
super(name);
}
}
var w = new Web('李四');
w.run();
- 类里面的修饰符
(1)public:在类里面、子类、类外面都可以访问(默认是public)
(2)protected:在本类和子类中可以访问
(3)private:在本类中可以访问 - 静态方法
class Person{
name:string;
constructor(name:string){
this.name = name;
}
run():string{//实例方法:实例化之后才能调用
return '${this.name}在运动';
}
static print(){//静态方法:通过类名就可以直接调用,不能调用类里面的属性,除非属性是static类型
alert("print方法");
}
}
- 多态:父类定义一个方法不实现,让继承它的子类去实现,每个子类有不同的表现。
- 抽象类/方法
(1)关键字:abstract ,用来定义一种标准
(2)抽象类不能直接实例化,子类必须实现抽象类的方法。
五、TypeScript接口
- 接口是行为和对象的规范
interface FullName{
firstName:string;
lastName:string;
}
function Name(name:FullName){//必须传入接口中定义的属性
console.log(firstName+lastName);
}
var obj={
age=20,
firstName:'张',
lastName:'三'
};
Name(obj);
- 接口:可选属性
interface FullName{
firstName:string;
lastName?:string;//可选属性,此参数可用可不用
}
- 函数类型接口:对方法传入的参数和返回值进行约束。
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
//模拟操作
return key+value;
}
console.log(md5('name','zhangsan'));
- 可索引接口:数组、对象的约束
interface UserArr{//对接口的约束
[index:number]:string//要求数组元素必须是string类型,改成any即可传任意类型
}
var arr:UserArr=['aaa','bbb'];
-----------------------------------------------------
interface UserObj{//对对象的约束
[index:number]:string
}
var arr:UserObj={name:'张三'};
- 类类型接口:对类的约束,与抽象类有点类似
interface Animal{
name:string;
eat(str:string):void;
}
- 接口扩展
interface Animal{
eat():void;
}
interface Person extends Animal{
work():void;
}
class Web implements Person{//该类必须实现上面两个接口中的所有方法,因为Person接口继承了Animal接口
public name:string;
constructor(name:string){
this.name = name;
}
eat(){
console.log("hahah");
}
work(){
console.log("hahhahahah");
}
}
六、泛型
- 泛型函数
function getData<T>(value:T):T{
return value;
}
getData<number>(123);
- 泛型类
class MinClass<T>{
public list:T[]=[];
add(value:T):void{
this.lish.push(value);
}
min():T{
var minNum = this.list[0];
for(var i=0;i<this.list.length;i++){
if(this.list[i]<minNum){
minNum = this.list[i];
}
}
return minNum;
}
}
- 泛型接口
interface ConfigFn{
<T>(value:T):T;
}
var getData:ConfigFn = function<T>(value:T):T{
return value;
}
getData<string>('张三');
interface ConfigFn<T>{
(value:T):T;
}
function getData<T>(value:T):T{
return value;
}
var myGetData:ConfigFn<string> = getData;
myGetData('20');
七、模块
- 暴露模块:export
- 导入模块:import { } from ‘./modules/db’
八、命名空间 - namespace A{}关键字可以使花括号里的代码私有化,需要通过export暴露出来才能供外部使用,作用是避免命名冲突。
九、装饰器 - 定义:装饰器是一种特殊类型的声明,能够附加到类声明、方法、属性或参数上,可以修改类的行为。装饰器是js最大成就之一,已是es7标准特性之一。
- 装饰器类型:普通装饰器(无法传参)、装饰器工厂(可以传参)。
- 类装饰器
(1)类装饰器:普通装饰器
function logClass(params:any){ //装饰器
console.log(params);//params就是当前类
params.prototype.apiUp = 'xxx';//扩展一个属性
params.prototype.run = function(){
console.log("我是动态添加的run方法")
}
}
@logClass //调用装饰器
class HttpClient{
constructor(){
}
getData(){
}
}
var http:any = new HttpClient();
console.log(http.apiUp);//这是装饰器里动态扩展的属性,会打印'xxx'
(2)类装饰器:装饰器工厂(可传参)
function logClass(params:any){ //装饰器
return function(target:any){
console.log(target); //target表示当前类
console.log(params); //params表示传进来的参数,此处输出'hello'
target.prototype.apiUp = params;//扩展一个属性
}
}
@logClass('hello') //调用装饰器
class HttpClient{
constructor(){
}
getData(){
}
}
(3)类装饰器:修改构造函数
function logClass(target:any){ //装饰器
return class extends target{
apiUrl:any="我是修改后的数据";
getData(){
console.log(this.apiUrl);
}
}
}
@logClass //调用装饰器
class HttpClient{
public apiUrl:string|undefined;
constructor(){
this.apiUrl="我是构造函数里的url";
}
getData(){
console.log(this.apiUrl);
}
}
- 属性装饰器
function logProperty(params:any){
return function(target:any,attr:any){
console.log(target);//target是类的原型对象
console.log(attr);//attr是属性名称
target.attr = "aaaa";//修改属性值
}
}
@logClass('xxxx') //调用装饰器
class HttpClient{
@logProperty('http:www.baidu.com')
public apiUrl:string|undefined;
constructor(){
}
getData(){
}
}
- 方法装饰器
function get(params:any){
return function(target:any,methodName:any,desc:any){
console.log(desc.value);//当前装饰的方法
target.apiUrl='xxx';//扩展一个属性
target.run=function(){//扩展一个方法
console.log("run");
}
}
}
class HttpClient{
public apiUrl:string|undefined;
constructor(){
}
@get("http://www.baidu.com")//末尾不能加分号
getData(){
}
}
- 方法参数装饰器
function logParams(params:any){
return function(target:any,methodName:any,paramsIndex){
console.log(params);//接收传过来的参数,此处打印'xxx'
console.log(target);//原型对象
console.log(methodName);//打印getData,
console.log(paramsIndex);//打印0
}
}
class HttpClient{
public apiUrl:string|undefined;
constructor(){
}
getData(@logParams('xxxx') uuid:any){
console.log(uuid);
}
}
- 各种装饰器的执行顺序:属性装饰器->方法装饰器->方法参数装饰器(如果有多个,从后往前执行)->类装饰器(如果有多个,从下往上执行)