typescript实践应用

最新推荐文章于 2024-07-15 16:21:12 发布

qq_1509364058

最新推荐文章于 2024-07-15 16:21:12 发布

阅读量601

点赞数

分类专栏： typescript 文章标签： typescript ts实战应用

本文链接：https://blog.csdn.net/qq_38109249/article/details/95075466

版权

typescript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

TypeScript 总览

TypeScript 总览

新的改变

TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。
TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。
目前TypeScript 已在Nodejs 、Angualr、React、Vue这些框架中广泛应用。
TypeScript是为大型应用之开发而设计，作为一个前端工程师，TypeScript目前是必备技能

vscode配置自动编译

第一步 npm install -g typescript 全局安装 typescript
第二步 tsc --inti 生成tsconfig.json 改 “outDir”: “./js”,
第三步任务 - 运行任务监视tsconfig.json

typeScript中的数据类型

typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型

    布尔类型（boolean）
    数字类型（number）
    字符串类型(string)
    数组类型（array）
    元组类型（tuple）  
    枚举类型（enum）
    任意类型（any）
    null 和 undefined
    void类型      
    never类型

类型声明 案例.

// 布尔类型（boolean）
var flag: boolean = true;
flag = 123;   //错误
flag = false; //正确

// 数字类型（number）
var num: number = 123;
num = 'str';  //错误
num = 456;    //正确

// 字符串类型（string）
var str: string = 'this is ts';
str = true;    //错误
str = 'hahah'; //正确

// 数组类型（array）  ts中定义数组有两种方式
1. var arr1: number[] = [11, 22, 33];
2. var arr2: Array<number> = [11, 22, 33];

// 元组类型（tuple）  属于数组的一种
var arr: [number, string] = [123, 'this is ts'];

// 枚举类型（enum）
enum Color { bule, red = 5, 'orange', 'yellow' = 4 };
var b: Color = Color.bule,    //0
    r: Color = Color.red,     //5
    o: Color = Color.orange,  //6
    y: Color = Color.yellow;  //4

// 任意类型（any）
var num: any = 123;
    num = 'str';    //可以
    num = true;     //可以

// null 和 undefined  其他（never类型）数据类型的子类型
var num:number | null | undefined
   // num = 123;   123
   num;           //定义没有赋值就是undefined

// void类型 :typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。
//表示方法没有返回任何类型
    function run():void{
        console.log('run')
    }
    run();
//表示有返回值的类型
    function run():number{
        return 123;
    }
    run();

// never类型:是其他类型 （包括 null 和 undefined）的子类型，代表从不会出现的值。
    var a:never;
    //    a=123; //错误的写法
    a=(()=>{
        throw new Error('错误');
    })()

typeScript中的函数

3.1、函数的定义
3.2、可选参数
3.3、默认参数
3.4、剩余参数
3.5、函数重载
3.6、箭头函数  es6

ts函数 案例.

// 3.1、函数的定义
    //ts中定义函数的方法
     //函数声明法
    function Fn():string{   //返回的类型
        return 'run';
    }

    //ts中定义方法传参
    function getInfo(name:string,age:number):string{
        return `${name} -- ${age}`
    }
    console.log(getInfo('zhangsan',20));

    //没有返回值的方法
    function run():void{
        console.log('run')
    }
    run();

// 3.2-3、方法可选参数 + 默认参数
    //注意:可选参数必须配置到参数的最后面
    function getOptional(name:string,add:string='湖南',age?:number):string{
        if(age){
            return `${name} - ${add} - ${age}`
        }else{
            return `${name} - ${add}`
        }
    }
    getOptional('zhangsan')  //可行
    getOptional('zhangsan','怀化',123)  //可行

// 3.4、剩余参数 
    function sum(a:number,b:number,...result:number[]):number{
        var sum=a+b;
        for(var i=0;i<result.length;i++){
            sum+=result[i];  
        }
        return sum;
    }
    sum(1,2,3,4,5,6)

es5中的继承`(扩展)`

//原型链+对象冒充继承
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        alert(this.name + '大大')
    }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
    alert(this.name + '在工作')
}
function Web(name, age) {
    Person.call(this, name, age)
}
Web.prototype = new Person();
var W = new Web('李四', 55);
W.run()

