Typescript学习手札（持续更新）

前言

    做为大前端浪潮中激流勇进的小码农，持续性的去更新本身的技术栈，是极其重要与必要的。做为浪尖上的typescript，新晋之星vue也迈开兼容推广ts的步伐，更是让人必须去see一see的了。记得在vue爬坑之路时，曾在sf遇到个前端大牛说过，老鸟都是从菜鸟过来的，学习的整理和积累是不断成长起来的利剑。这也是我在整理学习手札的缘由之一。

正文

学习主要以文档为主，参考ts官方文档 https://www.tslang.cn/docs/ha...

1. 数据类型及变量声明

    ts变量声明定义语法 let[做用规则] param[变量名]：String[类型名] = value[值]
    ts相较原生js，数据类型明显细化了不少，增长了数据类型校验，使编码更规范，我的感受更像java了。ts提供的类型主要包括： 布尔值（boolean）、字符串（string）、数值（number）、数组（[] || Array<>）、元组（[dataType，number]）、枚举（Enum）、Any(any)、Void(void)、Null（null）、Underfined(underfined)、Never(never)、Object（object）

    类型断言（<> || as）相似java的类型转换，主要有两种写法，一种是<>语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另外一种是 as语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

    肯定赋值断言容许!放置在属性或变量声明以后，ts在解析时，明确声明变量或属性是有值的，例如：let x!:number，变量x后置!，未赋值直接引用x!没毛病；而?则和!相对，ts在解析时会提示可能为underfined;

    let和const是es6引进的两个重要的关键字，引进以前，变量的声明主要是var。var做用域能够是包含它的函数、模块、命名空间或全局域，能够在做用域的任意位置访问该声明。var声明不在意多少次，所以在不少逻辑比较复杂，层次比较深的代码中，很容易出现同一个变量重复声明重定义覆盖而不报错，这也是一个较为头疼的BUG。
    let则是词法或块做用域，此做用域更贴切逻辑处理时的严谨；const的做用域和let同样，只是const通常做只读声明，主要用于声明常量，引用的值不可改变。

2. 接口

    官方定义，接口的做用是为那些对值所具备结构进行检查的类型命名和为你的代码或第三方代码定义契约。
    声明形式：

interface ifName{
}

    接口是面向对象编程和程序设计一个极为重要的工具。ts中接口的实用与java比较类似（或许jdk就是js的超集导向吧~_~）。ts接口主要能够分为属性类型、函数类型、可索引类型和类类型。

     属性对象类型
    ts接口只关注值的外形，这也是ts接口的独到之处。类检查器在检查方法调用时，编译器会检查引用对象是否知足接口的要求，便是否包含接口属性且类型是否匹配。

    通常属性声明：

interface ifName{
    name:string
}

    可选属性 是非必须的，能够做为可能出现的属性预约义，即引用对象可根据需求决定是否须要实现（虽然官网不推荐这个词）接口可选属性：

interface DomItem{
    name?: string,
    value?: string
}
function getDom(ifObj: DomItem):{value: string, color: string}{
    console.log(ifObj.value)
}
let dom = getDom({color:'red'})

    只读属性 readonly如其名，定义后不可修改，和const的性质类似，区分在于readonly声明属性，const声明常量：

interface DomItem{
    readonly name: string,
    readonly value: string
}
let dom: DomItem = {name: '节点', value: '1'};
dom.value = '2'; //Error,只读属性不能被修改

    额外属性检查 是一个查错机制，说白了就是传参类型不匹配，例如：

interface DomItem{
    name?: string,
    value?: string
}
function getDom(ifObj: DomItem):{value: string, color: string}{
    console.log(ifObj.value)
}
let dom = getDom({name: '节点', vla:'1'})//Error

能够发现调用getDom()传参对象属性与getDom声明时的参数对象属性不一致，与其说是新的属性，倒不如说是个新类型，所以这边须要对方法调用的参数作类型转换：

let dom = getDom({name: '节点', vla:'1'} as DomItem)

或者：

