Typescript教程

文某某
181 阅读6分钟
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 是面向对象的 JavaScript，TypeScript 支持面向对象的所有特性，比如 类、接口等。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

难点：

1、泛类？

安装

npm install -g typescript

验证是否安装成功

tsc -v

ts转换为js的过程如下图所示：

用法

基本用法：

tsc test.ts

常用命令



TypeScript 与面向对象

面向对象是一种对现实世界理解和抽象的方法。
TypeScript 是一种面向对象的编程语言。
面向对象主要有两个概念：对象和类。

TypeScript 基础类型




变量声明

类型断言

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式：

<类型>值  或者  值 as 类型



实例：

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)


函数

？可选参数

function buildName(firstName: string, lastName?: string) {
        return firstName;
}
默认参数

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
}
剩余参数

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

匿名函数及自定义

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

Lambda 函数也称之为箭头函数

var foo = function (x) { return 10 + x; };
console.log(foo(100)); //输出结果为 110

数组、多维数组

var multi:number[][] = [[1,2,3],[23,24,25]]

作为函数返回值

function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
}

元组

存储元素数据类型不同

var mytuple = [10,"Runoob"];


TypeScript 联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

// Type1|Type2|Type3var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

联合类型数组

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
arr = ["Runoob","Google","Taobao"]

TypeScript 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
interface interface_name { }

实例：

interface Man {
    name: string,
    age: number,
    sayhi: () => string
}

var m1: Man = {
    name: 'wdl',
    age: 22,
    sayhi: () => {
        return 'hihihi'
    }
}
console.log(m1.sayhi())
编译为：

var m1 = {
    name: 'wdl',
    age: 22,
    sayhi: function () {
        return 'hihihi';
    }
};
console.log(m1.sayhi());

需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。


联合类型和接口

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

接口和数组

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] / 错误元素 1 不是 string 类型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误


接口继承

接口继承就是说接口可以通过其他接口来扩展自己
Typescript 允许接口继承多个接口

Child_interface_name extends super_interface_name
//继承的各个接口使用逗号 , 分隔。
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

实例：



类

类的定义

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：
  • 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
  • 构造函数 − 类实例化时调用，可以为类的对象分配内存。
  • 方法 − 方法为对象要执行的操作。

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

类的继承

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。
其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

class PrinterClass { 
    doPrint():void {
       console.log("父类的 doPrint() 方法。") 
    } 
 } 
  
 class StringPrinter extends PrinterClass { 
    doPrint():void { 
       super.doPrint() // 调用父类的函数
       console.log("子类的 doPrint()方法。")
    } 
 }

 var ss = new StringPrinter()
 ss.doPrint() // => 父类的 doPrint() 方法。 子类的 doPrint()方法。

static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。
  • public（默认） : 公有，可以在任何地方被访问。
  • protected : 受保护，可以被其自身以及其子类和父类访问。
  • private : 私有，只能被其定义所在的类访问。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1)

TypeScript 对象

Typescript 中的对象必须是特定类型的实例。

var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();
对象也可以作为一个参数传递给函数

var sites = { 
    site1:"Runoob", 
    site2:"Google",
}; 
var invokesites = function(obj: { site1:string, site2 :string }) { 
    console.log("site1 :"+obj.site1) 
    console.log("site2 :"+obj.site2) 
} 
invokesites(sites)


TypeScript 命名空间


命名空间一个最明确的目的就是解决重名问题。TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}
以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类类和接口，则需要在类和接口添加 export 关键字。
要在另外一个命名空间调用语法格式为：
SomeNameSpaceName.SomeClassName;

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

/// <reference path = "SomeFileName.ts" />

使用编译命令如下：

tsc --out app.js TestShape.ts

嵌套命名空间

namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}

访问方法

/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

模块

TypeScript 模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}


要在另外一个文件使用该模块就需要使用 import 关键字来导入:

import someInterfaceRef = require("./SomeInterface");

使用 tsc 命令编译以上代码（AMD）：

tsc --module amd TestShape.ts

TypeScript 声明文件
















avatar
文章
阅读
粉丝