第1章 TypeScript概述与环境搭建

1
2
3
4
5
6
7
8

// JavaScript的迷惑行为大赏
console.log("hello" + 123);        // "hello123" —— 数字被强行转成了字符串
console.log("5" - 3);              // 2 —— 字符串被强行转成了数字
console.log("" == false);          // true —— 两者都转成0再比较
console.log([] == false);          // true —— 空数组转成""，再转成数字0
console.log({} == false);         // false —— 对象跟谁都不相等（包括false）

// 实际上："5" + 3 = "53"（字符串拼接），不是 8！这就是隐式类型转换的坑。

1
2
3
4
5
6
7
8

let life = "happy";       // life是字符串
life = 42;                // 瞬间变成数字，JS表示毫无压力
life = false;             // 布尔型也行
life = undefined;         // 未定义也行
life = null;              // 空也行
life = [1, 2, 3];         // 数组当然可以
life = { meaning: 42 };   // 对象？来嘛！
// JavaScript: 我全都要.jpg

1
2
3
4
5
6
7
8

// 这个函数在写的时候，JavaScript完全不会报错
function divide(a, b) {
    return a / b;
}

// 只有当你传入字符串调用它时，你才会知道什么叫"惊喜"
console.log(divide("hello", "world")); // NaN —— 恭喜你，获得了一个Not a Number
console.log(divide(10, 0));              // Infinity —— 除以零不报错，返回无穷大

1
2

console.log(typeof NaN); // "number"
// 注释：NaN的类型居然是number，这是要闹哪样？

1
2

console.log(NaN === NaN); // false —— 自己不等于自己！
console.log(NaN == NaN);  // false —— 连==都不等于自己

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 产生NaN的几种方式
console.log(0 / 0);               // NaN —— 0除以0
console.log(Math.sqrt(-1));        // NaN —— 负数开平方
console.log(parseInt("hello"));    // NaN —— 字符串转数字失败
console.log(NaN + 5);              // NaN —— NaN参与任何运算都是NaN

// 检查一个值是否是NaN——绝对不能用===
console.log(NaN === NaN);          // false —— 这是错的！
console.log(Number.isNaN(NaN));    // true —— 正确做法
console.log(isNaN(NaN));           // true —— 这个也行（老API，有坑）

1
2
3
4
5
6
7
8
9

// TypeScript代码
function divide(a: number, b: number): number {
    return a / b;
}

// 当你试图传入字符串时，VS Code会直接在编辑器里给你一个红色波浪线
// 错误信息：Argument of type 'string' is not assignable to parameter of type 'number'
// 根本不需要等到运行时，编写的时候就告诉你了
console.log(divide("hello", "world"));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 变量类型注解
let name: string = "猪八戒";
let age: number = 3000;
let isMarried: boolean = false;

// 函数类型注解
function greet(person: string): string {
    return `你好，${person}！`;
}

// 参数和返回值都标清楚了，一看就知道该怎么调用
console.log(greet("孙悟空")); // 你好，孙悟空！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 编译器自动推断为string
let name = "唐僧";       // 等价于 let name: string = "唐僧"
console.log(typeof name); // string

// 编译器自动推断为number
let age = 500;           // 等价于 let age: number = 500
console.log(typeof age); // number

// 编译器自动推断为boolean
let isCrazy = true;      // 等价于 let isCrazy: boolean = true
console.log(typeof isCrazy); // boolean

// 函数返回类型也能推断
function add(a: number, b: number) {
    return a + b;         // 编译器推断返回类型是number
}
let result = add(1, 2);
console.log(result); // 3 —— result的类型是number

1
2
3
4
5

// 这是一段合法的JavaScript代码
function sayHello(name) {
    console.log("Hello, " + name + "!");
}
sayHello("World");

1
2
3
4
5

// 这还是合法的TypeScript代码——零修改！
function sayHello(name) {
    console.log("Hello, " + name + "!");
}
sayHello("World");

1
2
3
4
5

// TypeScript源代码
function greet(name: string): string {
    return `Hello, ${name}!`;
}
console.log(greet("TypeScript"));

1
2
3
4
5
6

