TypeScript基础指南

TypeScript基础指南

ts介绍

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

安装ts

​ 安装 typescript：

npm install -g typescript

var message:string = "Hello World"  
console.log(message)
//Hello World

TS基础语法

类型检查器

ts可以检查语法错误，可以检查逻辑错误，可以判断函数未经声明就调用

在声明变量的时候需要进行类型的生命

const num :number = 1;
//如果赋值和声明的类型不一致，就会报错

面向对象思想

ts沿用了es6的语法，可以使用class定义属性和方法，下面是一个面向对象的实例

class C { 
   name():void { 
      console.log("hhhh") 
   } 
} 
var obj = new C();
obj.name();
//hhhh

ts中的类型

所有类型几乎都是其类型的小写

但是有几个较为特殊的存在

声明任意类型

let a:any = '1';
//或者let a : any = 1;

使用any声明的变量可以是任意类型，一般用于接收用户的输入或者定义储存任意类型的数组。

声明数组

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

声明元组

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

let x: [string, number];
x = ['a', 1];    // 运行正常
x = [1, 'a'];    // 报错
console.log(x[0]);    // 输出 a

声明函数

function function_name():return_type { 
    // 语句
    return value; 
}
//如果需要返回值 那么需要判断返回值的类型



function Name(first: string, last: string) {
    return first + " " + last;
}

let res1 = buildName("zhangsan");                  // 错误，少参数
let res2 = buildName("zhangsan", "ls", "ww");  // 错误，参数多了
let res3 = buildName("zhangsan","lisi")     // 正确

声明元组

声明元组的语法：

let tuple_name = [value1,value2,.....valuen]
let tup1 :[number,string,boolean] = [1,'a',true]
//可以声明一个类型 可以在类型后面加一个？ 表示是可选的
var a =[10,"Runoob"] 
var [b,c] = a 
console.log( b )    
console.log( c )

TS重要概念

类型断言

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

语法格式：

<类型>值

或:

值 as 类型

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

常用于一些js的项目迁移到ts 类型断言的意义在于告诉编辑器自己更加了解这个类型。

联合类型

var val:string|number 
val = 1
console.log("数字为 "+ val);
val = "aa";
console.log("字符串为 " + val);

接口

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

//下面是一个接口，以及实现它的类的实例
interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
var customer:IPerson = { 
    firstName:"Zhang",
    lastName:"San", 
    sayHi: ():string =>{return "Hello"} 
} 

接口继承

接口继承就是说接口可以通过其他接口来扩展自己，Typescript 允许接口继承多个接口，继承使用关键字 extends

单接口继承语法格式：

Child_interface_name extends super_interface_name

多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

类

TypeScript 是面向对象的 JavaScript，类描述了所创建的对象共同的属性和方法，TypeScript 支持面向对象的所有特性，比如 类、接口等，TypeScript 类定义方式如下：

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

类和接口

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

以下实例 AgriLoan 类实现了 ILoan 接口：

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 )

访问控制符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

• public（默认） : 公有，可以在任何地方被访问。
• protected : 受保护，可以被其自身以及其子类访问。
• private : 私有，只能被其定义所在的类访问。

命名空间

命名空间一个最明确的目的就是解决重名问题。

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

TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}