typescript

//一, 体验ts
let num: number = 100;
// num = "abc"  //编辑器就报错了
num = 1000

// 使用 tsc index.ts将ts转换成js代码

function test(a: number, b: number): number {
    return a + b;
}
// let result:string = test(1, 2);  //会报错,ts像flow一样有自动推断

// 二,使用步骤
#
TypeScript    //直接写.ts代码

## 是什么？

TypeScript是微软公司开发的一款开源的JavaScript超集语言！

JavaScript超集： 当前任何JavaScript都是合法的TypeScript代码！

TypeScript主要为JavaScript提供了类型系统和ES6语法的支持！

Flow是一个类型检查工具， TypeScript是一种开发语言！

TypeScript有自己的编译工具， 我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行！

## 如何使用

### 安装
TypeScript命令行工具的安装（ TS编译器）   //ts实时类型检测并爆红
// npm i typescript -g

安装好了之后， 全局会提供一个 `tsc`
命令给我们使用！

### 编写TypeScript代码

### 通过tsc进行编译， 最终运行

## ts配置文件的说明
1. 创建配置文件
// tsc --init

2. 设置配置项   //文件tsconfig.json
    *
    target: 指的就是将ts代码要转换成哪个版本的js代码 es5 es3 *
    module: 指的就是将ts代码转换成js代码之后， 使用的模块化的标准是什么 *
    outDir: 指的就是将ts代码转换成js代码之后， js代码存放的文件夹路径 *     // 如 "outDir": "./dist"
    rootDir: 指的就是要将哪个目录中的ts代码进型转换， ts代码的存放路径 *    // 如 "rootDir": "./src"
    strict: 是否要将ts代码转换为严格模式的js代码！

3. 使用配置文件
// tsc -p ./tsconfig.json   //这样就自动转换了


// 三,ts中的类型
//1, number
let a: number = 10;
let b: number = NaN;
let c: number = Infinity; //Infinity 属性用于存放表示正无穷大的数值
let d: number = 0xA12; //16进制数值
let e: number = 0b1010101; //2进制数值
let f: number = 0o75; //8进制数值

//2, string
let str: string = "这是一个字符串"
let str1: string = '这是一个字符串'
let str2: string = `hello 这是一个模板字符串${a}`

//3, boolean
let flag: boolean = true;
let flag1: boolean = false;

//4, 数组
// Array<数据类型>
let arr: Array < number > = [1, 2, 3, 4];
// 数据类型[]
let arr1: number[] = [1, 2, 3, 4]; //两种方式都可以

//5, 元组（Tuple）
let arr2: [number, string] = [1, 'a'];

// arr2[0] = 'a';     //报错,第一个要类型对应
// arr2[0] = 1000;    //ok

arr2[2] = 'a'; //越过赋值是可以的,两种类型都ok
arr2[2] = 1;
// arr2[2] = [];  //报错,其它类型不行

//6, void 空值
let res: void = undefined;

//7, undefined
//8, null
let res1: undefined = undefined;
let res2: null = null;

//9, any 表示任意类型
let somevar: any = 10;
somevar = "abc";
somevar = [];

//10, never类型
// never类型一般用在不可能返回内容的函数的返回值类型设置
function test(): never {
    while (true) {}
}

//11, object类型
let o: object = {};
let o1: object = [];
// 对象类型
let o: {
    name: string,
    age: number
} = {
    name: "张学友",
    age: 18
}; //要类型一一对应

//12, enum: 枚举类型    //类型的一个补充,添加一些名字等,可以对象形式的调用
// gender: 0  1  -1   //如性别
enum Gender {
    male = 1,
        female = 0,
        unknow = -1
}
let gender: Gender = Gender.male;
let obj = {
    gender: Gender.male
}

// 类型断言
let stri: any = "abc";
let len: number = ( < string > stri).length;


{
    /* 四,ts中的类 */ }
整体和es6差不多
1, ts中的类
class Person {
    // 和ES6不同的是，TS中属性必须声明，需要指定类型
    name: string
    // 声明好属性之后，属性必须赋值一个默认值或者在构造函数中进行初始化
    age: number //age: number = 10  默认值形式,这样constructor中可省略 this.age = age;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello(msg: string): void { //void没有返回值,如果有return,可以写string,number等
        console.log(msg);
    }
}

2, ts中的类的继承
class Animal {
    age: number
    constructor(age: number) {
        this.age = age;
    }
    eat() {
        console.log("吃个大鸡腿儿")
    }
}

class Dog extends Animal {
    type: string
    constructor(type: string, age: number) {
        super(age); //子类如果使用constructor构造函数,必须添加super()关键字,调用父类构造函数
        this.type = type;
    }

    // 子类中如果出现了和父类同名的方法，则会进行覆盖
    // 也就是调用的时候，调用的就是子类中的方法了！
    eat() {
        console.log('狗对象中的eat方法')
    }
}

