TypeScript01

1.TypeScript是什么？

        TypeScript 并不是⼀个完全新的语⾔，它是 JavaScript 类型的超集，它可以编译成纯

JavaScript，主要提供了 类型系统 和对 JavaScript 新标准的⽀持。

        动态类型：在运行过程中才能知道类型，比如 js。——>js是弱类型的动态语言。

        静态类型：在编辑的时候就知道类型，比如 java

2.TypeScript优缺点

        2.1 优点：

                ● TypeScript 提供强静态类型

                ● TypeScript 可以更早发现 BUG

                ● TypeScript 增加了代码的可读性和可维护性，⽅便重构

                ● TypeScript ⾮常包容

                ● TypeScript 拥有活跃的社区和丰富的 IDE ⽀持

        2.2 缺点：

                ● 学习成本：需要理解接⼝（Interface）泛型（Generics）类（

Classes）枚举类型（Enum）等前端可能不是很熟悉的概念。

                ● 开发⼯作量：短期可能会增加⼀些开发成本，必须要多写⼀些类型的定义，不过对于⼀个⻓期维护的项⽬，TypeScript 能够减少维护成本。

                ● 可能和⼀些库结合不是很完美。

3.TypeScript和JavaScript的区别：

4.TypeScript 常用类型

        4.1 JS已有类型

                ● 原始类型：number、string、boolean、null、undefined、symbol

                ● 对象类型：object（包括对象、数组、函数等）

        4.2 TS新增类型

                ● 联合类型：接口、元组、枚举、void、any等 

        4.3 举例

                4.3.1 原始类型

const myName: string = 'wangcm'
const age: number = 19
const isLoading: boolean = false
const isNull: null = null
const isSymbol: symbol = Symbol()

                4.3.2 数组类型

const arr: number[] = [1, 2, 3];  //推荐此写法
const arr2: Array = [4, 5, 6]

//元组：用来确定数字中每一项的类型
const position:[number,number]=[1,2]

                4.3.3 联合类型

//联合类型
// |在 TS 中叫联合类型，由两个或多个其他类型组成的类型，表示可以是这些类型
//中的任意⼀种
const arr3: (string | number)[] = [1, 2, 3, 'haha']

//支持多个类型
let testName: (string | number | boolean) = "李四"
testName = 5
testName = true

                4.3.4 类型别名

//类型别名：当同一类型被多次使用时，可以通过类型别名
type typeA=(string|number)[]
let arr4:typeA = [1,2,3,'heihei']
const arr5: typeA = [1, '2']

                4.3.5 函数类型

//函数的类型：包括参数类型和返回值类型
//1.单独定义参数和返回值类型
function sayName(name:string):string{
    console.log(name)
    return name+'ha'
}
function add(a:number,b:number):number{
    return a+b
}
//返回值为Promise类型
function getList(pageNum=1,pageSize=10):Promise{
    return new Promise((resolve, reject) => {
        resolve(10)
    })
}

//2.同时指定参数和返回值类型
// 当函数作为表达式时，可以通过类似于箭头函数形式的语法来为函数添加类型
const sub=(a:number,b:number):number=>a-b
console.log(sub(10,3))

//指定函数类型;类型要一一对应
const sub2:(a:number,b:number)=>number=(a,b)=>a*2-b

                注意：第2种形式只适⽤于函数表达式。函数声明不可⽤

                4.3.6 void类型

//函数void类型,无返回值
function sayHello(name:string):void{
    console.log(name)
}

                4.3.7 对象类型

//对象类型，声明了对象中有哪些变量
type cartType={
    num:number,
    name:string,
    price:number,
    shopId:number
}

let cart:cartType={
    num:1,
    name:"兔子",
    price:399,
    shopId:10
}

                注意：⼀⾏代码指定多个属性类型，必须使⽤ ; 号来分割，换⾏可以去掉 ;

                4.3.8 接口

                        当⼀个对象类型被使⽤多次，⼀般会使⽤接⼝ interface 来定义对象的类型。

                interface 可以通过 extends 关键字来继承。

//接口，接口可以理解为标准，目的：是为了解耦，为了低耦合
//耦合
//TS接口
interface Person{
    name:string
    age:number
    // like?:string   /*加了？就代表非必传属性，没加？代表必传*/
    color:string
    say:(content:string)=>string
}
let zhangsan:Person={
    name:"张三",
    age:18,
    color:"黄",
    say(content):string{
        return this.name+"说："+content
    }
}
console.log(zhangsan.say("你好呀！"))  //张三说：你好呀！

function teaching(teacher:Teacher):void{
    console.log("上课老师的姓名是："+teacher.name)
    console.log(teacher.say("数学..."))
    console.log(teacher.teaching("政治..."))
}

/*interface和type的区别：*/
/*相同点
    都可以给对象指定类型
*/
/*不同点
    interface 只能为对象指定类型
    type 可以为任意类型指定别名
    type 可以使用映射类型，interface不可以
*/

//interface 支持继承
interface Teacher extends Person{
    teaching:(course:string)=>string
}

let lisi:Teacher={
    name:"李四",
    age:25,
    color:"黄",
    say(content):string{
        return this.name+"说："+content
    },
    teaching(course):string{
        return this.name+"上了"+course+"课"
    }
}

teaching(lisi)

                 规范： interface 使⽤⼤驼峰

                4.3.9 类型断言

                有时候咱们会⽐ TS 更加明确⼀个值的类型，此时，可以使⽤ 类型断⾔ 来指定更具体的         类型。

/*类型断言*/
function getLength(params: (number | string | any[])): number {

    //断言它是number类型或者string类型(不论如何先判断它是某种类型)

    // return ( params).length?( params).length:(params+'').length   //类型断言第一种写法
    return (params as string).length ? (params).length : (params + '').length   //类型断言第二种写法

}
console.log(getLength(1000))   //4

                        any[ ]：表示任意类型数组

                4.3.10 枚举

                        枚举中多个值之间使⽤ , 分割

//枚举————体现状态集
enum OrderStatus{   //大驼峰
    notpaid=1,
    paid=3,
    refund=2,
    shutDown=4
}

console.log(OrderStatus.notpaid)   //1
console.log(OrderStatus[4])     //shutDown

//枚举支持中文，但不建议
enum CourseType{
    "直播课",
    "录播课"
}
const course={
    type:1
}
console.log(CourseType[course.type])    //录播课
console.log(CourseType["录播课"])       //1

                4.3.11 any类型

                        不推荐使⽤ any 这会让 TypeScript 变为 AnyScript （失去 TS 类型保护）

                当值的类是 any 时，可以对值进⾏任意操作，并且不会有代码提示。

// 声明变量不提供默认值也不提供类型，会被⾃动推断为any类型
let name;
let age:any;
// 函数参数不添加类型，会被⾃动推断为any类型
function add(num1, num2) { }