TypeScript/ts知识总结

最新推荐文章于 2023-06-30 11:44:43 发布

Supreme_lwl

最新推荐文章于 2023-06-30 11:44:43 发布

阅读量380

点赞数

分类专栏： TypeScript 前端

本文链接：https://blog.csdn.net/qq_42515626/article/details/104317894

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

TypeScript

1 篇文章 0 订阅

订阅专栏

一、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);
    }
}

各种装饰器的执行顺序：属性装饰器->方法装饰器->方法参数装饰器（如果有多个，从后往前执行）->类装饰器（如果有多个，从下往上执行）

Supreme_lwl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TypeScript/ts知识总结

一、TypeScript简介TypeScript是JavaScript的一个超集，主要提供了类型系统和对ES6的支持。全局安装命令：cnpm install -g typescript编译文件：tsc 文件名二、TypeScript数据类型原始数据类型：string、number、boolean、null、undefined、enum、symbol 、any。空值一般采用void...
复制链接

扫一扫