TypeScript学习

一、TypeScript开发环境搭建
1、下载Node.js
http://nodejs.cn/

2、安装Node.js

3、使用npm全局安装typeScript

1.cmd 进入命令行

2.输入: npm i -g typescript

4、创建一个ts文件

5、使用tsc对ts文件进行编译

1.进入命令行
2.进入ts文件所在目录
3.执行命令：tsc 文件名.ts

如图：

二、ts类型

三、类型声明解析

一、字面量类型
//直接使用字面量进行类型声明
let a: 10;
a = 10; // 这个时候，a的值只能是10  如果是其他任何值都会报错

// 也可以使用 | （或的意思）来连接多个类型（联合类型）
let b: boolean | string  //意思是b可以声明成任何的boolean类型或者string类型
b = true;
b = "hello";




二、any 类型
//any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
//使用TS时，不建议使用any类型
let d: any; // 显式any
let d; //隐式any
d = 10;
d = "hello";
d = true;    

三、unknown 类型 
//unknown 实际上就是一个类型安全的any,unknown类型的变量不能直接复制给其它变量，但是any是可以的
//举例：
let a;
a = 10
let b: string;
b = a;// any类型 a为number，可以将a赋值给b
如果：
let a: unknown;
a = 10;
let b: string;
b = a;// 将unknown类型的变量赋值给b  会报错

//如果一定要将unknown类型的变量赋值给b 可以判断
if (typeof a === "string") {
 b = a
}

四、void 类型
// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn () :void{
}

五、never 类型
// never 表示永远不会返回结果
function fn2(): never{
throw new Error("报错了！！！")
}

六、object类型
// object 表示一个js对象
// 第一种写法  不常用
let a: object;
a = {};
a = function () {
};

// 第二种写法
// {} 用来指定对象中可以包含哪些属性
// 语法：{属性名:属性值,属性名:属性值}
// 在属性名后边加上? ,表示属性是可选的
let c: {name: string, age?: number} //age后面加上问号 赋值的时候不写age该属性也不会报错
c = {name: "小明",age: 10} 

// [propName(自定义名字): string]: any 表示任意类型的属性 
let d: {name: string,[propName: string]: string};//可以任意赋值
d = {name: "小明", age: "10",sex: "男"}

七、设置函数结构的类型声明
/*
*  设置函数结构的类型声明：
*   语法:(形参: 类型,形参: 类型,...) => 返回值
**/
let d: (a: number, b: number) => number

八、array类型
//  string[]表示字符串数组
let a: string[];
a = ["a","b"]

// number[]表示数字类型数组
let c: number[];
c = [1,2]

// 另外一种写法
let d: Array<number>;
d = [1,2]

九、元组类型 tuple
// 元组类型，元组就是固定长度的数值；语法：[类型,类型,类型]
let a: [number,string,boolean];
a = [1,"hh",true]

十、枚举 enum
// 枚举 enum
enum Gender{
  male = 0,
  female = 1,
}
let i: {name: string,gender: Gender};
i = {
  name: "小明",
  gender: Gender.male
}
console.log(i.gender === Gender.male);//结果为true

四、类型断言

//类型断言：可以用来告诉解析器变量的实际类型，一般用于unknown类型的变量要赋值的情况
//语法：
//变量 as 类型
//或
//<类型>变量

s = e as string;
s = <string>e

五、类型的别名

type myType = 1 | 2 | 3 | 4;
let k: myType;
k = 2;

六、ts自动编译

tsc //直接在终端使用tsc命令，会编译所有ts文件
tsc -w // 自动实时监听编译 如果要编译指定文件就是 tsc index.ts -w 即可

七、tsconfig.json 配置文件说明

{
  /*
    tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译

    "include" :用来指定哪些ts文件需要被编译
               路径：** 表示任意目录
                      * 表示任意文件
  
  */
  "include": [
    "./src/**/*" //src目录下的任意目录和任意文件都需要被编译
  ],
  // 不需要被编译的文件目录 默认值：["node_mudules","bower_components","jspm_packages"]
  "exclude": [
    "./src/hello/**/*" // src下的hello下的所有目录和文件都不需要被编译
  ],

  "compilerOptions": {
    // target 用来指定ts被编译为的es的版本
    "target": "es6",

    // module 指定要使用的模块化的规范
    "module": "es6",
     
    //lib 用来值当项目中要使用的库，一般不设置
    "lib": ["dom"],

    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist", //将编译后的js文件同意放到dist目录下面 

    // outFire 将编译后的js代码合并为一个js文件
    // 设置 outFire后，所有的全局作用域中的代码会合并到同一个文件中
    // "outFile": "./dist/app.js",
    
    // 所有严格检查的总开关 默认false
    "strict": false,

    // 是否对js文件进行编译，默认是false
    "allowJs": false,

    // 是否检查就是代码是否符合语法规范，默认是false
    "checkJs": false,

    // 是否在编译后的js文件中移除注释
    "removeComments": false,

    // 不生成编译后的js文件
    "noEmit": false,

    // 当有错误时不生产编译后的js文件
    "noEmitOnError": false,

    // 用来设置编译后的文件是否使用严格模式，默认false
    "alwaysStrict": false,

    // 不允许隐式的any类型  设置该项后 let a; a = "哈哈哈" 会报错 因为a 是隐式any类型 默认是false
    "noImplicitAny": true,

    // 不允许不明确类型的this
    "noImplicitThis": true,

    // 严格的检查空值
    "strictNullChecks": true,
  }
}

