TypeScript 基础类型+函数+接口+类

1.简介:

TypeScript 是 JavaScript 的一个超集、由微软开发的自由和开源的编程语言、设计目标是开发大型应用。是一种面向对象的编程语言,遵循强类型

javascript与typescript的区别:

1.TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

2.TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

安装:

npm install -g typescript

使用node命令执行js

$ node XXX.js 

2.数据类型

1.数字类型(number)

/* 3.数字类型 */
let num:number = 12315;
 num = 1008611
 console.log(num)

2.字符串类型(string)

/* 使用单引号(')或者双引号(")来表示字符串类型，反引号(`)来定义多行文本或者内嵌表达 */
 /* 2.字符串类型 */
let strs:string = "好想爱这个世界啊";
strs = "恋爱的犀牛"
console.log(strs)

3.布尔类型(boolean)

 /* 1.布尔类型 */
 let flag:boolean = true;
 flag = false;
 console.log(flag)

4.数组类型

有两种表现形式

// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
 let arr: Array<number> = [1, 2];

5.任意类型(any)

声明为 any 的变量可以赋予任意类型的值
任意值允许在编译时可选择地包含或移除类型检查
/*7.任意类型(any) */
let temp:any = 123156;
temp = "年少有为"
console.log(temp)

6.元祖

用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
let x: [string, number];
x = ['Runoob', 1];    // 一类型对应一值

7.枚举(enum)

枚举类型用于定义数值集合
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

8.void

于标识方法返回值的类型，表示该方法没有返回值。
/* 9.void 无返回值类型 */

function run():number{
    console.log("run")
    return 1234
}
console.log(run())

9.null

表示对象缺失

10.undefined

用于初始化变量为一个未定义的值
/* 8.null 与 undefined */
let to:null
to=null

let tos:null | undefined
tos =undefined

11.never

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

2.1TypeScript遵循强类型

类型断言(Type Assertion)

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。
var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

如何确定单个断言是否足够
当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 S。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。

它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。
编译后生成的JavaScript代码
var str = '1';
var str2 = str;  //str、str2 是 string 类型
console.log(str2);

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

变量作用域

TypeScript 有以下几种作用域：
    全局作用域 − 
                全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
    类作用域 − 
                这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
    局部作用域 − 
                局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。
                
var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

3.函数

函数是一组一起执行一个任务的语句。

定义函数

// 函数定义
function greet():string { // 有返回值切返回一个string
    return "Hello World" 
} 
 
function caller() { //无返回值
    var msg = greet() // 调用 greet() 函数 
    console.log(msg) 
} 

带参数的函数

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可选参数与默认参数

可选参数使用问号标识 "?"

//可选参数
function buildName(firstName: string, lastName?: string) {
    if (lastName){
        return firstName + " " + lastName;
    }else{
       return firstName; 
    }    
}
调用该函数时如果未传入参数则使用该默认值
//默认参数
function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 

剩余参数

//以 ... 为前缀，它将成为一个由剩余参数组成的数组.
function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
 } 

匿名函数

var msg = function() { 
    return "hello world";  
} 

匿名函数自调用

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

构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

递归函数

递归函数即在函数内调用函数本身
function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 

Lambda函数（箭头函数）

Lambda 函数也称之为箭头函数。
箭头函数表达式的语法比函数表达式更短。



//
var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

//
var foo = (x:number)=> {    
    x = 10 + x 
    console.log(x)  
} 
foo(100)

//不指定参数类型，通过函数内判断
var func = (x)=> { 
    if(typeof x=="number") { 
        console.log(x+" 是一个数字") 
    } else if(typeof x=="string") { 
        console.log(x+" 是一个字符串") 
    }  
} 
func(12) 
func("Tom")

//无参数时可以设置空括号，单个参数时括号()是可选的
var disp =()=> { 
    console.log("Function invoked"); 
} 
disp();

函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

//参数类型不同
function disp(s1:string):void; 

//参数数量不同
function disp(n1:number,s1:string):void; 

//参数类型顺序不同
function disp(x:any,y?:any):void;

4.接口

接口是一系列抽象方法的声明，

是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，

然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

实例

//interface  定义接口
interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 

//customer 实现了接口 IPerson 的属性和方法。
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 

联合类型接口

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); //联合类型参数
} 

接口和数组

interface ages { 
   [index:string]:number 
} 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误

接口继承

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

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

继承使用关键字 extends。

//单继承
interface Person { 
   age:number 
} 
interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 

//多继承
interface IParent1 { 
    v1:number 
} 
interface IParent2 { 
    v2:number 
} 
interface Child extends IParent1, IParent2 { } 

var Iobj:Child = { v1:12, v2:23} 

5.类

TypeScript 是面向对象的 JavaScript。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
• 构造函数 − 类实例化时调用，可以为类的对象分配内存。
• 方法 − 方法为对象要执行的操作。

访问控制修饰符

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

类

class Cat{
    name:string
    //构造函数
    constructor(name:string){
        this.name = name
    })
    //方法
    run():string{
        return this.name
    }
}

//创建一个对象
var obj = new Cat("狸猫")
//访问字段
obj.name
//访问方法
obj.run();

类的继承

class Cat{   //猫
    name:string
    age:number
    
    //构造函数
    constructor(name:string){
        this.name = name
    })
}

class liMao extends Cat{  //狸猫，继承猫类

    constructor(name:string){
        super(name)
    })
    
    eat():void{
        console.log(this.age)   //子类可以直接使用父类的属性
    }
}

子类只能继承一个父类，TypeScript 不支持继承多个类，但支持多重继承

class Root {str:string; } 
class Child extends Root {} 
class Leaf extends Child {}

继承类的方法重写

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

static关键字

用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。
class StaticMem {  
   static num:number; //添加static关键字
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) //类名.属性名
   } 
} 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

instanceof运算符

用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
//true

类和接口

类可以实现接口，使用关键字 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) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )