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

青训营的第3天，该课程主要包含Typescript的内容，下面是课程的笔记和总结。

课程笔记

Typescript的简介

TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，并添加了可选的静态类型和基于类的面向对象编程。

TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

TypeScript 与 JavaScript 的区别

TypeScript是静态类型语言，在编译阶段暴露大部分错误，增加了代码的可读性，最终被编译为js。

TypeScript基础

TypeScript基础类型和js基本一致，如String、Number、Boolean等，另外还增加了：any--任意类型、 readonly：只读类型、void：空类型、

枚举类型 enum

E {add = '+'， mult = '*'}

自定义类型

type myType = String|Number

定义类型的方式

直接在变量后面加 :

//基本类型
let s:string = 'abc'
//数组
let list: number[] = [1,2,3]
//定义多种类型
let list: (number|string)[] = [1,'2',3]

泛型表示,不预先指定具体类型，而使用时再进行指定的一种特性
```
let list: Array<number|string> = [1,'2',3]`
```
类型推断，定义时不指定类型，但进行赋值，以赋值类型推断为变量类型

函数的类型定义

函数<T>(target: T) => T[]，其中T为泛型类，具体如

function test(a:string, b:number, c?:number): number{ 
    return parseInt(a) + b
}

泛型

泛型其实是将一种或者多种类型提升，并且用一个自定义的标识符用来表示，比如现在要提升一个函数的参数类型，该参数类型可以是任意值，并且返回的是与其一样的类型。接口、类、别名中都再名称后使用 <T, U> 。泛型约束<T extends string>,表示只能接收string类型;默认类型<T = string>;类型断言，在确定某个变量的类型时,使用as关键字断言。

接口

接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用，接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要，typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等

interface

类使用接口

interface IObj{ 
    name:string 
    age:number 
    //可选 
    location?:string 
    //不关心的值 
    [propName:string]:any 
} 
let obj1:IObj = { 
    name:'xiaoming' 
    age:18 
    location:'beijing' 
    }

函数使用接口

interface IFunc { 
    (a:string, b:number, c?:number): number 
    } 
let func:IFunc = function test1(a:string, b:number, c?:number): number {
    return a + b
    } 
let obj1:IObj = { 
    name:string 
    age:number 
    getName:(name:string)=>string 
    }

类的私有属性

class Bus {
    private list = [] //私有属性,孩子类也无法访问 
    protect age=18 //孩子类可访问，外部无法访问 
    subscribe(cb){ 
        this.list.push(cb) 
    }
    dispatch(){ 
    this.list.forEach(
    cb => { 
        cb&&cb() 
        }
        ) 
    } 
    }

class类实现接口

class A implements IFunc{ 

} 
function init(obj:IFunc){ 

} 
let obj1 = new A()

Typescript高级部分

联合类型A|B，几种类型之一交叉类型A&B，多种类型叠加到一起成为一种类型，类型保护、类型守卫，定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域。

function getIsIA(arg：IA|IB)：arg is IA {
    return !!(arg as IA).a; 
}

Partial<T>类型

索引类型：关键字 keyof，相当于取值对象中所有key组成的字符串字面量

type IK = keyof {a: string;b:number} //=>type IK = 'a'|'b'

关键字【in】，相当于取值 字符串字面量 中的一种可能，配合泛型P，即表示每个key 关键字?，通过设定对象可选选项，即可自动推导出子集类型

extends跟随泛型出现时，表示类型推断，其表达类比于三元表达式，如T ===判断类型？类型A:类型B

关键字infer出现在类型推断中，表示定义类型变量，可以用于指代类型

工程应用

web

webpack 1.配置loader 2.配置tsconfig.js 3.运行webpack启动/打包 4.loader处理ts文件，会进行编译与类型检查

nodejs

1.安装node与npm 2.配置tsconfig.js 3.使用npm安装tsc 4.使用tsc编译得到js文件

总结

这节课主要对typescript的基本使用和高级用法进行了讲解，还缺少一些实际运用。笔记中如果有错还希望各位不吝指出。

Typescript学习笔记 ｜ 青训营笔记