52周学技术之TypeScript入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00281/article/details/148464454

52周学技术之TypeScript入门指南

52-technologies-in-2016 Let's learn a new technology every week. A new technology blog every Sunday in 2016. 项目地址: https://gitcode.com/gh_mirrors/52/52-technologies-in-2016

TypeScript作为JavaScript的超集，正在成为构建大型前端应用的重要工具。本文将带你全面了解TypeScript的核心特性及其应用场景。

TypeScript概述

TypeScript是由微软开发的开源编程语言，它在JavaScript基础上增加了静态类型系统。主要特点包括：

类型系统：为JavaScript添加静态类型检查
ES6+支持：支持最新的ECMAScript特性
编译转换：可将代码编译为ES5/ES3标准的JavaScript
工具支持：提供更好的IDE支持和代码重构能力

TypeScript的设计目标是解决JavaScript在大型应用开发中的痛点，同时保持与JavaScript的完全兼容性。

基础类型系统

TypeScript提供了三种基本类型：

1. 数值类型(number)

let votes: number = 10;
votes++;
console.log(votes); // 输出11

2. 布尔类型(boolean)

let isVisible: boolean = true;
let storyExists: boolean = false;

3. 字符串类型(string)

let title: string = "学习TypeScript";
let description: string = '今天学习TypeScript!';

TypeScript支持类型推断，即使不显式声明类型，编译器也能自动推断变量类型。

高级类型特性

1. 数组类型

TypeScript支持两种数组声明方式：

// 方式一：类型化数组
let tags: string[] = ["javascript","programming"];

// 方式二：泛型数组
let storyLikedBy: Array<number> = [1,2,3];

2. 枚举类型(enum)

enum StoryType {Video, Article, Tutorial}
let currentStory: StoryType = StoryType.Article;

可以自定义枚举值：

enum StoryType {Video = 10, Article = 20, Tutorial = 30}

3. 元组(Tuple)

元组允许表示已知元素数量和类型的数组：

let titlesAndLengths: [string, number][] = storyTitles.map(title => [title, title.length]);

4. 任意类型(any)

当需要绕过类型检查时使用：

let dynamicValue: any = {};
dynamicValue = "文本";
dynamicValue = 123;

5. 联合类型

表示一个值可以是几种类型之一：

let stringOrNumber: string | number = 1;
stringOrNumber = "hello";

函数增强

1. 基本函数声明

function addStory(title: string, tags: string[]): void {
    stories.push([title, tags]);
}

2. Lambda表达式

let tagLengths = tags.map(tag => tag.length);

3. 可选和默认参数

// 可选参数
function storySummary(title: string, description?: string) {
    return description ? title + description : title;
}

// 默认参数
function storySummary(title: string, description: string = "") {
    return title + description;
}

面向对象特性

1. 接口(Interface)

定义对象结构契约：

interface Story {
    title: string;
    description?: string;
    tags: string[];
}

2. 类(Class)

class TextStory implements Story {
    title: string;
    tags: string[];
    
    constructor(title: string, ...tags: string[]) {
        this.title = title;
        this.tags = tags;
    }
    
    summary() {
        return `文本故事: ${this.title}`;
    }
}

3. 继承

class TutorialStory extends TextStory {
    summary() {
        return `教程故事: ${this.title}`;
    }
}

4. 抽象类

abstract class StoryProcessor {
    abstract extractTitle(url: string): string;
    
    process(url: string): Story {
        return {
            title: this.extractTitle(url),
            tags: []
        };
    }
}

模块系统

TypeScript支持ES6模块系统：

// 定义模块
module StoryApp {
    export class StoryManager {
        addStory() {}
        removeStory() {}
    }
}

// 使用模块
import Manager = StoryApp.StoryManager;
let manager = new Manager();
manager.addStory();

泛型编程

TypeScript支持泛型，可以创建可重用的组件：

interface HasLength {
    length: number;
}

function addLengths<T extends HasLength>(a: T, b: T): number {
    return a.length + b.length;
}

addLengths("hello", "world"); // 字符串有length属性
addLengths([1,2], [3,4,5]);  // 数组有length属性