ts学习(一)

秒速五厘米 2023-01-04 10:29 308阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.ts认识
 *  2.ts优势
 *  3.TypeScript 的知识面
 *  4.ts的安装
 *  5.ts用法--类型定义+接口定义使用

--------------------

# 1.ts认识 #

TypeScript 是一种由微软开发的自由开源的编程语言，他是JavaScript的一个超集，扩展了JavaScript的语法，主要提供了类型系统和对 ES6 的支持

# 2.ts优势 #

TypeScript 的优势  
强大的IDE支持：体现在三个特性上，1.类型检查，在TS中允许你为变量指定类型。2.语法提示。3.重构。  
Angular2、vue3的开发语言

# 3.TypeScript 的知识面 #

有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端开发可能不是很熟悉的知识点

接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。  
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性  
类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

# 4.ts的安装 #

**TypeScript 的命令行工具安装方法**  
npm install -g typescript  
**查看版本**  
tsc -v  
**编译一个 TypeScript 文件**  
tsc xxx.ts

# 5.ts用法–类型定义+接口定义使用 #

window.onload = function () { 
        //ts用法
        let num: number = 3;
        let str: string = '123';
        let flag: boolean = false;
        let a: null = null;
        let b: undefined = undefined;
    
        //类型定义后，不允许类型改变
        // num = '123'; //error
    
        //任意值(any) 用来表示允许赋 值为任意类型
        let gx: any = 'hhaha';
        gx = 123;
        gx = false;
    
        //变量如果在声明的时候，未指定其类型，会被识别为任意值
        var gx1;  //未指定其类型，会被识别为任意值
        gx1 = 123;
        gx1 = 'xixix';
        gx1 = false;
    
        //可以声明联合类型 可以为多种类型中的一种
        let gx2: number | string;
        gx2 = '123';
        gx2 = 123;
        // gx2 = false; //error 不可以赋值其他类型
    
    
        //数组 有多种定义方式
        //最简单的方式 类型+方括号 来表示数组
        let arr: number[] = [1, 2, 3, 4, 5];  //声明数值型数组,数组中只可以存放数字
        let arr2: string[] = ['1', '2', '3'];
        let arr3: any[] = [1, '2', false, null, [1, 2]]; //任意类型数组,可以存放任意类型\
    
    
        //对象的类型 —— 接口
        //接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
        //规范
        //接口首字母大写
        interface Person { 
            name: string,
            age: number
        }
    
        //对象受到接口的约束
        let gx3: Person = { 
            name: 'gx',
            age: 18
        }
    
        //定义的变量比接口少了属性是否允许 ——不允许
        // let gx4:Person = { //error
        // name:'gx',
    
        // }
    
        //定义的变量比接口多了属性是否允许 ——不允许
        // let gx5:Person = { //error
        // name:'gx',
        // age:18,
        // sex:'man'
        // }
    
        //可选属性 希望接口中有可选属性 (添加?)
        interface Person2 { 
            name: string,
            age?: number
        }
        let gx6: Person2 = { 
            name: 'gx',
        }
        let gx7: Person2 = { 
            name: 'gx',
            age: 18
        }
    
        //可选属性只针对于当前设置的属性，仍然不能添加其它属性
        // let gx8: Person2 = { //error
        // name: 'gx',
        // age: 18,
        // sex: 'man'
        // }
    
        //任意属性 接口中添加一个任意的属性
        interface Person3 { 
            name: string,
            age: number,
            [propName: string]: any  //添加一个字符串型的任意属性
        }
        //注意：写入了任意属性[propName: string] 那么确定属性和可选属性必须是它的子属性
        let gx8: Person3 = { 
            name: 'gx',
            age: 18,
            sex: 'man'
        }
    
        //函数类型 输入和输出的约束
        //函数声明
        function f1(x: number, y: number): number {    //(x: number,y: number) 输入约束 : number 输出的约束
            return x + y
        }
        f1(1, 1);
        //函数表达式
        var f2 = function (x: number, y: number): number { 
            return x + y
        };
        //能否允许传多、少参数--不允许
        function f3(x: number, y: number): number { 
            return x + y
        }
        //f3(1,1,5);
        //f3(1);
    
        //参数默认值
        function f4(x: number = 5, y: number): number { 
            return x + y
        };
        //参数可选 
        //注意！！！ 可选参数必须接在必需参数后面
        //换句话说：可选 参数后面不允许再出现必需参数
        function f5(x: number = 5, y?: number): number { 
            if (y) { 
                return x + y;
            } else { 
                return x;
            }
        };
        f5(10);
        //f5(10,10); //OK
    }

编译成js

