TypeScript学习

概念

• TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

使用

• 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。
• tsc file.ts 转换为js文件

遇到问题

• 变量变红色　－　https://www.jianshu.com/p/78268bd9af0a

数据类型

• JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。
• 原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

boolean

let isDone: object = false; // ok
let isDone: object = new Boolean(1); // ok


//boolean代表基本类型  Boolean代表对象
// 变量接收的Ｂoolean类型的值，而不是对象
let isDone: boolean = new Boolean(1); //error


let isDone: Boolean = new Boolean(1); //ok

let isDone: boolean = Boolean(1); //ok
// 直接调用 Boolean 也可以返回一个 boolean 类型 

Number

//十进制
let dec: number = 6;

//16进制
let hex: number = 0xf00d;

// 二进制
let binary: number = 0b1010;
// 8进制
let oct: number = 0o744
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

//其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。
// Infinity 属性用于存放表示正无穷大的数值。
// NaN NaN 属性是代表非数字值的特殊值。

string

let name: string = 'Xiaowang'
let age: number = 18;

// 字符串模板
let sentence: string = `my name is ${name} to age ${age}`

void

//JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void `表示没有任何返回值的函数`
function fun(): void {
    console.log('no retuen!')
}

// 有返回类型的
function fun1(): number {
    return 1;
}

//声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：
//let unusable: void = undefined;

Null 和 Undefined

• undefined 类型的变量只能被赋值为 undefined，null 类型的变量只能被赋值为 null。

• 与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：

let u: undefined = undefined; //ok

let n: null = null; // ok

let num: number = undefined; // ok

 
let u: undefined;  //ok
let num: number = u;



let u: void; //error
let num: number = u;
// void 类型的变量不能赋值给 number 类型的变量 , void是类型不能是数值 但是undefined和null是可以的

any

• 允许被赋值为任意类型。

// 对于普通的数据，在赋值过程中不允许类型改变
let name: string = 'xiaoyi' // error
name = 7;

// 对于任意数据类型，允许类型改变
let name: any = 'xiaoyi'  // ok
name = 7;
 

• 声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

//声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

// 可以访问不存在的属性
let obj: any = 'xiaoyi'
obj.name // undefined

• 未声明的变量为任意数据类型

// 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let name; // ok  等价于 let name: any = undefined;
name = '123'
name = 123

类型推理 (Type Inference)

• 若类型没有指定，则是当前值的类型。

//如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
let name; // let name: any = undefined;

let name = 'xiaoyi' // let name: string = 'xiaoyi';
name=7; //error

联合类型(Union Types)

• 表示取值可以为多种类型中的一种.
• 联合类型使用 |分隔每个类型。

    let unionName: string | number;
    unionName = 'xiaoyi'; //ok
    unionName = 18 // ok

    unionName = false // error 只能为string和number

• 当一个变量有多个类型时候，只能访问此联合类型的所有类型里共有的属性或方法。

function getLength(something: string | number): number {
    return something.length;
}

getLength('123'); // ok

getLength(123); // error

对象的类型——接口(Interfaces)

• 它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。

    //定义接口
    interface Person {
        name: string;
        age: number;
    }

    // 使用
    let obj: Person = {
        name: 'xiaoyi',
        age: 18
    }

    console.log(obj)
    // { name: 'xiaoyi', age: 18 }

• 赋值的时候，定义的接口变量需要与赋值时候变量个数保持一直。

 //定义接口
    interface Person {
        name: string;
        age: number;
    }

    // ok
    let obj: Person = {
        name: 'xiaoyi',
        age: 18
    }

    //error
    let obj: Person = {
        name: 'xiaoyi',
        age: 18,
        sno: '2017G121221'
    }

    console.log(obj)
    // { name: 'xiaoyi', age: 18 }

• 可选属性－　不希望完全匹配可以使用｀？｀去标识为可选属性（可选属性可加可不加）

interface Person {
    name: string;
    age?: number;
}
// ok
let tom: Person = {
    name: 'Tom'
};

// ok
let tom: Person = {
    name: 'Tom',
    age: 18
};

//error 不允许添加未定义的属性 
let tom: Person = {
    name: 'Tom',
    sno: '2017sddsfdsf'
};

• 任意属性- [propName: string] 定义了任意属性取 string 类型的值。需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集.

    interface Person {
        name: string;
        age?: number;
        //定义为string 类型
        // [propName: string  ]: any;
        [propName: string  ]: string;
    }
    
    //error
    // 任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。
    let tom: Person = {
        name: 'Tom',
        age: 25,
        sno: '123'
    };

• 只读属性 - readonly 定义只读属性

    interface Person {
        readonly id: string; 
        name: string;
        age?: number;
    }

    // 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候
    let obj: Person = {
        id: '89757',
        name: 'Tom',
        gender: 'male'
    };
    //error 只读不能被改变
    obj.id = '122332'