// 生成的JavaScript代码
function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("TypeScript"));
// 注释：看！类型注解全部消失了，只剩下纯净的JavaScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
    "compilerOptions": {
        // 输出ES5，适合老浏览器（IE什么的）
        "target": "ES5",
        
        // 输出ES6/ES2015+，可以使用class、箭头函数等新特性
        "target": "ES2015",
        
        // 输出ES2020+
        "target": "ES2020",
        
        // 输出最新ECMAScript
        "target": "ESNext"
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 阶段1：完全不写类型注解（就是JavaScript）
function add(a, b) {
    return a + b;
}

// 阶段2：只给部分参数加注解
function add(a: number, b) {
    return a + b;
}

// 阶段3：给所有参数和返回值都加注解
function add(a: number, b: number): number {
    return a + b;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 混合风格：有些有类型，有些没有
let name = "沙和尚";           // 没注解，TS自动推断
let age: number = 800;         // 有注解，明明白白
let isVegetarian = true;       // 没注解，TS推断为boolean

function introduce(n: string) { // 参数有类型
    console.log("我是" + n);   // 返回值没标，但TS会推断为void
}

// 这完全合法，TS不会报错
introduce(name);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// TS推断 x 是 number
let x = 10;
x = "hello";  // 报错！Type 'string' is not assignable to type 'number'
// 注释：推断之后，类型就固定了，想换类型？没门！

// TS推断 y 是 (a: number, b: number) => number
function add(a: number, b: number) {
    return a + b;
}
let y = add;
// 注释：y的类型被推断为函数类型

// TS推断数组是 (string | number)[]
let mixed = [1, "two", 3, "four"];
// 注释：TS推断mixed是数字和字符串的混合数组

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 定义一个接口
interface Point2D {
    x: number;
    y: number;
}

// 定义一个类型别名
type Coordinates = {
    x: number;
    y: number;
};

// 这两个类型名字不同，定义方式也不同
// 但在TypeScript眼里，它们的结构完全相同，所以可以互换使用

function printPoint(p: Point2D) {
    console.log(`坐标：(${p.x}, ${p.y})`);
}

const coords: Coordinates = { x: 10, y: 20 };
printPoint(coords);  // 完全OK！Coordinates被当作Point2D使用
// 注释：输出 坐标：(10, 20)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// Java代码（仅用于对比演示）
class Point2D {
    int x;
    int y;
}

class Coordinates {
    int x;
    int y;
}

// 这两个类的结构完全相同，但它们是"不同"的类型！
// Point2D pd = new Coordinates(); // 编译错误！类型不兼容！

1
2
3
4
5
6
7

// JavaScript里，对象直接就是一个属性集合
const point = { x: 10, y: 20 };
const coords = { x: 30, y: 40 };

// 两个对象可以互换使用，因为它们结构相同
console.log(point.x); // 10
console.log(coords.x); // 30

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// TypeScript源代码 —— 类型注解满天飞
let name: string = "孙悟空";
let age: number = 500;
let isMonkey: boolean = true;

function greet(person: string): string {
    return `你好，${person}！`;
}

console.log(greet(name));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 生成的JavaScript —— 类型注解全部消失！
let name = "孙悟空";
let age = 500;
let isMonkey = true;

function greet(person) {
    return "你好，" + person + "！";
}

console.log(greet(name));
// 注释：看！没有任何类型注解的痕迹了！

1
2
3
4
5

// 在完全sound的类型系统下，这种操作可能不被允许
// 因为涉及到复杂的类型推断和运行时检查

// TypeScript选择了"实用主义"路线：宁可放过一些类型漏洞，
// 也不能让开发者觉得"这破语言怎么这么多规矩"

1
2
3

let dangerous: any = "hello";
// 注释：any类型的dangerous可以赋值给任何类型
(dangerous as number).toFixed(2); // 看起来像数字，但实际是字符串！

1
2
3

let risky = "42";
let num: number = risky as number; // 编译通过，但运行时会发现risky其实是字符串！
// 注释：42 + 1 = 421 而不是 43！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 理论上可能出问题的代码
interface Animal { name: string; }
interface Dog extends Animal { breed: string; }

function acceptAnimal(animal: Animal) {
    console.log(animal.name);
}

let bark: (dog: Dog) => void = (dog) => {
    console.log(dog.breed);
};

acceptAnimal(bark as any); // TypeScript不报错，但运行时可能出问题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 数字 vs 字符串的迷之比较
console.log("5" + 3);       // "53" —— 3被转成了"3"，然后字符串拼接
console.log("5" - 3);        // 2 —— "5"被转成了5，然后数学减法
console.log("5" == 5);      // true —— 字符串"5"和数字5被认为是相同的！
console.log("" == 0);       // true —— 空字符串被转成0
console.log(false == 0);    // true —— false被转成0

// 最离谱的来了
console.log([] == false);   // true —— 空数组转成""，再转成0
console.log([] === false);  // false —— 这个是严格比较，不会转换类型

1
2
3
4
5
6
7

console.log(typeof null);      // "object" —— null的类型居然是object！
console.log(null instanceof Object); // false —— 但null又不是对象

// 这是JavaScript的设计失误
// 原因是：在JS的早期实现中，null的全32位都是0
// 而对象引用的前几位标识是"000"
// 所以null被错误地识别为对象类型

1
2
3
4
5

console.log(NaN === NaN);           // false —— 自己不等于自己！
console.log(0 / 0);                 // NaN
console.log(Math.sqrt(-1));         // NaN
console.log(parseInt("hello"));    // NaN
console.log(typeof NaN);           // "number" —— NaN的类型居然是number！

1
2
3
4
5
6

console.log(Number.isNaN(NaN));     // true —— 正确
console.log(isNaN(NaN));           // true —— 老API，也可以用（但有坑）

// isNaN的坑
console.log(isNaN("hello"));       // true —— "hello"转成数字是NaN
console.log(Number.isNaN("hello")); // false —— "hello"本身不是NaN

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const person = {
    name: "猪八戒",
    greet: function() {
        console.log("你好，我是" + this.name);
    }
};

person.greet(); // "你好，我是猪八戒" —— this是person

const anotherGreet = person.greet;
anotherGreet(); // "你好，我是undefined" —— this是undefined（严格模式下）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 1. 控制流分析
// TypeScript 2.0之前，类型分析比较简单
// 2.0之后，TS会根据代码流程分析变量类型

function demo(x: string | number) {
    if (typeof x === "string") {
        // 在这个分支里，TS知道x是string
        console.log(x.toUpperCase()); // OK
    } else {
        // 在这个分支里，TS知道x是number
        console.log(x.toFixed(2)); // OK
    }
}

// 2. 可空类型
// 有了strictNullChecks，null和undefined不会自动属于任何类型
let name: string = null;  // 错误！string不能是null
let name2: string | null = null;  // 正确！显式声明可空

// 3. 非空断言运算符（!）
// 告诉TS：这个值绝对不是null/undefined，相信我
function getLength(str: string | null): number {
    return str!.length;  // TS知道str不是null了
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// 1. keyof 操作符：获取一个类型的所有键
interface User {
    name: string;
    age: number;
    email: string;
}

type UserKeys = keyof User;
// 注释：UserKeys = "name" | "age" | "email"

// 2. 映射类型：从一个类型衍生出另一个类型
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

type Partial<T> = {
    [P in keyof T]?: T[P];
};

// 使用
type ReadonlyUser = Readonly<User>;
// 注释：所有属性变成只读了

type OptionalUser = Partial<User>;
// 注释：所有属性变成可选的了

// 3. async/await支持ES5
// 之前只有target ES6才能用async/await
// 2.1之后，ES5也能用了（TS会编译成Promise）
async function fetchData() {
    const data = await fetch("/api/user");
    return data.json();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 1. 字符串枚举（更准确的叫法是"字符串字面量类型"）
type Direction = "Up" | "Down" | "Left" | "Right";

function move(dir: Direction) {
    console.log("移动方向：" + dir);
}

move("Up");    // OK
move("Right"); // OK
move("Diagonal"); // 错误！不在允许的范围内

1
2

// strictFunctionTypes让函数参数类型检查更严格
// 避免了一些之前可以但不应该可以的赋值

1
2
3
4
5
6
7
8
9

// 确定赋值断言：告诉TS这个变量在使用前一定会被赋值
let name!: string; // 一定有初始值，TS不要报错

initialize();
console.log(name.toUpperCase()); // OK

function initialize() {
    name = "Hello";
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 条件类型：T extends U ? X : Y
type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<"hello">; // "yes"
type B = IsString<42>;      // "no"

// infer关键字：在条件类型中推断类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type A = ReturnType<() => string>; // string
type B = ReturnType<() => number>; // number
type C = ReturnType<() => void>;   // void

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// Rest参数元组：函数的rest参数可以是元组
function foo(...args: [string, number, boolean]) {
    console.log(args[0]); // string
    console.log(args[1]); // number
    console.log(args[2]); // boolean
}

// 泛型Rest参数：保持元组类型的元素数量和顺序
function head<T extends any[]>(
    ...args: T
): T[0] {
    return args[0];
}

const first = head(1, "hello", true);  // first的类型是 1 | "hello" | true
console.log(first); // 1

1
2
3
4
5

// 泛型别名可以直接用于函数和属性
type Nullable<T> = T | null;

const maybeNumber: Nullable<number> = 42;
const maybeString: Nullable<string> = null;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// const断言：让TS推断出最窄的类型
const obj = {
    x: 10,
    y: 20
} as const;
// 注释：obj的类型变成 { readonly x: 10; readonly y: 20 }
// 而不是 { x: number; y: number }

// 用于数组
const arr = [1, 2, 3] as const;
// 注释：arr的类型变成 readonly [1, 2, 3]

1
2
3
4
5
6

// 更精确的Iterator和Generator类型
function* gen() {
    yield 1;
    yield "hello";
    yield true;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 可选链
const city = user?.address?.city;
console.log(city); // undefined —— 即使address不存在也不会报错

// 空值合并
const name = value ?? "default";
console.log(name); // 如果value是null/undefined，返回"default"

// BigInt
const big = 123456789012345678901234567890n;
console.log(typeof big); // "bigint"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// import type：只导入类型，不导入值
import type { SomeType, SomeInterface } from "./module";

// export type：只导出类型
export type { SomeType };

// ECMAScript私有字段
class Person {
    #name: string;  // 真正的私有字段，外部无法访问
    
    constructor(name: string) {
        this.#name = name;
    }
    
    greet() {
        console.log("你好，我是" + this.#name);
    }
}

1
2
3
4
5
6

const results = await Promise.allSettled([
    Promise.resolve(1),
    Promise.reject("error")
]);

// results的类型是 PromiseSettledResult<unknown>[]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 标记元组：给元组的位置起名字
type HTTPResponse = [status: number, body: string, error?: string];

function handleResponse(res: HTTPResponse) {
    const [status, body, error] = res;
    console.log(`状态码：${status}`);
    console.log(`响应体：${body}`);
    if (error) {
        console.log(`错误：${error}`);
    }
}

// 类字段私有修饰符（比#更简洁，但只是TypeScript层面的私有）
class Animal {
    private name: string;  // TypeScript私有，编译后不生效
    
    constructor(name: string) {
        this.name = name;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 模板字面量类型
type EventName = `on${Capitalize<string>}`;
type ButtonEvents = EventName;
// 注释：ButtonEvents = "onA" | "onB" | ... | "onClick" | ...

// 键重映射（Key Remapping）
type MappedType<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

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

type Getters = MappedType<Person>;
// 注释：{ getName: () => string; getAge: () => number; }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// override修饰符：确保子类方法确实重写了父类方法
// 如果父类没有这个方法，TS会直接报错，防止拼写错误导致的"假重写"
class Parent {
    greet() {
        console.log("Hello");
    }
}

class Child extends Parent {
    override greet() {  // 如果Parent没有greet，这里会报错
        console.log("Hi");
    }
}

// 没有override时的陷阱
class Child2 extends Parent {
    greeting() {  // 拼写错误！不是重写，只是新增了一个方法
        console.log("Hi");
    }
}
// TS不会报错，但父类的greet()实际上没被重写
const c = new Child2();
c.greet();   // 输出"Hello" —— 并没有被重写！

1
2

// import type和import分别使用
import { someFunc, type SomeType } from "./module";

1
2
3
4
5
6
7

// 实例化表达式：直接给泛型函数指定类型参数
function makeTuple<T>(a: T, b: T) {
    return [a, b] as const;
}

const tuple1 = makeTuple(1, 2);       // (number, number)
const tuple2 = makeTuple("a", "b");  // (string, string)

1
2

// infer改进：可以在更多地方使用
type Flatten<T> = T extends Array<infer Item> ? Item : T;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// satisfies：既检查类型，又保留字面量推断
type Color = "red" | "green" | "blue";
type Config = { [key: string]: Color | Color[] };

// 使用satisfies
const palette = {
    red: [255, 0, 0],   // Color[]，符合
    green: "green",       // Color，符合 —— 注意不能写"#00ff00"，那不是Color类型
} satisfies Config;

// 注释：palette的类型是 { red: Color[]; green: Color; }
// 而不是 { [key: string]: Color | Color[] }
// 既保证了类型安全，又保留了具体的类型信息
// 意味着 palette.red 是 Color[]，palette.green 是 Color

1
2
3
4
5
6
7
8
9

// const类型参数：让泛型函数参数被推断为const类型
function foo<const T extends readonly string[]>(arr: T) {
    return arr;
}

const result = foo(["a", "b", "c"]);
// 注释：result的类型是 readonly ["a", "b", "c"]
// 而不是 readonly (string | number)[]
// —— 没有const修饰时，数组字面量被推断为 (string | number)[]

1
2
3
4

// 允许函数返回类型引用泛型参数
function createFactory<T>(x: T): () => T {
    return () => x;
}

1
2
3
4
5

// Using声明：自动资源管理
{
    using file = openFile("test.txt");
    file.write("hello");
} // 这里file自动关闭

1
2

// Import Attributes（with import）
import data from "./data.json" with { type: "json" };

1
2
3
4

// NoInfer<T>：阻止在某个位置进行类型推断
function createSignal<T>(value: T, defaultValue: NoInfer<T>) {
    return [value ?? defaultValue, () => value] as const;
}

1
2
3
4
5
6
7

// Predicated Types改进：让类型谓词更智能
function isString(value: unknown): value is string {
    return typeof value === "string";
}

// import defer：延迟加载模块的导入声明
// import defer * as utils from "./utils";

1
2

// Iterator Helper Methods
const values = [1, 2, 3].values().filter(x => x > 1).toArray();

1
2
3
4
5
6

{
    "compilerOptions": {
        // 新的bundler模式的moduleResolution
        "moduleResolution": "bundler"
    }
}

1

// 改进了条件表达式返回类型的检查

1
2
3
4
5
6

{
    "compilerOptions": {
        "module": "node20",  // Node 20的模块解析
        "moduleResolution": "bundler"
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// TypeScript 6.0的主要新特性

// 1. #/ Subpath Imports：更方便的子路径导入
// import from "@/utils/helper" 直接映射到 src/utils/helper

// 2. --stableTypeOrdering：让映射类型的键排序更稳定

// 3. import() 断言废弃：改用import with
// 旧写法（废弃）：import data from "./data.json" assert { type: "json" }
// 新写法：import data from "./data.json" with { type: "json" }

1
2

node --version
# 注释：输出类似 v22.14.0 这样的版本号

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# Windows上安装fnm（需要管理员权限的PowerShell）
winget install Schniz.fnm

# 或者用scoop
scoop install fnm

# 配置环境变量（在PowerShell中执行）
fnm env --use-on-cd | Out-String | Invoke-Expression

# 使用fnm安装Node.js LTS版本
fnm install --lts
fnm use lts

# 验证
node --version
npm --version

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载shell配置
source ~/.bashrc  # 或 source ~/.zshrc

# 安装Node.js LTS版本
nvm install --lts
nvm use --lts

# 验证
node --version
npm --version

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 查看当前目录的Node版本要求文件
cat .nvmrc
# 注释：可能输出类似 v20.11.0 或 lts/hydrogen

# 如果使用的是nvm，进入项目目录后直接运行
nvm use
# 注释：nvm会自动读取.nvmrc文件并切换到对应版本

# 如果使用的是fnm
fnm use
# 注释：fnm同样支持.nvmrc文件

1
2
3
4
5
6

# 全局安装TypeScript
npm install -g typescript

# 验证安装
tsc --version
# 注释：输出类似 Version 6.0.x

1
2
3
4
5
6
7
8
9

# 初始化项目（如果没有package.json）
npm init -y

# 安装TypeScript作为开发依赖
npm install --save-dev typescript

# 验证（使用npx来运行本地安装的tsc）
npx tsc --version
# 注释：输出本地安装的版本号

1
2
3

tsc --version
# 注释：截至2026年3月，稳定版是6.0.x
# 可能输出：Version 6.0.0 或更高版本

1
2
3
4
5

# 安装ts-node
npm install --save-dev ts-node

# 直接运行TypeScript文件
npx ts-node hello.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// hello.ts
function greet(name: string): string {
    return `你好，${name}！`;
}

// 如果有类型错误，ts-node会报错
// greet(123); // 错误：Argument of type 'number' is not assignable to parameter of type 'string'

console.log(greet("世界"));
// 注释：输出 你好，世界！

1
2
3
4
5

# 安装tsx
npm install --save-dev tsx

# 直接运行TypeScript文件
npx tsx hello.ts

1
2
3
4

// quick.ts
console.log("这个文件会被tsx快速编译执行");
const result: number = "hello"; // 编译时不报错（因为tsx不做类型检查）
console.log(result);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

插件名称                 | 功能描述
----------------------- | ------------------------------------------
TypeScript Importer     | 自动导入缺失的类型和模块
Move TS                 | 移动TypeScript文件时自动更新导入路径
Error Lens              | 把错误和警告直接显示在代码行尾，不用鼠标悬停
TypeScript Nightly      | 使用最新版的TS语言服务，尝鲜新特性
ESLint                 | 代码风格检查和自动修复
Prettier               | 代码格式化（让你的代码长得跟团队统一）
Path IntelliSense      | 路径自动补全
Auto Rename Tag         | 修改HTML/XML标签时自动重命名配对标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 步骤1：项目本地安装TypeScript
npm install --save-dev typescript

// 步骤2：在VS Code中打开命令面板
// Windows: Ctrl + Shift + P
// macOS: Command + Shift + P

// 步骤3：输入 "TypeScript: Select TypeScript Version"

// 步骤4：选择 "Use Workspace Version"

1
2
3
4
5
6
7
8
9

// hello.ts
// 这是你的第一个TypeScript程序！

function greet(name: string): string {
    return `你好，${name}！欢迎来到TypeScript的世界！`;
}

const myName = "新手冒险者";
console.log(greet(myName));

1
2
3
4
5
6

# 编译TypeScript文件
npx tsc hello.ts

# 运行编译后的JavaScript文件
node hello.js
# 注释：输出 你好，新手冒险者！欢迎来到TypeScript的世界！

1
2
3
4
5
6

// hello.js（编译后的JavaScript）
function greet(name) {
    return "你好，" + name + "！欢迎来到TypeScript的世界！";
}
var myName = "新手冒险者";
console.log(greet(myName));

1
2
3
4
5
6
7

# 使用tsx（推荐，速度快）
npx tsx hello.ts
# 注释：输出 你好，新手冒险者！欢迎来到TypeScript的世界！

# 使用ts-node（有类型检查，速度慢）
npx ts-node hello.ts
# 注释：输出 你好，新手冒险者！欢迎来到TypeScript的世界！

1
2
3
4
5
6
7

// 如果你写了这样的代码：
function greet(name: string): string {
    return `你好，${name}！`;
}

greet(123);  // ← 红色波浪线！参数类型不匹配
// 注释：错误提示：Argument of type 'number' is not assignable to parameter of type 'string'