typescript简单的应用

简单来说typescript就是新增一下方法，以及增加类型判断

一、普通的类型判断

1、布尔类型（boolean）

let isDone: boolean = false
let createdByBoolean: boolean = Boolean(1)

2、数字类型（number）

let decLiteral: number = 6
let hexLiteral: number = 0xf00d
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010
// ES6 中的八进制表示法
let octalLiteral: number = 0o744
let notANumber: number = NaN
let infinityNumber: number = Infinity

3、字符串类型（string）

let myName: string = 'Tom'
// 模板字符串
let sentence: string = `Hello typescript`

4、空值类型（void、null、undefined）

// 返回空值的函数
function alertName(): void {
    alert('My name is Tom')
}
// 默认空值
let unusable: void = undefined
// Null 和 Undefined
let u: undefined = undefined
let n: null = null

5、任意值（any）

let myFavoriteNumberAny: any = 'seven'
myFavoriteNumberAny = 7

6、联合类型

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

7、类型断言（根据类型来做判断）

function getLength(something: string | number): number {
    // 当只有something为字符串时才会找到
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

二、数组类型

let fibonacciNum: number[] = [1, 1, 2, 3, 5]
let fibonacciStr: string[] = ['1','2','3','4','5']
let fibonacciBool: boolean[] = [true,false]
let fibonacciVoid: void[] = [undefined,null]
// any在数组里的应用
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }]

三、对象(接口)类型

1、指定对象的类型（interface）　

interface Object {
    name: string
    age: number
}
const object: Object = {
    name: '我',
    age: 18
}

2、可选属性（指定类型少了一些属性或者多一些属性都是不允许的，除了可选属性）

interface Object1 {
    name?: string
    age: number
}
const object1: Object1 = {
    age: 18
}

3、任意属性（任意名称的属性）

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
// 一旦定义了任意属性，确定属性和可选属性的类型都必须是它的类型的子集（也就是可选属性和任意属性同时存在时，可选属性的类型必须和任意属性相同）
interface Person1 {
    name: string;
    age?: string;
    [propName: string]: string;
}
let tom: Person1 = {
    name: 'Tom',
    age: '25',
    gender: 'male'
}

4、只读属性（除了第一次赋值，其余时候都无法修改的属性）

interface Person2 {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
// id除了第一次赋值外，其余时候都没办法修改
let tom2: Person2 = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
}

四、函数类型

1、简单的函数表达式

// 参数类型与返回类型
function sum(num1: number, num2: number): number {
    return num1 + num2
}

2、完整的参数式函数表达式

// 通过赋值来定义函数
let mySum1 = function (x: number, y: number): number {
    return x + y
}
// 其实这样的话是通过类型推断来决定mySum是函数而已，是不标准的，标准如下：
let mySum2: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y
}
// 首先要输入mySum2的类型，类型是函数类型，而函数类型包括输入的内容(x: number, y: number)，与输出的结果number，中间用=>表示是定义函数定义特有的符号
// 接口的方式定义函数，更为清晰
interface SearchFunc {
    (source: string, subString: string): boolean
}
let mySearch: SearchFunc
mySearch = function (source: string, subString: string) {
    return source.search(subString) !== -1
}

3、配合可选参数

// 需要注意可选参数不能放在必须参数的前面
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName
    } else {
        return firstName
    }
}
let tomcat = buildName('Tom', 'Cat')
let tom1 = buildName('Tom')

4、默认参数

function buildName1(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName
}
let tomcat1 = buildName('Tom', 'Cat')
let tom3 = buildName('Tom')

5、多余参数

// 剩余参数(和es6的方式类型，表示剩余的所有参数)
function push(array: any[], ...items: any[]) {
    items.forEach(function (item) {
        array.push(item)
    });
}