ts学习总结

ts学习总结
ts最重要的特性：类型系统、适用于任何规模

数值

let num: number = 1

但是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字

字符串

let name: string = 'wujuan'

布尔值

let isDone: boolean = false
使用构造函数 Boolean 创造的对象不是布尔值
let createdByNewBoolean: boolean = new Boolean(1) 则会报错, 事实上 new Boolean() 返回的是一个 Boolean 对象
但是直接调用Boolean也可以返回一个boolean类型
let createdByBoolean: boolean = Boolean(1);

在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null 和 undefined）一样。

Null 和 Undefined

let un: undefined = undefined
let nu: null = null

任意值

任意值（Any）用来表示允许赋值为任意类型。

let myname: any = '111'
myname = 111

tips：

1.在任意值上访问任何属性和方法都是允许的

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

void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

function myname(): void {
    console.log("Myname is WJ");
}

联合类型

联合类型表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

对象类型–接口

interface Person {
    name: string;
    age: number;
}

let lily: Person = {
    name: 'lily',
    age: 28
}

定义的变量比接口多了或少了一些属性都是不允许的

interface Person {
    name: string;
    age: number;
}

let lily: Person = {
    name: 'lily'
}

Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

let Nike: Person = {
    name: 'Nike',
    age: 25,
    sex: 'female'
}

Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

若某个属性不是完全需要的，可以使用可选属性

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

let lily: Person = {
    name: 'lily'
}

但是仍不允许添加未定义的属性：

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

let lily: Person = {
    name: 'lily',
    sex: 'male'
}
Type '{ name: string; sex: string; }' is not assignable to type 'Person'.
  Object literal may only specify known properties, and 'sex' does not exist in type 'Person'.

如果希望一个接口允许有任意的属性，可以使用如下方法：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    sex: 'male'
};

一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let lily: Person = {
    name: 'lily',
	age: 25,
    sex: 'male'
};
Property 'age' of type 'number | undefined' is not assignable to string index type 'string'.
Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
  Property 'age' is incompatible with index signature.
    Type 'number' is not assignable to type 'string'.

任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了，若想解决上述报错可以使用联合类型

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number | undefined;
}

let lily: Person = {
    name: 'lily',
	age: 25,
    sex: 'male'
};

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值，你可以在属性名前用readonly来指定只读属性:

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let lily: Person = {
    id: 7625,
    name: 'lily',
    sex: 'male'
};

若在此时改变id的值 lily.id = 7658则会报错Cannot assign to ‘id’ because it is a read-only property.

数组类型

在ts中，数组类型有多种定义方式

方式一：类型+[]

let arr: number[] = [1, 2, 3, 4, 5]

表示该数组为数字类型的数组，不能接受其他类型的参数

方式二：数组泛型

let arr: Array<number> = [1, 2, 3, 4, 5]

方式三： 使用接口表示数组

interface numArray {
   [propName: number]: number;
}

let numArr: numArray = [1, 2, 3, 4]

如果不想约束数组元素的类型
let arr: any[] = [1, ‘str’, false]

函数类型

函数定义的方式有两种：函数声明和函数表达式

函数声明：

function sum(x: number, y: number): number {
    return x+y
}

函数表达式：

let mySum = function (x: number, y: number): number {
    return x + y;
};
用接口定义函数的形状
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

函数的可选参数：和接口的可选参数类似，使用？来表示可选参数，但是可选参数必须在必选参数后面，可选参数后面不允许再出现必需参数了：

function introduce(name: string, age?: number) {
    if(age) {
        return `My name is ${name}, 我今年${age}岁`
    }else {
        return `My name is ${name}`
    }
}
let Nike = introduce('Nike', 21)

函数的参数默认值：可以给函数添加默认值

function introduce(name: string, age: number = 32) {
    if(age) {
        return `My name is ${name}, 我今年${age}岁`
    }else {
        return `My name is ${name}`
    }
}
let Nike = introduce('Nike')

剩余参数：可以使用 …rest 的方式获取函数中的剩余参数

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a: any[] = [];
push(a, 1, 2, 3);

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型

值 as 类型 

tips：

1、联合类型可以被断言为其中一个类型

2、父类可以被断言为子类

3、任何类型都可以被断言为 any

4、any 可以被断言为任何类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法，使用类型断言可以避免访问其没有属性和方法时的编译报错，但是在运行时没有该属性或者方法还是会报错

枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，枚举使用 enum 关键字来定义,枚举成员会被赋值为从0开始递增的数字，同时也会对枚举值和枚举名进行反向映射

enum Color {
    blue,
    yellow,
    red,
    green
}
console.log(Color['blue'] === 0) // true
console.log(Color[1] === 'yellow') // true

常数枚举
常数枚举是使用const enum 定义的枚举类型：和普通枚举的区别是它会在编译阶段被删除，并且不能包含计算成员