Typescript学习笔记 TYPESCRIPT_typescript文章/教程_其他教程_编程语言

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。

安装 TypeScript

命令行工具安装：

npm install -g typescript

编译一个 TypeScript 文件：

tsc hello.ts

原始数据类型/ 任意值

为每一个变量提前申明该类型，则该变量取值只能为申明的类型，否则报错

如果一个变量可以任意取值，可以通过any 申明该变量为任意值

原始数据类型包括：布尔值（boolean）、数值（number）、字符串（string）、null、undefined、Symbol（ES6）共六种

申明为number类型的变量，后面可以取值类型为 number 、null、undefined，会默认进行隐式转换

例子：

let isDone: boolean = false;        //申明该值为 boolean 类型

let decLiteral: number = 6;

let notANumber: number = NaN;       // 进行隐式转换

let infinityNumber: number = Infinity;  // 进行隐式转换

let num: number = undefined;   // 进行隐式转换

let myName: string = 'Xcat Liu';

let u: undefined = undefined;

let n: null = null;
 
let anytest: any = 123;   //申明该值为任意类型
anytest = true;
anytest = '任意值'

//  内置对象类型申明

let b: Boolean = new Boolean(1);    // 申明为 Boolean 类型

let e: Error = new Error('Error occurred');    //申明为错误类型

let d: Date = new Date();   // 申明为 时间类型

let r: RegExp = /[a-z]/;    //申明为正则类型

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

提前申明变量的类型也可以用在functiuon函数传参，用于规定该参数的类型

在 TypeScirpt 中，可以用 void 表示没有任何返回值的函数

例子：

function sayHello(person: string) {     // 在函数出入的参数后面申明类型
    return 'Hello, ' + person;
}


function test(): void {     //void 表示该函数没有返回值
  alert('Hello Wrold');
}

联合类型

联合类型表示取值可以为多种类型中的一种。使用 | 分隔每个类型。

let test: string | number;    //申明 test变量的类型为string 或者 number其中一种
test = 'seven';     //test的取值可以为其中一种类型
test = 7;

当不确定一个使用了联合类型的变量是哪种类型时，只能访问此联合类型的所有类型里共有的属性或方法

function getString(something: string | number) {     //申明传入的参数为string或者number类型
  return something.toString();        // 只能调用string和number共有的方法
}

错误例子：

function getLength(something: string | number) {
  return something.length;       // number类型不存在length
}

对象的类型——接口（interfaces）

即提前定义一个对象的类型规则，用于申明一个对象时进行类型匹配

interface Person {     //使用interface定义一个对象的类型，取名Person    首字母一般大写
  name: string;        //申明该对象每个值的取值类型
  age: number;
}

let xcatliu: Person = {     // 申明一个xcatliu对象，使用Person规则进行匹配验证
  name: 'Xcat Liu',
  age: 25,
};

使用Interfaces来定义对象的类型，定义了类型的对象，定义的变量不允许比类型少，也不能多，结构必须一模一样

错误例子：

interface Person {
  name: string;
  age: number;
}

let xcatliu: Person = {    //不能比定义的Person类型的变量少
  name: 'Xcat Liu',
};

let xcatliu: Person = {
  name: 'Xcat Liu',
  age: 25,
  website: 'http://xcatliu.com',   /不能比定义的Person类型的变量多
};

如果我们希望不要完全匹配一个类型，可以使用可选属性：可选属性的含义是该属性可以不存在。使用？但是仍然不允许添加未定义的属性

interface Person {
  name: string;
  age?: number;      //在属性后面加上？ 表示该属性可有可无
}

let xcatliu: Person = {
  name: 'Xcat Liu',
};

有时候我们希望一个接口允许有任意的属性，即可以任意添加属性个数，使用任意属性 [propName: string]

一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性任意属性的取值类型为 any ，否则会跟可选属性冲突

interface Person {
  name: string;
  [propName: string]: any;     // 表示可以任意添加属性个数  ，添加的属性类型为 any
}

