TypeScript 是由微軟進(jìn)行開(kāi)發(fā)和維護(hù)的一門開(kāi)源的編程語(yǔ)言，它是 JavaScript 的嚴(yán)格語(yǔ)法超集，提供了可選的靜態(tài)類型檢查。本文將探索 TypeScript 的發(fā)展歷程、它對(duì) JavaScript 生態(tài)系統(tǒng)的影響，以及它如何成為開(kāi)發(fā)人員的必備工具。

發(fā)展歷程

2010：設(shè)計(jì)背景

TypeScript 的發(fā)展可以追溯到 2010 年， C# 和 Turbo Pascal 的創(chuàng)建者 Anders Hejlsberg 開(kāi)始思考如何改進(jìn) JavaScript 的開(kāi)發(fā)體驗(yàn)。在那個(gè)時(shí)候，JavaScript 還沒(méi)有成為主流的開(kāi)發(fā)語(yǔ)言，而且缺乏一些關(guān)鍵的特性，比如模塊化和類型系統(tǒng)。因此，Anders Hejlsberg 決定創(chuàng)建一種新的語(yǔ)言，它可以在保留 JavaScript 精髓的同時(shí)，增加一些用來(lái)構(gòu)建大型應(yīng)用的特性。

圖片

在接下來(lái)的幾年里，微軟團(tuán)隊(duì)投入了大量的時(shí)間和精力來(lái)開(kāi)發(fā) TypeScript，并于 2012 年將其首次公開(kāi)發(fā)布。

2012：正式發(fā)布

TypeScript 于 2012 年 10 月正式發(fā)布。TypeScript 發(fā)布的最初動(dòng)機(jī)就是解決 JavaScript 的缺點(diǎn)，處理復(fù)雜JavaScript代碼帶來(lái)的挑戰(zhàn)使他們需要自定義工具來(lái)簡(jiǎn)化組件開(kāi)發(fā)流程。

JavaScript 作為一種動(dòng)態(tài)類型的語(yǔ)言，由于缺乏類型檢查而容易出現(xiàn)運(yùn)行時(shí)錯(cuò)誤。TypeScript 旨在提供可選的靜態(tài)類型和面向?qū)ο蟮木幊坦δ?，使開(kāi)發(fā)人員更輕松地構(gòu)建和維護(hù)復(fù)雜的應(yīng)用。

function greet (name: string): string { 
  return  "Hello, " + name; 
}

由于 TypeScript 是 JavaScript 的嚴(yán)格超集，因此它保留了與現(xiàn)有 JavaScript 代碼的兼容性。TypeScript 編譯器 ( tsc) 將 TypeScript 代碼轉(zhuǎn)換為 JavaScript，使其可以在任何支持 JavaScript 的環(huán)境中運(yùn)行。這確保了開(kāi)發(fā)人員可以在項(xiàng)目中逐漸采用 TypeScript，而無(wú)需重寫(xiě)全部代碼。

在發(fā)布后不久，知名的開(kāi)源倡導(dǎo)者和開(kāi)發(fā)者 Miguel de Icaza 對(duì)這門語(yǔ)言表示認(rèn)可，但批評(píng)了其糟糕的 IDE 支持性，當(dāng)時(shí)僅有微軟的 Visual Studio IDE 支持其代碼，但此 IDE 當(dāng)時(shí)未在 Linux 和 OS X 操作系統(tǒng)上發(fā)布。

2012-2015：受到關(guān)注

TypeScript 早年在開(kāi)發(fā)者社區(qū)中的采用率穩(wěn)步增長(zhǎng)。2014 年 Angular 2 的發(fā)布標(biāo)志著 TypeScript 的一個(gè)重要里程碑，因?yàn)榱餍械那岸丝蚣苓x擇 TypeScript 作為其默認(rèn)語(yǔ)言。這一決定幫助 TypeScript 獲得了可信度，并引起了其他項(xiàng)目和組織的興趣增加。

圖片

在此期間，TypeScript 經(jīng)歷了數(shù)次重要的版本更新，引入了新功能和改進(jìn)語(yǔ)言特性。開(kāi)發(fā)者對(duì) TypeScript 的反響大多是積極的，他們認(rèn)識(shí)到 TypeScript 在類型安全、更好的工具支持和代碼可維護(hù)性方面帶來(lái)的價(jià)值。

interface Person {
  firstName: string;
  lastName: string;
}

function fullName(person: Person): string {
  return person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "Doe" };

console.log(fullName(user));

在這幾年中，有以下重要里程碑：

