TypeScript 入门教程: 基础

本部分介绍了 TypeScript 中的常用类型和一些基本概念，旨在让大家对 TypeScript 有个初步的理解

数据类型

JavaScript 的类型分为两种：

原始数据类型（Primitive data types）
- 布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。
对象类型（Object types）

类型	示例
布尔值是最基础的数据类型，在 TypeScript 中，使用 `boolean` 定义布尔值类型	`let isDone: boolean = false; // 编译通过 // 后面约定，未强调编译错误的代码片段，默认为编译通过 // 注意，使用构造函数 Boolean 创造的对象不是布尔值： let createdByNewBoolean: boolean = new Boolean(1);`
使用 `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;`
使用 `string` 定义字符串类型	let myName: string = 'Tom'; let myAge: number = 25; // 模板字符串 let sentence: string = `Hello, my name is ${myName}. I'll be ${myAge + 1} years old next month.`;
空值	`function alertName(): void { alert('My name is Tom'); }`
可以使用 `null` 和 `undefined` 来定义这两个原始数据类型	`let u: undefined = undefined; let n: null = null;`
元组	`let tom: [string, number] = ['Tom', 25];`
枚举	`enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};`

任意值 any

在任意值上访问任何属性都是允许的
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);

let something;
something = 'seven';
something = 7;
something.setName('Tom');

联合类型

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

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

接口 interface

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

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

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

任意属性

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 fibonacci: number[] = [1, 1, 2, 3, 5];
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

类数组，如 arguments
事实上常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：

function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

复杂的情况，可以用 any

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

函数

基本
函数重载

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

函数重载的情况

// 以前的情况
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

// 用了重载
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

类型断言

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

值 as 类型
<类型>值

多重断言

interface Cat {
    run(): void;
}

interface Fish {
    swim(): void;
}

function testCat(cat: Cat) {
    return (cat as any as Fish);
}

声明文件

东西比较多，用到的时候再看。

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有子属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// <reference /> 三斜线指令

类型别名

类型别名用来给一个类型起个新名字，好处: 语义。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

参考

https://ts.xcatliu.com/basics/index.html

https://ts.xcatliu.com/basics/type-of-array.html