这是我参与「第四届青训营」笔记创作活动的的第4天

TypeScript学习

基础

基础类型

boolean,number(双精度64位浮点数),string(反引号来定义模板字符串),void,null,undefined
undefined和null是所有类型的子类型以boolean为例，new Boolean()返回的是一个对象，直接调用Boolean()可以返回一个boolean类型
数组：number[] 或 Array< number >
元组：表示已知元素数量和类型的数组，各元素类型不需相同，但对应位置的元素类型需要匹配
枚举：定义数值集合，索引值从0开始
never:是其它类型的子类型，表示从不会出现的值，在函数中通常表现为抛出异常或无法执行到终点（如无限循环）
any:可以赋予任意类型的值，any[]为元素类型任意的数组

变量声明

var/let [变量名] : [类型] = 值，声明变量类型及初始值
var/let [变量名] : [类型],声明变量类型，初始值为undefined
var/let [变量名] = 值，声明变量并赋初值，类型为any
var/let [变量名],声明变量，类型为any,初值为undefined Typescript是强类型语言，不同类型的值赋值给变量会编译错误

类型断言(Type Assertion) && 类型推断

类型断言可以用来手动指定一个值的类型，允许变量从一种类型更改为另一种类型，两种类型的其中一种是另一种类型的子集时二者可以进行类型断言。
语法格式：<类型> 值或值 as 类型类型推断：当变量未指定类型时，编译器会通过赋值来推断变量类型

运算符

一些语言通用意义用法的运算符不再赘述

typeof:一元运算符，返回操作数的数据类型
instanceof：用于判断对象是否为指定的类型，obj instanceof type,是返回true,否则返回false

循环

for...in循环：用于一组值的集合或列表进行迭代输出
for(var val in list) { ... } val需要为string或any类型
for...of循环：用于创建一个循环来迭代可迭代的对象，可遍历数组，字符串，Maps,Sets等可迭代的数据结构
forEach循环：list.forEach((val,idx,array) => { ... })
every循环：list.every((val,idx,array) => { ... })

函数

//arg2为可选参数 function funcName (arg1: string, arg2?: number) { ... }
函数中有可选参数有必选参数时，必选参数往前放
剩余参数：不知道具体要向函数传入多少个参数时用剩余参数来定义，将一个不确定数量的参数作为一个数组传入
语法格式：...[argName]:[type][] 匿名函数自调用：

(function() {
    var x = "hello"
    console.log(x)
})()

构造函数：使用内置构造函数Function()来定义函数

var myFunction = new Function("a","b","return a * b")
var x = myFunction(3,4)
console.log(x) //12

Number

属性：MAX_VALUE,MIN_VALUE,NaN(非数字值),NEGATIVE_INFINITY,POSITIVE_INFINITY,prototype(对象的静态属性，可以向对象添加属性和方法),constructor(返回对创建此对象的Number函数的引用)
方法：

toExponential():把对象的值转换为指数计数法
toFixed():把数字转换为字符串，并把小数点指定位数，不指定默认保留整数部分（四舍五入）
toLocaleString():把数字转换为字符串，使用本地数字格式顺序
toPrecision():把数字格式化为指定的长度
toString():把数字转换为字符串，根据指定基数表示，省略参数则默认基数为10
valueOf():返回一个Number对象的原始数字值

String

属性：prototype,constructor,length
方法：

charAt():返回指定位置的字符
charCodeAt():返回在指定位置的字符的Unicode编码
concat():连接两个或多个字符串，并返回新的字符串
indexOf():返回某个指定字符串值在字符串中首次出现的位置
lastIndexOf():从后向前搜索字符串，并从起始位置(0)开始计算返回字符串最后出现的位置
localeCompare():用本地特定的顺序来比较两个字符串
match():查找找到一个或多个正则表达式的匹配
replace():替换与正则表达式匹配的子串
search():检索与正则表达式相匹配的值
slice():提取字符串的片段，并在新的字符串中返回被提取的部分* split():把字符串分割为子字符串数组
substr():从起始索引提取字符串中指定数目的字符
substring():提取字符串中两个指定的索引之间的字符
toLowerCase()/toUpperCase():全转化为大写/小写
toString():返回字符串
valueOf():返回指定字符串对象的原始值

数组

length属性获取数组长度
方法：

concat():连接两个或多个数组并返回结果
every():检测数组元素是否每个元素都符合条件
filter():检测数组元素并返回符合条件的所有元素
forEach():数组每个元素都执行一次回调函数
indexOf():搜索数组中的元素并返回它所在的位置，搜索不到返回-1
join():把数组所有元素以某个符号连接放入一个字符串，默认,连接
lastIndexOf():返回一个指定的元素最后出现的位置，从后往前找
map():通过指定函数处理数组的每个元素，并返回处理后的数组

