本文记录了 TypeScript 中的基础变量类型和使用方式，以及在 Vue2 框架中引入的调整。
类型
-
布尔值
let isDef: boolen = false -
数字
let num: number = 0 -
字符串
let str: string = 'hello word' -
数组
let nums: number[] = [1, 2, 3] let strs: Array<string> = ['s1', 's2', 's3'] -
元组
元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同
let list: [string, number] = ['hello', 1] -
枚举
枚举类型用于定义数值集合，默认情况从 0 开始编号，可手动指定成员数值
enum Color { Red, Green, Blue } let c: Color = Color.Red -
Any
声明为 any 的变量可以赋予任意类型的值
let key: any = 1 let key1: any = 'hello' -
Object
表示非原始类型，除number，string，boolean，symbol，null或undefined之外的类型
declare function create(o: object | null ) : void create({ prop: 0 }) -
Null、Undefined
指定了 --strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自
let undef: undefined = undefined let nul: null = null -
Never
表示的是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型
function error(message: string): never { throw new Error(message) } -
Void
表示没有任何类型，当一个函数没有返回值时，返回值类型是 void；声明一个void类型的变量，则只能为它赋予undefined和null
function warnUser(): void { //无返回值 console.log("This is my warning message") } let unusable: void = undefined -
类型断言
手动指定一个类型的值，即允许变量从一种类型更改为另一种类型
let value: any = 'hello word' let length: number = (<string>value).length let length1: number = (value as string).length -
联合类型
关键词 | 表示或，类型选其一
-
交叉类型
关键词 & 表示与，取类型交集
-
类型别名
关键词 type
赋值
-
变量声明
包含 let、const、var 三种方式
let const var 作用域 当前代码块 当前代码块 当前函数、模块或全局 重复赋值 否 否 是 变量提升 否 否 是 是否可修改 是 否 是 -
解构
// 数组解构 let input = [1, 2] let [first, second] = input // 对象解构 let input = [1, 2] let [first, second] = input
类
-
声明
通过关键词 class 声明一个类
class Greeter ｛ greeting: string; constructor(message: string) { this.greeting = message; } greet() { // this 指向类实例 return "Hello, " + this.greeting; } ｝ -
实例创建
let greeter = new Greeter('word') -
修饰词
对类的属性和方法进行访问的定义，默认只为 public
含义 描述 readonly 只读 只在构造函数中可以赋值 public 公共 可以在实例、实例方法和子类访问 private 私有 只在实例的方法中访问 protected 保护 可以在子类和实例方法中访问 static 静态 通过类名访问 abstract 抽象 -
继承
子类通过关键词 extends 继承父类：子类可以访问父类中的公共和保护属性、方法；子类可以赋值给父类
// 父类 Animal class Animal { } // 子类 Dog class Dog extends Animal { } -
存取器
类属性的赋值和读取方法
class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(newName: string) { this._fullName = newName; } } -
抽象类
通过关键词 abstract 创建，不能被实例化，可以被继承；
函数
-
类型定义
函数的类型包括参数类型和返回值类型；传递给一个函数的参数个数必须与函数期望的参数个数一致
function add(x: number, y: number): number { return x + y; } let add1: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; } -
可选参数
可以通过
?实现可选参数功能；可选参数必须在必须参数之后function add(x: number, y?: number): number { return y ? (x + y) : x; } -
默认参数
在函数声明的时候，设置参数的值。函数调用时，不传入该参数或传入 undefined 时，参数取设置的默认值
function add(x = 1, y: number): number { return x + y; } -
剩余参数
剩余参数的接收方式为数组
function add(x: number, ...rest: number[]): number { return rest.reduce((acc, cur) => acc + cur, x) } -
this参数this参数是个假的参数，它出现在参数列表的最前面，指向当前作用域对象interface Deck { suits: string[]; createCardPicker: (this: Deck) => void; } let deck: Deck = { suits: ["hearts", "spades", "clubs", "diamonds"], createCardPicker: function (this: Deck) { console.log(this.suits[0]) } } deck.createCardPicker() // 输出：hearts -
this指向指向 普通函数 函数所在作用域对象 匿名函数 全局对象 箭头函数 函数所在作用域指向的对象 -
函数重载
函数名相同，参数个数或类型不同；调用时会匹配第一个符合条件的函数
function add(x: number): number { return x + 1 } function add(x: number, y: number): number { return x + y }
接口
不会检查属性的顺序，只需相应的属性存在且类型正确即可
-
可选属性
interface LabelledValue { label: string; } -
只读属性
interface SquareConfig { color?: string; width?: number; } -
额外属性检查
interface SquareConfig { color?: string; width?: number; [propName: string]: any; } -
函数类型
包含参数列表和返回值类型的函数定义，参数列表里的每个参数都需要名字和类型
interface SearchFunc { (source: string, subString: string): boolean; } let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { let result = source.search(subString); return result > -1; } -
可索引的类型
支持两种索引签名：字符串和数字，可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型
interface StringArray { [index: number]: string; } let myArray: StringArray; myArray = ["Bob", "Fred"]; let myStr: string = myArray[0]; -
类类型
类可以通过 implements 实现一个接口规范，接口只对类实例进行约束
interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
泛型
-
泛型使用
在函数和类声明的时候，以占位符的形式定义参数类型，在调用时传入具体的参数
function add<T>(x: T, y: T): T { return x + y; } let acc = add<number>(2, 3)class Arithmetic<T> { add(x: T, y: T): T { return x + y; } } let arithmetic = new Arithmetic<number>() let acc = arithmetic.add(2, 3) -
泛型约束
通过
extends可以对泛型进行类型限制interface Lengthwise { length: number } function computeLength<T extends Lengthwise>(value: T): number { return value.length }
装饰器
-
装饰器是一种特殊类型的声明，本质上就是一个方法，可以注入到类、方法、属性、参数上，扩展其功能；在运行时会执行该方法
@f x签名 类装饰器 declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction 方法装饰器 declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void 属性装饰器 declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void 参数装饰器 declare type ParamDecorator = (target: Object, propertyKey: string | symbol, index: number) => void target 当前对象原型；propertyKey 方法、属性、参数名称；descriptor 方法的属性描述符；index 参数数组中的位置
-
装饰器工厂
通过闭包的形式，返回一个函数，实现向装饰器传入参数
function color(value: string) { return function (target: Function){ //TODO } } @color('red') class ColorRed { } -
执行顺序
装饰器工厂：先执行工厂函数，然后执行装饰器函数
多个装饰器：装饰工厂函数有上向下执行；装饰器函数由下向上执行
function f() { console.log("f(): evaluated"); return function (target, propertyKey: string, descriptor: PropertyDescriptor) { console.log("f(): called"); } } function g() { console.log("g(): evaluated"); return function (target, propertyKey: string, descriptor: PropertyDescriptor) { console.log("g(): called"); } } class C { @f() @g() method() {} }执行结果
f(): evaluated g(): evaluated g(): called f(): called -
Vue2 使用
需要安装
vue-property-decorator插件npm install vue-property-decorator --saveimport { Vue, Component, Prop, Watch, Ref, Emit } from 'vue-property-decorator' @Component // 组件，引入组件时 @Component({ components: { ... } }) export default class CommonMenu extends Vue { // 生命周期 created(){ } // 属性 @Prop({ type: String, default: '' }) readonly name?: 'Li'; // 响应式数据 message: string = 'hello'; // 计算属性 get greet() { return `${this.message},${this.name}`; } // 数据监听 @Watch('name', {}) changeName(val: String, oldVal: String) { console.log(`watch: ${val}/${oldVale}`) } // 方法 hello() { console.log(`hello word`) } // ref @Ref('header') readonly headerRef!: any; // 向父组件传值：接收方式 @change-msg=""，默认为方法名称 @Emit('changeMsg') handleMsg() { return this.message // 要传递的值 } }
命名空间
-
通过代码块的形式分割变量、函数和类的声明，以
export形式导出可访问项namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } } -
导入
通过
/// <reference path="xxx.ts" />形式引入命名空间// shapes.ts namespace Shapes { export namespace Polygons { export class Square { readonly name: string constructor() { this.name = 'Square'; } } } }/// <reference path="shapes.ts" /> import polygons = Shapes.Polygons; let sq = new polygons.Square(); -
别名
通过
import q = x.y.z形式对常用对象进行重新命名import polygons = Shapes.Polygons;原文链接：TypeScript初学