let xcatliu: Person = {
  name: 'Xcat Liu',
  website: 'http://xcatliu.com',   //任意添加的属性
  websit2: 'http://xcatliu.com',    //任意添加的属性
};

对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性，在刚刚创建对象的时候赋值，后面不允许改变该属性值。也不能在创建的时候未定义值

readonly 定义在属性的前面，用空格区分

interface Person {
  readonly id: number;   //使用 readonly 定义只读属性
  name: string;
}

let xcatliu: Person = {
  id: 89757,
  name: 'Xcat Liu',
};

xcatliu.id = 9527;    //报错  不能改变该属性值

数组的类型

数组的类型用于定义申明一个数组时的格式，申明格式类型的数组不能使用其他类型的方法

对象中的接口定义类型方法也同样适用于数组

let testArr: number[] = [1,2,5,4,8]     //申明一个数组的类型为 number

let fibonacci: string[] = ["1","2"];    //申明一个数组的类型为 string

let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];   // 申明一个数组的类型为任意类型

let fibona: Array<number> = [ 1, 2, 3, 5];   //也可以使用数组泛型Array<elemType> 来表示数组

interface NumberArray {      //使用接口定义一个数组的类型，表示该数组取值必须为 string 类型
  [index: number]: string;
}
let fi: NumberArray = ["a","1"];

interface NumberArr {        //使用接口定义一个数组的类型，表示该数组取值必须为 number 类型
  [index: number]: number;
}
let fi2: NumberArr = [1, 1, 2, 3, 5];

类数组不是数组类型，比如 arguments ，不能使用数组的类型定义方式

常见的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等

function sum() {
  let args: IArguments = arguments;    // arguments是类数组类型，使用 IArguments
}

函数的类型

定义函数的类型，对函数传入的参数和返回值做一定的限制

输入多余的（或者少于要求的）参数，是不被允许的，

function sum(x: number, y: number): number {     //申明一个函数sum  限制其传入的参数为 number类型，返回的参数为 number类型
  return x + y;
}

sum(1, 2);

如果是一个函数表达式，，那么需要对左右两边进行类型的限制

//申明了一个 mySum函数，申明其类型为number
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};

函数的类型定义同样可以使用对象的接口

interface SearchFunc {      //使用接口申明一个类型，名称为 SearchFunc
  (source: string, subString: string): boolean;     //申明该函数的传入值都为 string   返回值为 boolean
}

let mySearch: SearchFunc;     //申明一个函数，使用 SearchFunc 类型规则
mySearch = function(source: string, subString: string) {
  return source.search(subString) !== -1;
}

函数的类型也可以定义可选的传入参数，在参数后面使用 ?

可选参数必须接在必需参数后面

function buildName(firstName: string, lastName?: string) {    // lastName 为可选参数
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}
let xcatliu = buildName('Xcat', 'Liu');
let xcat = buildName('Xcat');

TypeScript 会将添加了默认值的参数识别为可选参数使用默认值的可选参数不限制位置

function buildName(firstName: string, lastName: string = 'Liu') {     // lastName 为可选参数
  return firstName + ' ' + lastName;
}
let xcatliu = buildName('Xcat', 'Liu');
let xcat = buildName('Xcat');