var dog = new Dog("哈士奇", 18);
dog.eat(); //打印"狗对象中的eat方法"

3, ts中类成员的访问修饰符
// 访问修饰符：
// 指的就是可以在类的成员前通过添加关键字来设置当前成员的访问权限
// public: 公开的，默认   所有人都可以进行访问
// private： 私有的， 只能在当前类中进行访问
// protected： 受保护的，这能在当前类或者子类中进行访问

enum Color { //使用了枚举类型
    red,
    yellow,
    blue
}
class Car {
    // 如果不加访问修饰符 则当前成员默认是公开的 所有人都可以访问的
    public color: Color
    constructor() {
        this.color = Color.red;
        // this.run();
        // this.loadPeople();
    }
    // 加了private之后，当前成员就只能在当前类中使用了！,外面和子类都不能访问
    private run() {}
    // 加了protected之后，当前成员就只能在当前类或者子类中使用了！
    protected loadPeople() {}
}

let byd = new Car();
// byd.color
// byd.run();   //不能访问
// byd.loadPeople();  //外面不能访问

class Audi extends Car {
    sayHi() {
        console.log(this.color) //这里子类可以访问到父类的color数据
        // this.run();             //这里不行
        // this.loadPeople();    //这里可以
    }
}
let audi = new Audi();
// audi.color;
// audi.run();

// 4,ts中的只读属性和参数属性说明
class Cat{
    // 如果给属性添加了readonly修饰 则这个属性无法被赋值
    // 而且属性必须在声明的时候或者在构造函数中被赋值！
    readonly name: string
    // type: string
    // 构造函数中给参数前面加上修饰符，就相当于声明了一个属性！  就可以省略// type: string   // this.type = type这两句
    constructor(public type: string) {
        this.name = "加菲"
        // this.type = type
    }
}

var cat = new Cat("橘猫");
// cat.name = "123"  //错误,因为只读
// cat.type;

// 5,ts中类成员的存取器
class People{
    // name: string = ""
    private _name: string = ""
    // 属性的存取器
    get name(): string{     //读
        return this._name;
    }
    set name(value: string) {    //设置
        // 设置器中可以添加相关的校验逻辑
        if (value.length < 2 || value.length > 5) {
            throw new Error("名字不合法，不许使用！")
        }
        this._name = value;
    }
}

var p = new People();
p.name = "的司法考试来得及"
console.log(p.name);


// 五,ts中的接口
// 1,ts接口的作用和基本使用,可选属性,只读属性,自带属性检查
// 接口可以理解为一个约定 一个规范

// 接口使用interface进行生命
interface AjaxOptions{
    url: string,
    // 给属性加上？之后，这个属性就是可选的！
    type?: string,
    data?: object,
    success(data: object): void
}
// option参数中 需要包含 url type data success
function ajax(options: AjaxOptions) {}
ajax({
    url: "http://www.baidu.com",
    type: "get",
    data: {},
    success(data) {}
})

interface Point{    //相当于接口规则
    readonly x: number,   //接口中也可以使用只读属性,可选属性等方法
    y: number,
    [propName: string]: any    //这句意思是额外属性检查,就是可能还有其他属性,才不会报错,比如poi1中的z
}
let poi: Point = {
    x: 10,
    y: 10
}
// poi.x = 100;  //报错,因为只读
let poi1: Point = {
    x: 10,
    y: 10,
    z: 100
}

// 2,ts中的函数类型的接口
interface SumInterFace{
    (a: number, b: number): number
}
let sum: SumInterFace = function (a: number, b: number) {  //必须按接口规范,如果a:string就会报错
    return a + b;
}

// 3,ts中的类类型的接口
interface PersonInterFace{
    name: string,
    age: number,
    eat():void
}
class XiaoHong implements PersonInterFace{    //使用implements 让类强制遵循接口规则
    name: string = "小红";
    age: number = 18;
    eat() {}
}
// var xh = new XiaoHong();
// xh.name;
// xh.age;
// xh.eat();

// 常用于数据访问层代码的
// mysql orcal mssql mongodb
// dbinteface CRUD

// 4,ts中接口的继承
// 接口继承接口
interface TwoDPoint{
    x: number,
    y: number
}
interface ThreeDPoint{
    z: number
}
interface FourDPoint extends ThreeDPoint, TwoDPoint{   //一个接口继承另一个接口
    time: Date
}
let poi2: FourDPoint = {
    z: 100,
    x: 100,
    y: 100,
    time: new Date()
}

// 接口继承类
class Bird{
    type: string = "画眉鸟"
    fly():void {}
}
interface Fly extends Bird{}
let flyingBird: Fly = {
    type: "啄木鸟",
    fly(): void {}
}