vue.js 学习笔记3——TypeScript

vue.js 学习笔记3——TypeScript

工具

npm install -g typescript #安装typescript 工具tsc编译器
tsc a.ts #输出 a.js
node a.js #运行js

typescript 通过tsconfig.json 文件配置。

可通过gulp 等工具管理项目自动化编译和运行。

基础类型

boolean 布尔、number 数字、string 字符串、enum 枚举、any 任意、void 空、null 空值、 undefined 未定义、symbol 符号值、object 对象、never 不存在。

let isDone:boolean = false;
let name:string = "普通字符串";
let firstName:string = `模板字符串${isDone}`; //支持插入和换行

enum Color{Red=0,Green=2,Blue=4}
let c:Color = Color.Green;

let notSure:any = 4;
notSure = "字符串也行";

let voidValue:void = undefined;//只有undefined或null两个值。 
let u:undefined = undefined;
let n:null = null;
let sym:symbol = Symbol(); //唯一存在，可用作对象成员的键
let o:object = {};//除boolean、number、string、symbol、null、undefined外的类型

():never=>{throw "";}; //用来定义没有返回路径的方法。该类型是所有类型的子类型。

注意：

• ts中object和null不相容
• object和基础类型都不相容
• any是根类型，never是叶子类型
• 严格选项下，null和undefined除自身和void都不相容

数组

[] 数组

let list:number[] = [1,2,3];
let genList:Array=[1,2,3]; //泛型数组

元组

let x:[string,number] = ['hello',10];

枚举

• const enum 常量枚举会被用值直接替换
• 枚举是一个对象，数值类型会有属性双向映射
• 用字面量或者无初始化的枚举的成员是一个类型，值就是该枚举成员。该枚举是一个联合
• 枚举成员初始化是简单常量算式，为常量成员，否则为计算成员
• 枚举成员可以是数字或字符型
• 外部枚举成员默认是计算成员

字面量

1. "s"|"n"|"m" 用竖线分隔的字面量限定字符串变量的可选值。
2. 1|2|3|4 数字变量的可选值。

接口

接口做类型的声明，而没有具体实现。

interface 接口名 extends 可选的父接口{
    color?:string; //可选属性
    width:number;
    readonly x:number;//只读属性
    [propName:string]:any; //索引属性，如s["name"]，其他属性类型必须兼容索引属性
    [index:number]:any; //数字下标做索引，s[1] 等价 s["1"]
    (start:number):string; //实例成员函数
    new():object; //初始化构造函数
}

类类型

类类型可以实现接口。类分两部分，静态部分和实例部分，类构造函数属于静态部分，而接口实现属于实例部分。

interface face{
    data:string;
}

class Ca implements face{
    data:string; //实现接口

    //初始化构造函数
    constructor(h:number,m:number){
        this.data = h + m;
    }
    private state:any;//私有属性
}

//接口可以继承自类，包含类的相关声明，包括私有。因此，一般只有父类的子类才能实现该接口。
interface ia extends Ca{
    new(state:any):face{}
}

类类型要素

1. extends 继承基类
2. implements 实现接口
3. super() 调用基类初始化
4. this 实例对象
5. public/protected/private 访问权限。只有public成员才具有结构性兼容的便利
6. readonly 只读属性
7. constructor() 构造函数
8. constructor(public a:number, readonly b:string) 参数属性。具有特殊修饰符的a，b自动成为对象成员
9. get set 存储器。读取属性的函数
10. static 静态属性。类属性
11. abstract 抽象类，抽象成员函数

函数

let myfun:(a:number,b:string)=>boolean; //函数类型
function fun2(a:number,b:string):boolean{} //函数
let fun3=function(){};//匿名函数
let fun4=()=>1;//箭头函数

函数参数

function myfun(arg?:number):void{} //?代表可选

let fun2=(name="bill")=>void;//默认参数
function fun3(a:number, ...s:number[]){} //s是剩余参数

this对象和类型

• function定义的的函数，会在调用它时绑定上下文this变量。即this类型为any。
• 箭头函数则会在定义它的上下文绑定this变量。
• this作为函数返回类型，可以用在继承系统里面串联调用子类对象成员函数。

function f(this:void){} //禁用this

class A{
    f1():this{return this;}
}
class B extends A{
    f2():this{return this;}
}

