TypeScript入门到精通

TypeScript是什么？

TypeScript是强类型的JavaScript语言
它添加了我们对强类型语言所期望的一些特性

TypeScript带来的好处

TypeScript的编译步骤可以让你及早发现问题，而不是等待运行时失败
它可以让你的代码以JavaScript无法描述的方式进行自我描述

TypeScript缺点

TypeScript是一个预处理器,代码必须编译,因此每次更新和测试运行需要稍长一点时间

安装 TypeScript

npm install -g typescript

编译 TypeScript 文件

tsc hello.ts

原始数据类型

JavaScript 的类型分为两种：原始数据类型 和对象类型 (Array Object)
原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol

原始数据类型写法示例

let isDone: boolean = false;
let isDone: number = 123;
let myName: string = '123'

空值

// JavaScript 没有空值（Void）的概念
// 在 TypeScript 中 我们用 void 表示没有任何返回值的函数
function alertName(): void {
    alert('void');
}

任意值

// any类型，赋值过程中改变类型是允许的
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查，不会报错

联合类型

// 联合类型 表示取值可以为多种类型中的一种
// 联合类型使用 | 分隔每个类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

数组类型

// 表示法 number[]
// 数组的项中不允许出现其他的类型
// 数组的一些方法的参数也会根据数组在定义时约定的类型进行限制
let fibonacci: number[] = [1, 1, 2, 3, 5];

// 一个比较常见的做法是，用 any 表示数组中允许出现任意类型
let list: any[] = ['blog', 1, { blog: 'https://was666.gitee.io/blog/' }];

对象类型-接口

// 在 TypeScript 中，我们使用接口来定义对象的类型。
// tom 的形状必须和接口 Person 一致。少一些属性，多一些属性都是不允许的。
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

// 可选属性 在属性后边加？

interface Person {
    name: string;
    age?: number;
}
//不会报错
let tom: Person = {
    name: 'Tom'
};
//不会报错
let tom: Person = {
    name: 'Tom'，
    age：25
};
//报错
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// 任意属性 [propName: string]
interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

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

// 只读属性 readonly
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
// 使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了

声明函数

// 输入多余的（或者少于要求的）参数，是不被允许的
function sum(x: number, y: number): number {
    return x + y;
}
sum(1, 2)