• 2013年發(fā)布的 TypeScript 0.9 增加了對(duì)泛型的支持。
• 2014年在微軟開(kāi)發(fā)者大會(huì)上發(fā)布 TypeScript 1.0。
• 2014年7月，開(kāi)發(fā)團(tuán)隊(duì)發(fā)布了全新的 TypeScript 編輯器，聲稱其性能提高了5倍。同時(shí)，代碼托管由 CodePlex 遷移至 GitHub。

2015–2018：成為主流

隨著 TypeScript 越來(lái)越受歡迎，主要的庫(kù)和框架開(kāi)始為該語(yǔ)言提供一流的支持。React、Vue 和其他流行項(xiàng)目在其包中添加了 TypeScript 聲明，使開(kāi)發(fā)人員能夠從 TypeScript 的類型檢查和自動(dòng)完成功能中受益。這反過(guò)來(lái)又鼓勵(lì)更多的開(kāi)發(fā)人員在他們的項(xiàng)目中采用 TypeScript，創(chuàng)建了一個(gè)積極的反饋循環(huán)，進(jìn)一步推動(dòng) TypeScript 的增長(zhǎng)。

圖片

在此期間，TypeScript 的類型系統(tǒng)也發(fā)生了重大改進(jìn)，引入了聯(lián)合類型、交集類型和映射類型等功能。這些增強(qiáng)功能使開(kāi)發(fā)人員能夠表達(dá)復(fù)雜的類型關(guān)系，從而使 TypeScript 更加強(qiáng)大和靈活。

type Admin = {
  role: "admin";
  permissions: string[];
};

type User = {
  role: "user";
  username: string;
};

type SuperUser = Admin & User;

const superUser: SuperUser = {
  role: "admin",
  permissions: ["create", "read", "update", "delete"],
  username: "superadmin", };

function getRole(user: Admin | User): string { return user.role; }

console.log(getRole(superUser));

2018-至今：逐漸成熟

近年來(lái)，TypeScript 已經(jīng)成熟成為現(xiàn)代 Web 開(kāi)發(fā)的主要工具。由于它結(jié)合了類型安全性、改進(jìn)的工具以及與 JavaScript 生態(tài)系統(tǒng)的兼容性，該語(yǔ)言已在開(kāi)發(fā)人員和組織中廣泛采用。

微軟的 TypeScript 團(tuán)隊(duì)繼續(xù)迭代該語(yǔ)言，定期發(fā)布引入新功能和增強(qiáng)功能的版本。與此同時(shí)，更廣泛的 JavaScript 社區(qū)已經(jīng)接受了 TypeScript，Next.js、NestJS 和 GraphQL 等流行項(xiàng)目提供了開(kāi)箱即用的一流 TypeScript 支持。

import React from "react";
import { GetServerSideProps } from "next";
import { useRouter } from "next/router";

interface PostProps {
  title: string;
  content: string;
}

