vue.js 学习笔记3——TypeScript
程序员文章站
2022-05-27 22:14:49
[TOC] vue.js 学习笔记3——TypeScript 工具 typescript 通过tsconfig.json 文件配置。 可通过gulp 等工具管理项目自动化编译和运行。 基础类型 boolean 布尔、number 数字、string 字符串、enum 枚举、any 任意、void 空 ......
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<number>=[1,2,3]; //泛型数组
元组
let x:[string,number] = ['hello',10];
枚举
- const enum 常量枚举会被用值直接替换
- 枚举是一个对象,数值类型会有属性双向映射
- 用字面量或者无初始化的枚举的成员是一个类型,值就是该枚举成员。该枚举是一个联合
- 枚举成员初始化是简单常量算式,为常量成员,否则为计算成员
- 枚举成员可以是数字或字符型
- 外部枚举成员默认是计算成员
字面量
-
"s"|"n"|"m"
用竖线分隔的字面量限定字符串变量的可选值。 -
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{} }
类类型要素
-
extends
继承基类 -
implements
实现接口 -
super()
调用基类初始化 -
this
实例对象 -
public/protected/private
访问权限。只有public成员才具有结构性兼容的便利 -
readonly
只读属性 -
constructor()
构造函数 -
constructor(public a:number, readonly b:string)
参数属性。具有特殊修饰符的a,b自动成为对象成员 -
get set
存储器。读取属性的函数 -
static
静态属性。类属性 -
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。
预定义映射:
-
exclude<t,u>
剔除u -
extract<t,u>
提取u -
nonnullable<t>
剔除null和undefined。 -
returntype<t>
获取函数返回类型 -
instancetype<t>
获取构造函数实例类型。 -
readonly<t>
映射为只读版本 -
partianl<t>
可选版本 -
pick<t,k>
摘录版本 -
record<string,r>
将联合映射为对象,成员类型r
类型兼容
ts中使用了结构作为类型兼容的标准,也就是只要结构相容,就是相容,而不需要明确的类型命名声明。
结构包含:
- 公共成员名称和类型
- 函数参数排列和返回类型
- 私有和保护成员不适用该系统。
相容的意思是指:
let a:a = b as b;//a兼容b
- a的所有成员,b都有
- 如果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,类构造函数
- 可以返回修改后的构造对象,
return class extends {new(...args:any[]):{}}{}
函数装饰器:
- 参数1,静态,类的构造函数;实例成员为类的原型对象。
- 参数2,成员的名字
- 参数3, 成员的属性描述符
- 可返回属性描述符
属性装饰器:
- 类构造或原型对象
- 成员名字
参数装饰器:
- 类构造或原型对象
- 成员名字
- 参数在函数参数列表中的索引
上一篇: 决心书