function reverse(x: number | string): number | string {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数，items 是一个数组。可以用数组的类型来定义它：

function push(array: any[], ...items: any[]) {     //...items表示剩余参数，是一个数组，可以申明为任意类型的数组
  items.forEach(function(item) {
    array.push(item);
  });
}

let a =  [];
push(a, 1, 2, 3);

类型断言 `<类型>值` `值 as 类型`

类型断言可以用来绕过编译器的类型推断，手动指定一个值的类型

TypeScript在使用联合类型时，默认不能引用不确定类型的方法，只能引用共有的方法，某些时刻，我们需要使用类型断言，即申明此时的属性为某个类型

类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的断言的类型必须是联合类型中的某一个

function getLength(something: string | number): number {
  if ((<string>something).length) {   // 默认不能使用 length属性，使用类型断言 <string>   将此时的something申明为 string类型
    return (<string>something).length;
  } else {
    return something.toString().length;
  }
}

类型别名

类型别名用来给一个类型起个新名字。使用 type

type Name = string;        // 使用 type 将string类型起名为 Name
type NameResolver = () => string;      //另一种写法
type NameOrResolver = Name | NameResolver;     //使用该别名
function getName(n: NameOrResolver): Name {
  if (typeof n === 'string') {
    return n;
  }
  else {
    return n();   
  }
}

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。同样使用 type

type test = 'click'|'scroll'|'mousemove'       // 使用 type 规定test变量为三个值其中一个
function handleEvent(ele: Element, event: test) {   //使用test类型，传入的值为规定值的其中一个
  // do something
}

handleEvent(document.getElementById('hello'), 'scroll');

元组

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

简单理解，在数组类型中，要么规定数组中的每个值都为某种类型，要么都为任意类型。使用元组，可以依次给每个值指定类型

let xcatliu: [string, number] = ['Xcat Liu', 25];

我们也可以在定义数组类型后，通过索引依次赋值，也可以只赋值其中一项

当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。

let xcatliu: [string, number];    //先定义每个值的类型
xcatliu[0] = 'Xcat Liu';     // 通过索引赋值
xcatliu[1] = 25;

xcatliu[0].slice(1);     //可以通过索引调用对应类型的方法
xcatliu[1].toFixed(2);

let xcatliu: [string, number] = ['Xcat Liu'];   //报错，需要全部赋值

当我们去访问数组未定义的下标或者对其进行赋值时，它的类型为已存在元素的类型组成的联合类型，能够调用的方法为联合类型共有的方法

let xcatliu: [string, number];

xcatliu = ['Xcat Liu', 25, 'http://xcatliu.com/'];    // 第三个值的类型为 string|number

xcatliu.push(true);     // 报错   true 是 boolean 类型

console.log(xcatliu[2].slice(1));   // 报错   slice不是 string|number 共有的方法

TypeScript 中类的用法 public private 和 protected

public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

class Animal {
  public name;           //表示公共的，在任何地方都可以被访问
  private age;          //表示私有的，不允许被访问，也不能继承
  protected height;     //表示受保护的，只能通过继承访问
  public constructor(name) {
    this.name = name;
  }
}

var a = new Animal('Jack');
console.log(a.name);        
console.log(a.age);      //报错，不允许被访问
console.log(a.height);  // 报错，只能通过继承访问

abstract 用于定义抽象类和其中的抽象方法。

抽象类是不允许被实例化的，即不能通过new去实例化，只能被继承

抽象类中的抽象方法必须被子类实现，即使用abstract 定义为抽象方法，那么必须在子类实现

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();     //抽象方法
}

class Cat extends Animal {
  public sayHi() {     // 继承 Animal类后实现定义的抽象方法
    console.log(`Meow, My name is ${this.name}`);    
  }
}

let cat = new Cat('Tom');

类实现接口 implements

不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。

interface Alarm {    //使用 interface 定义了一个接口，里面是一个 alert 方法
  alert();
}

class Door {
}
 
class SecurityDoor extends Door implements Alarm {    // SecurityDoor继承了 Door类并且引用了 Alarm 接口的方法
  alert() {
    console.log('SecurityDoor alert');
  }
}

class Car implements Alarm {      // Car类 引用了Alarm 接口的方法
  alert() {
    console.log('Car alert');
  }
}

一个类可以同时引用多个接口

interface Alarm {
  alert();
}

interface Light {
  lightOn();
  lightOff();
}

class Car implements Alarm, Light {
  alert() {
    console.log('Car alert');
  }
  lightOn() {
    console.log('Car light on');
  }
  lightOff() {
    console.log('Car light off');
  }
}

接口与接口之间也可以相互继承：

interface Alarm {
  alert();
}

interface LightableAlarm extends Alarm {
  lightOn();
  lightOff();
}

查看更多关于【typescript文章/教程】的文章

Typescript学习笔记 TYPESCRIPT