TypeScript学习笔记

简介

什么是 TypeScript

• TypeScript 是一门静态类型、弱类型的语言，它给JavaScript增加了类型系统，适用于任何规模的项目。
• TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
• TypeScript 具有类型推论的能力，大部分类型都不需要手动声明。
• TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
• TypeScript 可以编译为 JavaScript，它不会修改 JavaScript 运行时的特性。
• TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
• TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
• TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

安装 TypeScript

npm install -g typescript

tsc hello.ts

标记使用

这部分偏重于使用类型来给各种东西标注类型

类型推论

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

任意类型

let something;
something = 'seven';
something = 7;

something.setName('Tom');

等价于

let something: any;
something = 'seven';
something = 7;

something.setName('Tom');

永远不类型

function throwError(message: string): never {
   
    throw new Error(message);
}

function infiniteLoop(): never {
   
    while (true) {
   
        // do something
    }
}

原始数据类型

let decLiteral: number = 6;
let myName: string = 'Tom';
let isDone: boolean = false;

function alertName(): void {
   
    alert('My name is Tom');
}

let num: number = undefined; //undefined 和 null 是所有类型的子类型

数组的类型

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];

对象的类型

单层

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

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

function printCoord(pt: {
    x: number; y: number }) {
   
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({
    x: 3, y: 7 });

多层

interface Address {
   
    street: string;
    city: string;
}

interface Person {
   
    name: string;
    age: number;
    address: Address; // 在 Person 类型中嵌套了 Address 类型
}

// 创建一个符合 Person 类型的对象
const person: Person = {
   
    name: 'Alice',
    age: 30,
    address: {
   
        street: '123 Main St',
        city: 'New York'
    }
};

interface Person {
   
    name: string;
    age: number;
    address: {
   
        street: string;
        city: string;
    };
}

// 创建一个符合 Person 类型的对象
const person: Person = {
   
    name: 'Bob',
    age: 25,
    address: {
   
        street: '456 Elm St',
        city: 'Los Angeles'
    }
};

函数的类型

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

let mySum = function