export default function Post({ title, content }: PostProps) {
  const router = useRouter();

  // Anyone else hate this pattern?
  if (router.isFallback) {
    return <div>Loading...</div>;
  }
  // I can't wait for Suspense...

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps<PostProps> = async (context) => {
  const { id } = context.params;
  const response = await fetch(`https://api.example.com/posts/${id}`);
  const post = await response.json();

  return {
    props: {
      title: post.title,
      content: post.content,
    },
  };
};

重要里程碑

最后來(lái)看看 TypeScript 演變的時(shí)間線，重點(diǎn)介紹關(guān)鍵里程碑和在其發(fā)展中發(fā)揮重要作用的個(gè)人。

2010：初步發(fā)展

• Anders Hejlsberg 是 C# 和 Turbo Pascal 的創(chuàng)建者，領(lǐng)導(dǎo) Microsoft 的 TypeScript 項(xiàng)目，致力于語(yǔ)言和編譯器的研究。

2012：TypeScript 正式發(fā)布

• Microsoft 于 2012 年 10 月正式發(fā)布 TypeScript。

2013：TypeScript 0.9 發(fā)布

• 第一個(gè)公開(kāi)版本 TypeScript 0.9 引入了可選的靜態(tài)類型、泛型等功能。

2014：Angular 2 選擇 TypeScript

• Brad Green 和 Google 的 Angular 團(tuán)隊(duì)選擇 TypeScript 作為 Angular 2 的默認(rèn)語(yǔ)言。
• TypeScript 在開(kāi)發(fā)者社區(qū)中贏得了贊譽(yù)和關(guān)注。
• 2014年的微軟開(kāi)發(fā)者大會(huì)發(fā)布了 TypeScript 1.0。
• Visual Studio 2013 Update 2為TypeScript提供了原生支持。
• 2014年7月，開(kāi)發(fā)團(tuán)隊(duì)發(fā)布了新的TypeScript編輯器，聲稱其性能提高了5倍。同時(shí)，代碼托管由CodePlex遷移至GitHub。

2015：TypeScript 1.5 發(fā)布

• TypeScript 1.5 發(fā)布，該版本引入了模塊別名、裝飾器和 ES6 風(fēng)格的生成器等新特性，并改進(jìn)了類型推斷和類型注解功能。

2016：TypeScript 2.0 發(fā)布

• TypeScript 2.0 發(fā)布，引入了不可空類型、控制流分析以及類型系統(tǒng)的其他增強(qiáng)功能。
• Daniel Rosenwasser 加入 Microsoft 的 TypeScript 團(tuán)隊(duì)，為該語(yǔ)言做出貢獻(xiàn)并與社區(qū)互動(dòng)。
• Google 宣布將 TypeScript 作為 Angular 框架的官方語(yǔ)言。這一決定使得越來(lái)越多的開(kāi)發(fā)者開(kāi)始采用 TypeScript 來(lái)構(gòu)建他們的應(yīng)用程序。同時(shí)，TypeScript 也開(kāi)始廣泛地應(yīng)用于其它的框架和庫(kù)中。

2017：React 和 Vue 的一流支持

• React 和 Vue 將 TypeScript 聲明添加到其包中，為 TypeScript 開(kāi)發(fā)人員提供一流的支持。
• Vue 的創(chuàng)建者尤雨溪成為 TypeScript 及其優(yōu)點(diǎn)的倡導(dǎo)者。
• TypeScript 2.5 發(fā)布，該版本引入了可選鏈?zhǔn)讲僮鞣?null 判斷符這兩個(gè)新特性，并對(duì) JSX 語(yǔ)法進(jìn)行了改進(jìn)和優(yōu)化。

2018：TypeScript 3.0 發(fā)布

• TypeScript 3.0 發(fā)布，該版本引入了許多新特性，例如提取元組類型、類型參數(shù)默認(rèn)推斷、未聲明屬性檢查等。此外，TypeScript 3.0 還提高了類型檢查的性能和準(zhǔn)確性。
• TypeScript 得到了開(kāi)發(fā)人員和組織的廣泛采用，成為現(xiàn)代 Web 開(kāi)發(fā)的主要內(nèi)容。

2019：TypeScript 3.7 發(fā)布

• TypeScript 3.7 發(fā)布，引入了可選鏈和空值合并，進(jìn)一步增強(qiáng)了語(yǔ)言的表達(dá)能力和安全性。

2020：TypeScript 4.0 發(fā)布

• Next.js、NestJS 和其他流行項(xiàng)目提供一流的開(kāi)箱即用的 TypeScript 支持。
• Next.js 的創(chuàng)建者 Guillermo Rauch 和 NestJS 的創(chuàng)建者 Kamil Mysliwiec 在項(xiàng)目中推廣 TypeScript 的使用。
• TypeScript 4.0 發(fā)布，該版本引入了諸多新特性，包括可變?cè)M類型、協(xié)變數(shù)組展開(kāi)、類屬性訪問(wèn)修飾符等。

2021–2023：持續(xù)增長(zhǎng)、逐漸成熟

• Microsoft 的 TypeScript 團(tuán)隊(duì)和更廣泛的 JavaScript 社區(qū)繼續(xù)改進(jìn)和迭代該語(yǔ)言。
• 對(duì)于處理復(fù)雜 Web 應(yīng)用的開(kāi)發(fā)人員來(lái)說(shuō)，TypeScript 仍然是一種流行且必不可少的工具。
• TypeScript 5.0 發(fā)布，引入了裝飾器、速度內(nèi)存和包大小優(yōu)化等。

小結(jié)

從 2012 年問(wèn)世到目前成為開(kāi)發(fā)人員的必備工具，TypeScript 已經(jīng)走過(guò)了漫長(zhǎng)的道路。它與流行的庫(kù)和框架的集成、持續(xù)改進(jìn)和廣泛采用證明了它在生態(tài)系統(tǒng)中的價(jià)值。

如今，TypeScript 結(jié)合了類型安全、改進(jìn)的工具以及與 JavaScript 生態(tài)系統(tǒng)的兼容性，使其成為開(kāi)發(fā)復(fù)雜 Web 應(yīng)用的寶貴工具。