第一章 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 之前的关系：
命令行输入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('睡觉')
}
}