window.onload = function () { 
        //ts用法
        var num = 3;
        var str = '123';
        var flag = false;
        var a = null;
        var b = undefined;
        //类型定义后，不允许类型改变
        // num = '123'; //error
        //任意值(any) 用来表示允许赋 值为任意类型
        var gx = 'hhaha';
        gx = 123;
        gx = false;
        //变量如果在声明的时候，未指定其类型，会被识别为任意值
        var gx1; //未指定其类型，会被识别为任意值
        gx1 = 123;
        gx1 = 'xixix';
        gx1 = false;
        //可以声明联合类型 可以为多种类型中的一种
        var gx2;
        gx2 = '123';
        gx2 = 123;
        // gx2 = false; //error 不可以赋值其他类型
        //数组 有多种定义方式
        //最简单的方式 类型+方括号 来表示数组
        var arr = [1, 2, 3, 4, 5]; //声明数值型数组,数组中只可以存放数字
        var arr2 = ['1', '2', '3'];
        var arr3 = [1, '2', false, null, [1, 2]]; //任意类型数组,可以存放任意类型\
        //对象受到接口的约束
        var gx3 = { 
            name: 'gx',
            age: 18
        };
        var gx6 = { 
            name: 'gx'
        };
        var gx7 = { 
            name: 'gx',
            age: 18
        };
        //注意：写入了任意属性[propName: string] 那么确定属性和可选属性必须是它的子属性
        var gx8 = { 
            name: 'gx',
            age: 18,
            sex: 'man'
        };
        //函数类型 输入和输出的约束
        //函数声明
        function f1(x, y) { 
            return x + y;
        }
        f1(1, 1);
        //函数表达式
        var f2 = function (x, y) { 
            return x + y;
        };
        //能否允许传多、少参数--不允许
        function f3(x, y) { 
            return x + y;
        }
        //f3(1,1,5);
        //f3(1);
        //参数默认值
        function f4(x, y) { 
            if (x === void 0) {  x = 5; }
            return x + y;
        }
        ;
        //参数可选 
        //注意！！！ 可选参数必须接在必需参数后面
        //换句话说：可选 参数后面不允许再出现必需参数
        function f5(x, y) { 
            if (x === void 0) {  x = 5; }
            if (y) { 
                return x + y;
            }
            else { 
                return x;
            }
        }
        ;
        f5(10);
        //f5(10,10); //OK
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

相关 TS学习笔记（一）：基本类型

TypeScript 是 JaveScript 类型的超集，它可以编译成纯 JavaScript，TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行，并且是

刺骨的言语ヽ痛彻心扉/ 2023年06月25日 08:10/ 0 赞/ 35 阅读

相关【ts】ts学习笔记

一、函数重载 // 函数重载 function add(...rest: number[]):number; function add(...re

系统管理员/ 2023年02月17日 14:52/ 0 赞/ 254 阅读

相关 ts学习(三)

故心故心故心故心小故冲啊 -------------------- 文章目录 1.泛型 2.枚举 3.元组 4.汽车实战封装 -----

朴灿烈づ我的快乐病毒、/ 2023年01月05日 04:00/ 0 赞/ 238 阅读

相关 ts学习(二)

故心故心故心故心小故冲啊 -------------------- 文章目录 1.类型别名 2.class类 3.类的继承 4.修饰符

分手后的思念是犯贱/ 2023年01月04日 14:34/ 0 赞/ 283 阅读

相关 ts学习(一)

故心故心故心故心小故冲啊 -------------------- 文章目录 1.ts认识 2.ts优势 3.TypeScript 的知识面

秒速五厘米/ 2023年01月04日 10:29/ 0 赞/ 309 阅读

相关 TS学习总结

（1）编译开发TS可以使用 ![在这里插入图片描述][20201209202825845.png] （2）数据类型数据类型主要作用是：方便数据维护和数据校验；

电玩女神/ 2022年12月27日 08:55/ 0 赞/ 337 阅读

相关 ts学习-4

> 1.ts中的类和类的继承 //ts中的类定义 class Person{ name:string;//属性前面省略了public关键字

快来打我*/ 2022年12月19日 01:20/ 0 赞/ 299 阅读

相关 Ts 学习记录

[https://blog.csdn.net/THcoding\_Cat/article/details/115421754][https_blog.csdn.net_THc

Myth丶恋晨/ 2022年10月13日 01:56/ 0 赞/ 263 阅读

相关 TS(一)

基础类型布尔值(boolean) 数字,浮点数(number) 字符串(string),模板字符串数组，两种定义方式，泛型Array<>和直接

迷南。/ 2022年05月16日 00:15/ 0 赞/ 333 阅读

相关 TS学习笔记----(一)基础类型

布尔值: boolean let isDone: boolean = false; 数字: number 和JavaScript一样，TS里的所有数

小鱼儿/ 2021年12月14日 10:43/ 0 赞/ 416 阅读