let a:B = new B();
a.f1().f2(); //f1返回的this自动成为子类型

重载

• ts中给出不同函数重载的声明，这样就启动了函数参数的类型检查，定义只需要给出一份。用any参数来实现，但它不是重载。
• 注意！ts不能有多个实现。

迭代器 Symbol.iterator

• for..of 语句调用对象上的迭代器Symbol.iterator函数。
• for..in 语句迭代对象的键，适用任何对象

声明、解构、展开、类型断言

//变量声明
let 变量名:可选的类型 = [1,2]; //字面量
//常量声明，即不能修改的变量
let 常量名:可选的类型 = [1,2]; 

//解构数组
let [a, b]:可选的类型 = [1,2]; //a=1,b=2
let [a, ...b] = [1,2,3,4]; //a=1,b=[2,3,4]
//解构对象
let {a,b} = {a:1,b:2,c:3};//a=1,b=2
let {a:newA,c}={a:1,b:2,c:3};//newA=1,c=3;属性名a修改成newA

//展开数组
let a:number[] = [0,...[1,2],3];//a=[0,1,2,3];展开数组[1,2]

//类型断言，绕过某些编译器类型检查
let a:string= 1 as string;

泛型

用标记来代替特定类型，或者替代类型的一部分。

泛型约束

指定泛型标志的适用范围。

let f:(arg:T)=>T;

交叉类型、联合类型

• U & T 合并U和T两类型成员
• U | T U,T的联合体，值为其中之一，成员为共有的相同成员

索引类型

• keyof 索引类型查询，得到公共属性名的联合
• T[K] 其中，K extends keyof T，即K是联合类型其中一个。结果是T.K

映射类型

• [key in keyof T]:P 迭代T的属性联合，产生对应的对象属性,并设置类型为P。

预定义映射：

1. Exclude 剔除U
2. Extract 提取U
3. NonNullable 剔除null和undefined。
4. ReturnType 获取函数返回类型
5. InstanceType 获取构造函数实例类型。
6. Readonly 映射为只读版本
7. Partianl 可选版本
8. Pick 摘录版本
9. Record 将联合映射为对象，成员类型R

类型兼容

ts中使用了结构作为类型兼容的标准，也就是只要结构相容，就是相容，而不需要明确的类型命名声明。

结构包含：

1. 公共成员名称和类型
2. 函数参数排列和返回类型
3. 私有和保护成员不适用该系统。

相容的意思是指：

1. let a:A = b as B;//A兼容B
2. A的所有成员，B都有
3. 如果A是函数，B的参数，A都有（或B参数兼容A参数），且排列顺序一致。因为js中A多余的实参，允许B函数调用时忽略。其二，函数返回值也是类型兼容的一部分。

//复杂例子
let a:{x:number,y(a1:{k:1,k2:2}, a2:never):{r:number}}=
{x:1, y: (m:{k:1})=>{return {r:1};}}

类型保护、推断

• ():is 类型 类型推断谓词
• typeof
• instanceof
• | || 可null联合类型相关符号
• ? undefined 可选类型相关符号
• type 别名

模块和命名空间

模块加载器 CommonjS(node.js) 或 Require.js(AMD)； UMD,SystemJS,ES6/ES2015。

• export 标识要导出的内容。
• import 导入。
• export default 默认导出，导入时可以不指定对应的名字
• export = commonjs语法
• import module=require（”module“） commonjs语法
• 只要在顶层使用关键字，文件即可成为模块，否则全局可见
• declare ts声明格式
• declare module ts声明模块
• namespace 命名空间
• import x= ns.cla x是别名
• 推荐使用模块来组织代码。

装饰器

@装饰器 是一个函数，会在被装饰的对象运行时调用。reflect-metadata是元数据库。

类装饰器：

1. 参数1，类构造函数
2. 可以返回修改后的构造对象，return class extends {new(...args:any[]):{}}{}

　函数装饰器：

1. 参数1，静态，类的构造函数；实例成员为类的原型对象。
2. 参数2，成员的名字
3. 参数3， 成员的属性描述符
4. 可返回属性描述符

属性装饰器：

1. 类构造或原型对象
2. 成员名字

参数装饰器：

1. 类构造或原型对象
2. 成员名字
3. 参数在函数参数列表中的索引