TypeScript学习笔记

橙三吉。 提交于 2020-12-20 01:19:22

TypeScript是JavaScript的一个超集,支持ECMAScript 6标准。

 1. tsc命令

我们可以使用tsx命令来执行TypeScript的相关代码,通常使用.ts作为TypeScript代码文件的扩展名。

tsc 常用编译参数

序号 编译参数说明
1.

--help

显示帮助信息

2.

--module

载入扩展模块

3.

--target

设置 ECMA 版本

4.

--declaration

额外生成一个 .d.ts 扩展名的文件。

tsc ts-hw.ts --declaration

以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。

5.

--removeComments

删除文件的注释

6.

--out

编译多个文件并合并到一个输出的文件

7.

--sourcemap

生成一个 sourcemap (.map) 文件。

sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。

8.

--module noImplicitAny

在表达式和声明上有隐含的 any 类型时报错

9.

--watch

在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.TypeScript基础类型

Any类型:任意值是TypeScript针对变成时类型不明确的变量使用的一种数据类型。

null:“什么都没有”,null是一个只有一个值得特殊类型。表示一个空对象引用。用typeof检测null返回的是object。

undifined:“没有设置值的变量”,typeof一个没有值得变量会返回undifined。

never:是其他类型(包括null和undefined)的子类型,代表从不会出现的值。这意味着生米国为never类型的变量只能被never类型所赋值,在函数中他通常表示为抛出异常或无法执行到终点(例如无限循环)。

 

3.变量声明

变量使用前必须先声明

var [变量名]: [类型] = 值;
//例如
var myName: string = "aaa";

 

4.类型断言和类型推断

类型断言可以用来手动指定一个值得类型,即允许变量从一种类型改为另一种类型。之所以不被称为类型转换,是因为转换通常意味着某种运行时的支持。但是,类型断言纯粹是一个编译时语法,同时,它也是一种为编译器提供关于如何分析代码的方法。

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

当类型没有给出时,TypeScript 编译器利用类型推断来推断类型。

5.函数

1)函数返回值:

ts的函数可以设置返回值类型:

function function_name():return_type { 
    // 语句
    return value; 
}

return_type是返回值的类型,返回值的类型需要与函数定义的返回类型(return_type)一致。

 2)带参数函数

设置函数参数时可以设置参数的类型。

//格式
function func_name( param1 [:datatype], ( param2 [:datatype]) {   
}
//实例
function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2));

3)可选参数和默认参数

可选参数:

在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?。

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

默认参数:

我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数。

//格式
function function_name(param1[:type],param2[:type] = default_value) { 
}
//实例
function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

4)剩余参数

当不知道传入多少参数,可以使用剩余参数定义。

剩余参数可以将不确定数量的参数作为一个数组传入,在函数参数进行解构。

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

5)匿名函数自调用

匿名函数自调用在函数后面()即可

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

6)构造函数

TypeScript也支持使用JavaScript内置的构造函数Function()来定义函数

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

7)Lambda函数(箭头函数)

箭头函数表达式比函数表达式更短。箭头函数是一种匿名函数,箭头函数内部的this是词法作用域,由上下文确定。

( [param1, parma2,…param n] )=>statement;

8)函数重载

重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。

每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。

6.TypeScript元组

我们知道数组中元素的数据类型都是相同的,如果存储的元素数据类型不同,则需要使用元组。

元组中允许存储不同类型的元素,元组可以作为参数传递给函数。

//格式
var tuple_name = [value1,value2,value3,…value n];
//实例
var mytuple = [10,"Runoob"];

7.TypeScript联合类型

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

//语法
Type1|Type2|Type3

//实例
var val:string|number 
val = 12 
console.log("数字为 "+ val) ;
val = "Runoob" 
console.log("字符串为 " + val);

//也可以将联合类型作为函数参数使用:
function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name); 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i]);
                } 
        } 
} 
disp("Runoob") ;
console.log("输出数组....") ;
disp(["Runoob","Google","Taobao","Facebook"]);

8. TypeScript接口

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

//语法
interface interface_name { 
}
//实例
interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

接口继承:

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字 extends。

//单接口继承格式:
Child_interface_name extends super_interface_name

//多接口继承格式:
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

//实例
interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

9.TypeScript类

 类描述了所创建的对象共同的属性和方法。

定义类的关键字为 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 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。

类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。

TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。

 

//格式
class child_class_name extends parent_class_name

//实例
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()方法。")
   } 
}

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

instanceof 运算符:用于判断对象是否是指定的类型,如果是返回 true,否则返回 false。

访问控制修饰符:

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 是私有的

10. TypeScript对象

鸭子类型:

鸭子类型(英语:duck typing)是动态类型的一种风格,是多态(polymorphism)的一种形式。

在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由"当前方法和属性的集合"决定。

11.TypeScript命名空间

命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。

TypeScript 中命名空间使用 namespace 来定义

//定义语法:
namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

//在另一个命名空间调用语法
SomeNameSpaceName.SomeClassName;

//一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它
/// <reference path = "SomeFileName.ts" />

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!