js的进阶Ts

1 基础知识

   1.1 作用：

ts语言是对js的补充，使得js的可用性提高，同时也支持es6的语法，ts可以通过相应的编译器去变成我们可使用的js文件，不会引起一些错误。使得开发一些大型项目跟加容易。

   1.2 使用：

ts的使用需要node.js的支持，通过node的虚拟服务器去运行，首先要安装npm，没有的化就在终端
npm install
如果不行的话，就需要去官网下载Node.js再安装
然后再安装
npm config set registry https:
最后
npm install -g typescript

2 新语法

   2.1 类型：

• any类型 ：表示任何变量，也就是说可以任何类型的来给值。
• never类型：never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
• enum类型：枚举类型，和java很类似enum color{red,blue,yellow},调用的话就直接调用，let get:String=color.red。

   2.2 变量：

  与js不同的时，Ts需要声明变量类型，函数也有返回值，也可以不声明，就默认为any类型

//变量名：类型
var i:String="ssss";
1
2

   2.3 函数：

  ts中的函数会需要返回值，和java类似的

function name():return_type{
·····
}
1
2
3

ts中还可以使用es6的箭头函数

let nameBy=(name1:type1,name2:type2···)=>{return result}
//当函数没有参数或只有一个可以省略括号或这函数体只有一条语句可以去掉{}
let nameBy=name2:type2=>{return result}
let nameBy=>return result
1
2
3
4

   2.4 封装：

  Ts里面有一些封装的类，和java一样的用法.可以把数据转换成类来对待

let numbers=new Number(value);
let string=new String(value);
1
2

这些封装的类提供了一些便捷的方法去处理数据。

   2.4 map对象：

  和java中的map集合很像，同样使用键值对，但使用的用数组来存

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 
let maper=new Map([["1","sb"],["2","tsb"]]);
1
2
3
4
5

• map.clear() – 移除 Map 对象的所有键/值对 。
• map.set() – 设置键值对，返回该 Map 对象。
• map.get() – 返回键对应的值，如果不存在，则返回 undefined。
• map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
• map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
• map.size – 返回 Map 对象键/值对的数量。
• map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
• map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

   2.5 元组：

  可以用来装不同类型的元素，调用就和数组差不多

let m=[26,"sb"];
1

push():向元组添加元素，添加在最后面。
pop():从元组中移除元素（最后一个），并返回移除的元素。

   2.6 联合变量：

  ts中一个变量可以预先设置多个类型，等传入的参来判断该用那种类型。

let m：String|number|String[];
1

但是不能赋值不是预先设置的类型。

   2.7 接口：

  ts可以设置接口，和java差不多，不过接口里的变量和方法需要全部实现

interface name {
    name:String, 
    //这里时箭头函数
    display:()=>string,
}
//实现
let person:name={
   name:"issa",
   display:():string=>{
      ·····
   }
}
1
2
3
4
5
6
7
8
9
10
11
12

   2.8 类和对象：

  ts允许我们去创建一个类，这样就不需要直接去创建很多对象,同时再ts转变的js文件中类

class person{
   name:string;
   constructor(name:string){
   this.name=name;  
  }
  display():string{
    return this,name;
  }
}
//使用
let person:Person=new Person("issa");
//js转换代码
var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.display = function () {
        return this.name;
    };
    return Person;
}());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  类也是可以继承的，和java都是extend关键字，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。一个子类只能有一个父亲，而一个子类是可以有爷爷的，可以层层继承。

class Shape { 
   Area:number 
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
//里面有隐藏的Area字段，从父类遗传的
//disp（）是子类的独有方法

   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  //这里子类默认无参构造，会去调用父类的构造器（如果父类写了有参而无无参，就只有有参的构造器而已）
var obj = new Circle(223); 
obj.disp()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

   2.8 命名空间：

目的：命名空间一个最明确的目的就是解决重名问题。
使用：用namespace来命名，用export去调用
范围：命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。

namespace name{
export interface person{
     display();
  }
}
//name.去引用
//如果不在同一个ts文件就用///去引用
//这个文件中有一个接口。
/// 
class person implements IShape {
 
}
1
2
3
4
5
6
7
8
9
10
11
12

   2.9 模块：

目的：TypeScript 模块的设计理念是可以更换的组织代码。
使用：使用import去引用，使用export去呈现内容，也就是导出。

// 文件名 : person.ts 
export interface person { 
   // 代码部分
}
//文件名：son.ts
//require中的为文件目录
import person = require("./person");
1
2
3
4
5
6
7

尾声

这些就是我所知的一些ts的知识，如有错误还希望能指出来。