01typescript

第一章 TypeScript4简介

1.1、TypeScript4简介
TypeScript 是由微软开发的一款开源的编程语言,TypeScript 是 Javascript 的超集,遵循最新的 ES6、ES5 规范,TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言,可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广,谷歌的 angular2.x+ 就是基于 Typescript 语法,最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法。

一张图描述 TypeScript 和 JavaScript 之前的关系:
image-20210627084826014

命令行输入tsc 01hello.ts来编译这个ts文件

数据类型
typescript最大的优点就是类型检查,可以帮你检查你定义的类型和赋值的类型
// 在ts中,定义isFlag为true,为布尔类型boolean
// 在变量名后加冒号和类型,如 :boolean
let isFlag:boolean = true
// 重新赋值到字符串类型会报错
isFlag = “hello swr”

// 数组
// 这是一个字符串数组,只能往里面放字符串,写别的类型会报错
let persion:string[] = ['poetries', 'jing']
// 另一个写法 
let persions:Array<string> = ['poetries', 'jing']

// 如果数组里放对象呢
let persionObject:Array<object> = [{name:'poetries',age:22}]
let persionObjects:object[] = [{name:'poetries',age:22}]

// 在数组中放string、number、boolean、object
let arr:Array<number|object|string|boolean> = [22, 'test', true, {name:'poetries'}]

// 数组中放什么都可以
let arrAny:Array<any> = ['test',12,false]

元组类型tuple
元组类型必须一一对应上
元组类型是一个不可变的数组,长度、类型是不可变的
let per :[string,number,object] = [‘poetries’,22,{love: ‘coding’}]

枚举类型enum
什么是枚举?枚举有点类似一一列举,一个一个数出来。一般用于值是某几个固定的值
// 枚举类型enum
enum sex {
BOY=‘男孩’,
GIRL=‘女孩’
}
console.log(sex)
比如我们实际项目中,特别是商城类,订单会存在很多状态流转,那么非常适合用枚举

enum orderStatus {
WAIT_FOR_PAY = “待支付”,
UNDELIVERED = “完成支付,待发货”,
DELIVERED = “已发货”,
COMPLETED = “已确认收货”
}
如果我们直接写对象的键值对方式,是可以在外部修改这个值的,而我们通过enum则不能修改定义好的值了

void类型
void表示没有任何类型,一般是定义函数没有返回值
// void 不能再函数里写return

函数
函数参数处理
// 函数是这样定义的
// 形参和实参一一对应,完全一样
function sayHello(name:string,age:number):void {
console.log(‘hello’, name, age)
}
sayHello(‘poetries’,22)
可选参数
// 可选参数,用 ? 处理,只能放在后面
function sayHelloToYou(name:string,age?:number):void {
console.log(‘hello’, name, age)
}
sayHelloToYou(‘poetries’)
默认参数
function ajax(url:string,method:string = ‘GET’) {
console.log(url, method)
}
// 那么如何设置剩余参数呢?可以利用扩展运算符
function sum(…args:Array):number {
return eval(args.join("+"))
}
let total:number = sum(1,2,3,4,5)
console.log(total)


如何定义一个类?

接口:
接口规范对象
//假设我们需要获取用户信息
// 我们通过这样的方式 规范必须传name和age的值
function getUserInfo(user:{name:string,age:number}) {
console.log(user.name,user.age)
}
getUserInfo({name: ‘poetries’, age: 22})
另外一个方法也需要这个规范该如何?
1.可以把 {name:string,age:number} 抽离出来,让他复用
把需要复用的规范,写到接口,关键字 interface 中
例子:interface infoInterface { name:string,age:number,city?:string; } (添加了一个可以不传参的)
接口规范函数
// 对一个函数的参数和返回值进行规范
interface mytotal {
// 左侧是函数的参数,右侧是函数的返回类型
(a:number,b:number):number;
}
let totalSum:mytotal = function(a:number,b:number):number {
return a + b
}
console.log(totalSum(10, 20))
接口规范数组
interface userInterface {
// index为数组索引 类型是number
// 右边是数组里为字符串的数组成员
[index: number]: string;
}
let arrTest: userInterface = [‘poetries’, ‘静观流叶’]
console.log(arrTest)
接口规范类
// 1.首先实现一个接口
interface Animal2 {
// 这个类必须有name
name:string;

        // 这个类必须有eat方法
        eat(any:string):void;
    }
    // 关键字implements实现
    // 因为接口是抽象的,需要通过子类 实现它
    class Person6 implements Animal2 {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
        eat(any:string):void {
            console.log(`吃`+any)
        }
    }

    // 2.如果想遵循多个接口
    interface Animal3 {
        name: string;
        eat(any: string):void;
    }
    // 新增一个接口
    interface Animal4 {
        sleep():void;
    }
    // 可以在implements后面通过逗号添加和java一样
    class Person7 implements Animal3,Animal4 {
        name: string;
        constructor(name:string){
            this.name = name;
        }
        eat(any:string) {
            console.log(`吃`+any)
        }
        sleep() {
            console.log('睡觉')
        }
    }

    eat(any:string) {
            console.log(`吃`+any)
        }
        sleep() {
            console.log('睡觉')
        }
    }

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…