typeScript中的类

4.1 类的定义
4.2 继承
4.3 类里面的修饰符
4.4 静态属性 静态方法
4.5 抽象类 继承 多态

ts类 案例.

//1、ts中定义类：class
class Person {
    name: string;
    constructor(name: string) {   //构造函数   实例化类的时候触发的方法
        this.name = name;
    }
    getName(): string {
        return this.name;
    }
    setName(name: string): void {
        this.name = name;
    }
}
var p = new Person('张三');
p.getName()    //张三
p.setName('李四')
p.getName()    //李四

//2、ts中实现继承  extends、 super
class Person2 {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    run(): string {
        return `我是${this.name}`;
    }
}
//ts中继承的探讨  父类的方法和子类的方法一致  
//在子类中 会先考虑子类的方法
class Web extends Person2 {
    constructor(name: string) {
        /*初始化父类的构造函数*/
        super(name);      //super 的作用就是改变父属性的值 Person.name
    }
}
var w = new Web('王二');
w.run()    //我是王二

// 3 类里面的修饰符  typescript里面定义属性的时候给我们提供了 三种修饰符
/*
    public :公有          在当前类里面、 子类  、类外面都可以访问
    protected：保护类型    在当前类里面、子类里面可以访问 ，在类外部没法访问
    private ：私有         在当前类里面可以访问，子类、类外部都没法访问
    属性如果不加修饰符 默认就是 公有 （public）
*/

class Person3{
    //public :公有          在类里面、 子类  、类外面都可以访问
    //类外部访问公有属性
    public name:string; /*公有属性  子类可继承并使用*/
    //protected：保护类型    在类里面、子类里面可以访问 ，在类外部没法访问
    protected name2:string;  /*保护类型*/
    // private ：私有        在类里面可以访问，子类、类外部都没法访问
    private name3:string;  /*私有*/

    constructor(name:string,name2:string,name3:string){
        this.name = name;
        this.name2 = name2;
        this.name3 = name3;
    }
    run():string{
        return `${this.name}在运动`;
    }
}

// 4 静态属性 静态方法
class Per {
    public name: string;
    public age: number = 20;
    //静态属性
    static sex = '男';
    constructor(name: string) {
        this.name = name;
    }
    run() {   /**实例方法 */
        console.log(`${this.name}在吃饭`)
    }
    work() {
        console.log(`${this.name}在工作`)
    }
    static pring() { /**静态方法 里面没法直接调用类里面的属性*/
        console.log(`print方法` + Per.sex)
    }
}

var p = new Per('张三');
p.run();     //张三在吃饭
Per.pring()  //print方法男  可Per 直接使用

// 5 多态:父类定义一个方法不去实现，让继承它的子类去实现  每一个子类有不同的表现 
//多态属于继承
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(){   //具体吃什么   继承他的类去实现 ，每一个子类的表现不一样
        console.log('吃的方法')
    }
}
class Dog extends Animal{
    constructor(name:string){
        super(name);   //使用super 去改变父类的属性
    }
    eat(){
        return this.name +'狗粮'
    }
}
class Cat extends Animal{
    constructor(name:string){
        super(name);   //使用super 去改变父类的属性
    }
    eat(){
        return this.name +'小鱼'
    }
}
var C = new Cat('汤姆');
var D = new Dog('烧饵块');
console.log(C.eat(),D.eat())  //汤姆小鱼 烧饵块狗粮

typeScript中的接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

5.1 属性类接口
5.2 函数类型接口
5.3 可索引接口
5.4 类类型接口
5.5 接口扩展

ts的接口 案例.

// 1、属性接口     对json的约束
    //ts中定义方法
    function printLabel():void {
        console.log('printLabel');
    }
    printLabel();
    //ts中定义方法传入参数
    function printLabel(label:string):void {
        console.log('printLabel');
    }
    printLabel('hahah');
    //ts中自定义方法传入参数,对json进行约束
    function printLabel(labelInfo:{label:string}):void {
        console.log('printLabel');
    }
    printLabel('hahah'); //错误写法
    printLabel({name:'张三'});  //错误的写法
    printLabel({label:'张三'});  //正确的写法

