vue.js 学习笔记3——TypeScript

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录

  • vue.js 学习笔记3——TypeScript

    • 工具

    • 基础类型

    • 数组

    • 元组

    • 枚举

      • 字面量

    • 接口

    • 类类型

      • 类类型要素

    • 函数

      • 函数参数

      • this对象和类型

      • 重载

      • 迭代器 Symbol.iterator

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

    • 泛型

      • 泛型约束

    • 交叉类型、联合类型

    • 索引类型

    • 映射类型

    • 类型兼容

      • 类型保护、推断

    • 模块和命名空间

    • 装饰器

      • 类装饰器：

      • 函数装饰器：

      • 属性装饰器：

      • 参数装饰器：

工具

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<number>=[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;

泛型

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

泛型约束

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

let f:<T extends interFace>(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<T,U> 剔除U

  2. Extract<T,U> 提取U

  3. NonNullable<T> 剔除null和undefined。

  4. ReturnType<T> 获取函数返回类型

  5. InstanceType<T> 获取构造函数实例类型。

  6. Readonly<T> 映射为只读版本

  7. Partianl<T> 可选版本

  8. Pick<T,K> 摘录版本

  9. Record<string,R> 将联合映射为对象，成员类型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. 参数在函数参数列表中的索引

以上是 vue.js 学习笔记3——TypeScript 的全部内容， 来源链接： utcz.com/z/380700.html

回到顶部