var numbers = [1,4,9]
var roots = numbers.map(Math.sqrt)
console.log(roots) //[1,2,3]

pop():删除数组最后一个元素并返回该元素
push():向数组末尾追加一个或多个元素，并返回新的长度
reduce():将数组元素按某个函数指定方式计算为一个值，从左往右
reduceRight():将数组元素按某个函数指定方式计算为一个值，从右往左
reverse():反转数组元素
shift():删除并返回数组的第一个元素
slice():选取数组的一部分，并返回一个新数组
some():检测数组元素中是否有元素符合指定条件
sort():对数组的元素进行排序
splice():从数组中添加或删除元素,第一个参数指定改变的位置，第二个参数为0表示添加元素，为1表示删除元素
toString():把数组转换为字符串并返回结果
unshift():向数组的开头添加一个或多个元素并返回新的长度

Map

创建Map: let myMap= new Map()

clear():移除所有键值对
set():设置键值对
get():返回键对应的值
has():判断Map中是否包含键对应的值，返回值true/false
delete():删除元素，成功返回true,失败返回false
size():Map对象键值对数量
keys():返回一个Iterator对象，包含Map对象中每个元素的键
values():返回一个Iterator对象，包含Map对象中每个元素的值

// 迭代 Map 中的 key => value 
for (let entry of nameSiteMapping.entries()) {    
    console.log(entry[0],entry[1])
}
// 使用对象解析 
for (let [key, value] of nameSiteMapping) { 
    console.log(key, value); 
}

元组

声明一个空元组：var mytuple = []
push(),pop()在末尾添加/删除元素结构元组：

var a = [10,"hello"]
var [b,c] = a
console.log(b) //10
console.log(c) //hello

联合类型

联合类型可以通过管道|将变量设置多种类型，赋值时可以根据设置的类型来赋值，只能赋值指定的类型，赋值其他类型会报错
声明一个联合类型：

var val:string|number
val = 12
console.log(val) //12
val = "hello"
console.log(val) //hello
val = true //报错

联合型数组：

var arr : number[] | string[]

接口

//定义一个接口IPerson
interface IPerson {
    firstName:string,
    lastName:string,
    sayHi: () => string
}
//定义一个变量，Iperson类型
var customer:IPerson = {
    firstName:"XiaoMing",
    lastName:"Li",
    sayHi: ():string => {return "Hi:"+lastName+firstName}
}
console.log(customer.firstName) //XiaoMing
console.log(customer.lastName) //Li
console.log(customer.sayHi()) //Hi:LiXiaoMing

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串

interface ages {
    [index:string]:number
}
var ageList:ages;
ageList["hi"] = 15

接口继承：

interface Person {
    age:number
}
interface Musicain {
    instrument:string
}
var drummer = <Musician>{}
drummer.age = 27
drummer.instrument = "drums"
interface Child extends Person, Musician {}
var Iobj:Child = {age:18,instrument:"guitar"}

类

class Car {
    engine:string;
    constructor(engine:stirng) {
        this.engine = engine
    }
    disp():void {
        console.log("发动机为："+this.engine)
    }
}
var car = new Car("XXSY1")
console.log(car.engine) //XXSY1
car.disp() //XXSY1

类的继承：
子类不能继承父类私有成员,不支持继承多个类，但支持多重继承(A继承B,B继承C)
子类继承父类，可以对父类的方法重写，使用super关键字可以直接引用父类的属性和方法

static关键字用于定义静态成员，静态成员可以直接通过类名调用，实例成员需通过实例对象调用
类实现接口：使用关键字implements

interface ILoan {
    interest:number
}
class AgriLoan implements ILoan {
    interest:number,
    rebate:number
    constructor(interest:number,rebate:number) {
        this.interest = interest
        this.rebate = rebate
    }
}
var obj = new AgriLoan(10,1)
console.log(obj.interest) //10
console.log(rebate) //1

对象

var object_name = {
    key1:"value1",
    key2:() => {},
    key3:["content",1]
}

类型别名

常用于联合类型

type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver

泛型

泛型是指在定义函数、接口或类时，不预先指定具体的类型，而是在使用的时候指定类型的一种特性

泛型用于函数：

function createArray<T>(length:number,value:T):Array<T> {...}
createArray<string>(3,'x')

多个类型参数：

function swap<T,U>(tuple:[T,U]):[U,T] {
    return [tuple[1],tuple[0]]
}

泛型接口

interface CreateArrayFunc {
    <T>(length:number,value:T):Array<T>
}

泛型参数提前到接口名上

interface CreateArrayFunc<T> {
    (length:number,value:T):Array<T>
}

使用泛型接口时需要定义泛型类型，泛型类与泛型接口同理

TypeScript个人总结 | 青训营笔记