TypeScript 入门教程:从零开始掌握现代 JavaScript 的超集

什么是 TypeScript?

简单来说,TypeScript 是 JavaScript 的一个超集。它在 JavaScript 的基础上添加了静态类型等特性,让你的代码在运行前就能发现潜在的错误,就像给 JavaScript 穿上了一件“盔甲”,让它更加安全可靠。

你可以把 TypeScript 理解为:

  • JavaScript + 类型系统
  • 更强大的 JavaScript

为什么要用 TypeScript?

你可能会问,JavaScript 不是挺好的吗?为什么要用 TypeScript? 别急,我们来对比一下:

特性 JavaScript TypeScript
类型 动态类型(运行时确定) 静态类型(编译时确定)
错误检测 运行时报错 编译时报错
代码可读性 变量类型不明确,代码理解难度高 变量类型明确,代码可读性高
代码维护性 大型项目维护困难 大型项目维护更轻松
开发效率 小型项目开发快,大型项目易出错 大型项目开发效率更高,更稳定

总结一下,TypeScript 的优势在于:

  • 提前发现错误: 编译时就能发现类型错误,减少运行时 bug。
  • 代码可读性更高: 明确的类型让代码更容易理解和维护。
  • 更强大的 IDE 支持: 智能提示、自动补全等功能,提高开发效率。
  • 更适合大型项目: 类型系统让大型项目更易于管理和维护。

如何开始使用 TypeScript?

  1. 安装 TypeScript:

    首先,你需要安装 Node.js 和 npm (或 yarn)。然后,在终端中运行以下命令全局安装 TypeScript:

    npm install -g typescript
    

    或者在你的项目中局部安装:

    npm install typescript --save-dev
    
  2. 创建 TypeScript 文件:

    创建一个以 .ts 为后缀的文件,例如 hello.ts

  3. 编写 TypeScript 代码:

    hello.ts 中输入以下代码:

    //表示 `name` 参数的类型是字符串,函数返回类型为字符串
    function greet(name: string): string {
      return "Hello, " + name;
    }
    
    // 变量类型为字符串
    let user: string = "TypeScript";
    console.log(greet(user));
    
  4. 编译 TypeScript 代码:

    在终端中,使用 tsc 命令编译 hello.ts 文件:

    tsc hello.ts
    

    这会生成一个 hello.js 文件,其中包含编译后的 JavaScript 代码。

  5. 运行 JavaScript 代码:

    使用 Node.js 运行 hello.js 文件:

    node hello.js
    

    你会在控制台看到输出:Hello, TypeScript

TypeScript 的基本类型

TypeScript 提供了多种基本类型,包括:

  • string 字符串类型,例如 "hello"'world'
  • number 数字类型,例如 103.14
  • boolean 布尔类型,例如 truefalse
  • null 空值。
  • undefined 未定义的值。
  • any 任意类型,不建议使用,会失去类型检查的优势。
  • void 表示函数没有返回值。
  • array 数组类型,例如 string[]number[]
  • tuple 元组类型,可以存储不同类型的元素,例如 [string, number]
  • enum 枚举类型,用于定义一组命名的常量。
  • object 对象类型。

示例:

let message: string = "Hello";
let count: number = 10;
let isDone: boolean = true;
let fruits: string[] = ["apple", "banana", "orange"];
let person: [string, number] = ["Alice", 30];
enum Color { Red, Green, Blue };
let myColor: Color = Color.Green;
let obj: object = { name: "Bob", age: 25 };

TypeScript 的函数

TypeScript 可以为函数定义参数类型和返回值类型,让函数更加健壮。

示例:

function add(a: number, b: number): number {
    return a + b;
}

TypeScript 的接口

接口(Interface)用于定义对象的结构,可以约束对象的属性和方法。

示例:

interface Person {
  name: string;
  age: number;
  greet(): void;
}

let user: Person = {
  name: "Charlie",
  age: 28,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

user.greet();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容