//对批量方法传入参数进行约束。
// 2 接口：行为和动作的规范，对批量方法进行约束
    //就是传入对象的约束    属性接口
    interface FullName {
        firstName: string;   //注意;结束
        secondName: string;
    }
    function printName(name: FullName) {
        // 必须传入对象  firstName  secondName
        console.log(name.firstName + '--' + name.secondName);
    }
    // printName('1213');  //错误
    var obj = {   /*传入的参数必须包含 firstName  secondName*/
        age: 20,
        firstName: '张',
        secondName: '三'
    };
    printName(obj)

// 3 接口 ：可选属性
    interface FullName{
        firstName:string;
        secondName:string;
    }
    function getName(name:FullName){
        console.log(name)
    }
    //参数的顺序可以不一样
    getName({        
        secondName:'secondName',
        firstName:'firstName'
    })
// 4 类类型接口:对类的约束  和   抽象类抽象有点相似    
    interface Animal{
        name:string;
        eat(str:string):void;
    }
    class Cat implements Animal{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        eat(food:string){
            console.log(this.name+'吃'+food);
        }
    }
    var c=new Cat('小花');
    c.eat('老鼠');

typeScript中的泛型

6.1 泛型的定义
6.2 泛型函数
6.3 泛型类
6.4 泛型接口

泛型：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

通俗理解：泛型就是解决类接口方法的复用性、以及对不特定数据类型的支持(类型校验)

//同时返回 string类型 和number类型       any可以解决这个问题
     function getData(value:any):any{
        return '哈哈哈';
    }
    getData(123);
    getData('str');
//any放弃了类型检查,传入什么 返回什么。比如:传入number 类型必须返回number类型  传入 string类型必须返回string类型
    //传入的参数类型和返回的参数类型可以不一致
    function getData(value:any):any{
        return '哈哈哈';
    }
// 泛型：可以支持不特定的数据类型   要求：传入的参数和返回的参数一直
// T表示泛型，具体什么类型是调用这个方法的时候决定的
    function getData<T>(value:T):T{
        return value;
    }
    getData<number>(123);
    getData<string>('1214231');
    getData<number>('2112');       /*错误的写法*/  
    
// 泛型类：比如有个最小堆算法，需要同时支持返回数字和字符串 a  -  z两种类型。  通过类的泛型来实现
	//类的泛型
	class MinClas<T>{
	    public list:T[]=[];
	    add(value:T):void{
	        this.list.push(value);
	    }
	    min():T{        
	        var minNum=this.list[0];
	        for(var i=0;i<this.list.length;i++){
	            if(minNum>this.list[i]){
	                minNum=this.list[i];
	            }
	        }
	        return minNum;
	    }
	}
	var m1=new MinClas<number>();   /*实例化类 并且制定了类的T代表的类型是number*/
	m1.add(11);
	m1.add(3);
	m1.add(2);
	alert(m1.min())
	var m2=new MinClas<string>();   /*实例化类 并且制定了类的T代表的类型是string*/
	m2.add('c');
	m2.add('a');
	m2.add('v');
	alert(m2.min())

//1、泛型接口
    interface ConfigFn{
        <T>(value:T):T;
    }
    var getData:ConfigFn=function<T>(value:T):T{
        return value;
    }
    getData<string>('张三');
    getData<string>(1243);  //错误

//2、泛型接口
    interface ConfigFn<T>{
        (value:T):T;
    }
    function getData<T>(value:T):T{
        return value;
    }
    var myGetData:ConfigFn<string>=getData;     
    myGetData('20');  /*正确*/
    myGetData(20)  //错误

PS：文章部分内容由于使用性少的可怜就没写入、以上代码复制即可用

参考文档

TypeScript 中文手册:http://www.runoob.com/manual/gitbook/TypeScript/_book/

qq_1509364058

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
typescript实践应用

这里写自定义目录标题TypeScript 总览新的改变vscode配置自动编译typeScript中的数据类型typeScript中的函数**es5中的继承`(扩展)`**typeScript中的类typeScript中的接口typeScript中的泛型TypeScript 总览新的改变TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了J...
复制链接

扫一扫