八、使用webpack编译、打包ts项目
参考：https://www.jianshu.com/p/04acf95a284f

九、面向对象

/**
 * 直接定义的属性是实例属性，需要通过对象的实例去访问
 */
class Person {
  name = "孙悟空";
  age = 18;
}

const person = new Person() //实例化
console.log(person.name);


/**
 * 使用static 开头的属性是静态属性（类属性），可以直接通过类 去访问
 */

class Dog {
 static color = "yellow";

}
console.log(Dog.color);//加了static 不用实例化 可以直接类名.属性就能访问到值

十、构造函数

/**
 * 同一个对象创建不同的实例 使用constructor构造函数  这是内置的方法
 */
class Car{
  money: number;
  color: string;

  // constructor 被称为构造函数
  // 构造函数会在对象创建时调用

  constructor (money: number,color: string) {
    // 在实例方法中，this就表示当前调用的实例
    // 在构造函数中当前对象就是当前新建的那个对象
    // 可以通过this向新建的对象中添加属性
   this.money = money;
   this.color = color
  };

   break() {
    console.log('哈哈哈',this.color);//结果为 red 和 blue 
    
  }
}
const car = new Car(100,'red')
const car2 = new Car(2000,'blue')

console.log(car);
console.log(car2);

car.break()
car2.break()

十一、继承和关键字的用法

1.简单的继承例子：

/**
 * Father被称为父类，Son被称为子类，使用继承(extends)后，字类将会拥有
 * 父类所有的方法和属性。
 * 
 * 通过继承(extends)可以将多个类中共有的代码写在一个父类中
 * 这样只需要写一次即可以让所有的子类都同时拥有父类中的属性和方法
 * 
 * 如果希望在字类中添加一些父类中没有的属性或方法直接加就行
 * 如果在子类中添加了父类相同的方法，则字类方法会覆盖父类方法
 * 这种子类覆盖掉父类方法的形式，我们称之为重写
 * 
 */

// 一、创建一个父类
class Father{
  name: string;
  age: number;

  constructor (name: string,age: number) {
    this.name = name;
    this.age = age;
  };

  walk() {
    console.log("我是父类方法");
    
  }
}

// 二、创建一个子类，继承(extends)父类（也就是继承Person这个类）
class Son extends Father{
 walk() {
   console.log("我是子类覆盖掉父类的方法");//子类覆盖掉父类的方法 称为重写
 };

 eat() {
   console.log("我是字类中添加的方法，父类中是没有的");
   
 }
}

const son = new Son('小红',28);
console.log(son);//'小红',28

son.walk();//值为：我是子类覆盖掉父类的方法
son.eat();//值为：我是字类中添加的方法，父类中是没有的

2、super关键字

// 如果子类中也需要使用构造函数，添加新的属性，那么就需要用到super关键字

// 一、创建一个父类
class Father{
  name: string;
  age: number;

  constructor (name: string,age: number) {
    this.name = name;
    this.age = age;
  };

  walk() {
    console.log("我是父类方法");
    
  }
}

// 二 创建一个子类
class Son extends Father{
  height: string;

  constructor (name: string, age: number,height: string) {
    super(name,age);//super里面的参数为父类中constructor函数的参数，需要接收
    this.height = height;//重写的属性
  };
 // super也可以调用父类的方法
  sonWalk() {
    super.walk()//在类的方法中,super就表示当前子类的父类
  }
}

var son = new Son("小明",12,"40kg")
console.log(son);//值为：{name: '小明', age: 12, height: '40kg'}
son.sonWalk()

super关键字的总结：
1、子类在创建新的构造函数（创建属性）的时候必须引用父类的构造函数，可以采用super 关键字，如果不适用super的话，就是直接重写了构造函数

2、子类的方法可以采用super关键字调用父类的方法
3、某些需要加以限制的方法可以采用访问修饰符加以限制

十二、抽象类