let dom = getDom(<DomItem>{name: '节点', vla:'1'})

     函数类型
    函数类型和属性类型不一样，描述的是函数，方法是给接口定义一个调用签名，包括参数列表和返回值类型。

interface GetDom{
    (name: string, value: string): object
}

let getDom: GetDom;
getDom = function(name: string, value: string)：object{
    //...
}

    函数参数列表里的参数会被逐个进行检查，参数名能够不用相同，参数类型和返回值类型必须可以兼容，或者无需定义，ts的类型系统会推断出参数类型和返回值类型，并作出相应的处理。例如，上面的方法能够重写为：

let getDom: GetDom;
getDom = function(n, v){
    //...
}

或者：

let getDom: GetDom;
getDom = function(n: any, v: any): any{
    //...
}

     可索引类型
    可索引类型描述的是具备索引属性的类型，最直观的例子是数组。可索引类型须要定义索引签名，包括索引类型和返回值类型。

interface Dom{
    [x: string]: string
}
let dom: Dom= {
    name: '节点'
}
interface DomArray{
    [index: number]: string
}
let domArray: DomArray= ['city','country']

    索引的类型有两种，字符串和数值。字符串索引是对对象数据的约束，数值索引是对数组数据的约束，我的感受可索引类型的应用场景会比较少，js已经存在属性写法，不必额外添加约束，可能有我没遇到的特例，欢迎指出。

     混合类型
    混合类型是以上几种的集成形式，既能够描述函数，也能够描述属性对象，使用起来比较灵活。

interface DomHandle{
    (name: string): string,
    name: string,
    reset: void
}
let domHandle = function(){
    let domHandle = function(name: string): DomHandle;
    domHandle.name = 'dom';
    domHandle.reset = function(){
        //...
    }
}
let d = domHandle();

3. 函数

    函数被用来定义行为，ts和js同样，分为具名函数和匿名函数。

/*---function声明---*/
function getDom1(): string {
    return 'inode'
}

/*---函数类型声明---*/
let getDom2: () => string //此处=>标识返回类型，并不是es6的箭头函数，须要作区分，不能混淆

/*---变量别名类型推断式声明---*/
let getDom3 = (): void => {
}

/*---接口类型声明---*/
interface GetDom4 {
    (n: string, v: string): string
}

     函数参数
    和js相比，ts函数在传参时必须知足声明时参数列表的要求，即传参列表的数量和类型要和声明函数的参数列表一致。

    js中函数调用时若未传参，它的值会是underfined，若要达到这样的效果，能够在参数变量后置?或者声明时给出默认值来达到可选参数的效果。注意：必选参数必须在可选参数以前！

/*--- 可选参数 ---*/
function getDom1(name: string, value: string): string {
    return 'inode'
}

/*--- 默认参数 ---*/
function getDom2(value = '1', name: string): string {
    return 'inode'
}
let result = getDom2(underfined, 'node')

    共享参数类型时，默认参数即为可选参数的类型。
    若是参数未知切数量不定时，可使用剩余参数语法，剩余参数能够被当作个数不定的可选参数。

/*--- 剩余参数 ---*/
function getDom1(name: string, ...params): string {
    return 'inode'
}

    this指针是老生常谈的话题了，不管是浸淫js多年的牛牛们，仍是业界新入的白白们，this指向问题都是避免不了的。详细讲解连接https://yehudakatz.com/2011/0...，this是在函数调用时肯定值，通常指向函数调用的对象，若是没有调用对象，this值为window(严格模式下是underfined)；es6通常使用箭头函数来声明定义，箭头函数中的this的值是定义中this的值，而不是函数调用时的this值。

    函数重载
    函数重载经过统一个函数来进行多个函数定义来处理不一样类型的数据。 注意：定义重载时必定要把最精确的定义放在最前面

/* 函数重载 */
function getDom(name?: string): void;
/* 下面函数有实现，因此不须要declare关键字 */
function getDom(name = '1'):any {//此处x参数为共享状态类型，默认参数将转换为可选参数
    //...
}