30分钟速成TypeScript-Toy模板网

这篇具有很好参考价值的文章主要介绍了30分钟速成TypeScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、TypeScript 是什么？

TypeScript 是 JavaScript 的超集，在 JavaScript 的基础上增加了类、模块、接口、泛型和静态类型（可选）等常见的概念。

从编程语言的动、静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言，静态类型是编译期做类型检查，动态类型是执行期做类型检查。

所有 JavaScript 代码都是有效的 TypeScript 代码，任何 JavaScript 项目都可以无缝引入 TypeScript，TypeScript 编译器最终会把 TypeScript 代码编译成 JavaScript 代码。

本文只关注 TypeScript 额外增加的区别于 JavaScript 的语法。

二、为什么要使用TypeScript

1、OOP面向对象特性

TypeScript 对于 OOP（面向对象程序设计）背景的人来说感觉应该熟悉，其实开发 TypeScript 的工程师正是领导 C# 开发的微软工程师，但工程师们谨慎地只借用了对 TypeScript 有意义的特性，TypeScript 其实它更像 JavaScript 本身。

2、提高了开发效率

不可否认，一个 TypeScript 项目将会比同等的 JavaScript 代码有更多的行数，但是它有助于描述你正在操纵的数据，从而降低了整体的认知成本。它通过减少记忆成本和消除打开不相关的文件手动检查类型来提高开发速度。

三、TypeScript 详细介绍

1、布尔类型

let isVisable: boolean = false;

2、数值类型

let count: number = 20;

3、字符串类型

let name: string = 'xiaowang';

如果不知道是什么类型，可以使用 “any” (任意)类型

let sure: any = 5;
sure = '重新赋值转换为字符串类型';
sure = false;       // 还可以重新定义为布尔类型

4、常量

使用 const 关键字将一个字面量修饰为常量。

const num = 9;
num = 1; 			// 常量不能重新被赋值，这里会报错

5、数组

TypeScript 中的数组有两种表示形式，一种是有类型的数组，另一种是泛型数组。

有类型的数组：

// 
let list: number[] = [1, 2, 3];

泛型数组：

let list: Array<number> = [1, 2, 3];

6、枚举

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

7、 void 关键词

它用于表明函数没有任何返回值的情况：

function Alert(): void {
  alert('我是弹出框！');
}

8、函数

支持使用 lambda 胖箭头表达式和类型推断

一般的函数

let fun1 = function(n: number): number { return n * n; };

根据返回值推断函数返回类型

let fun2 = function(n: number) { return n * n; };

胖箭头表达式

let fun3 = (n: number): number => { return n * n; };

根据返回值推断返回类型的胖箭头表达式

let fun4 = (n: number) => { return n * n; };

根据返回值推断返回类型的胖箭头表达式，省略花括号的同时，可以同时省去 return 关键字

let fun4 = (i: number) =>  i * i;

9、接口

接口是结构化的，任何具备接口中声明的全部属性的对象，都与该接口兼容。

interface Student {
  name: string;
  age?: number;    // 使用 "?" 标识，表明该属性是一个非必需属性
  move(): void;    // 函数
}

实现 “Student” 接口的对象，当它具备 “name” 属性和 “move” 方法之后可被视为一个 “Student”

let p: Student = { name: 'xaioming', move: () => {} };

带可选属性的对象

let smallStudent: Student = { name: 'xaioming', age: 5, move: () => {} };

下例由于该对象 “age” 属性的类型不是 “number” ，所以不是一个 “Student”

let invalidStudent: Student = { name: 'Bobby', age: true };

接口也可以描述一个函数的类型

interface FindFunc {
  (source: string, subString: string): boolean;
}

参数名并不重要，参数类型才重要

let myFind: FindFunc;
myFind = function(src: string, sub: string) {
  return src.search(sub) !== -1;
};

10、类

类成员访问权限默认都是公共的 (public).

类构造函数- 在类构造函数中使用 public/private 关键字修饰的变量，会被声明为类的成员属性。

下例：age 会像 name 一样被声明定义为类成员属性，而不再需要额外代码。

class Student {

  name: string;   // 成员属性

  constructor(name:string, public age: number=1) {
    this.name = name;
  }

  // 成员函数
  move() { retun this.age++;}

  // 静态成员
  static normal = new Student('xiaoming', 10);
}

let p1 = new Student('xiaowang', 12);
let p2 = new Student('xiaoxi');      // age 为构造器中指定的默认值：1

类的继承

class BigStudent extends Student {
  constructor(name:string,  age: number, public major:string="计算机") {
    super(name, age); // 必须显式调用父类的构造函数
  }

  // 重写父类中的 dist() 函数
  dist() {
    let d = super.dist();
    return d+d;
  }
}

11、模块

模块 “.” 符号可以作为子模块的分隔符：

module Geometry {
  export class Square {
    constructor(public length: number = 0) {
    }
    area() {
      return Math.pow(this.length, 2);
    }
  }
}

let s1 = new Geometry.Square(6);

为模块创建一个本地别名:

import G1 = Geometry;
let s2 = new G1.Square(2);

12、泛型

类泛型

class Student<T1, T2> {
  constructor(public param1: T1, public param2: T2) {
  }
}

接口泛型

interface Student<T> {
  param1: T;
  param2: T;
}

函数泛型

let student2 = function<T>(p: Student<T>) {
  return new Student(p.param1, p.param2);
};


let tuple = student2({ param1: 'hello', param2: 'world'});

13、模板字符串

使用反引号的字符串

// 嵌入变量的模板字符串
let name = 'wangming';
let greeting = `Hi ${name}, how are you?`;

// 有多行内容的模板字符串
let multiline = `This is an example
of a multiline string`;

14、引用定义文件