TypeScript基础语法 #

一、类型注解 #

1.1 什么是类型注解 #

类型注解是TypeScript的核心特性，用于明确指定变量、函数参数、函数返回值的类型。

typescript 
let name: string = 'TypeScript';
let age: number = 12;
let isPublished: boolean = true;

1.2 类型注解的作用 #

类型注解帮助TypeScript编译器进行类型检查，在编译时发现潜在的类型错误。

typescript 
function greet(name: string): string {
    return `Hello, ${name}!`;
}

greet('TypeScript');
greet(123);

1.3 类型注解的位置 #

变量声明 #

typescript 
let variableName: type = value;

函数参数 #

typescript 
function func(param: type): returnType {
    return value;
}

对象属性 #

typescript 
interface User {
    name: string;
    age: number;
}

二、变量声明 #

2.1 var声明（不推荐） #

var是ES5的变量声明方式，存在变量提升和函数作用域问题。

typescript 
var name = 'TypeScript';

if (true) {
    var age = 12;
}
console.log(age);

2.2 let声明 #

let是ES6的块级作用域变量声明方式。

typescript 
let name: string = 'TypeScript';

if (true) {
    let age: number = 12;
}

2.3 const声明 #

const用于声明常量，声明后不能重新赋值。

typescript 
const PI: number = 3.14159;

PI = 3.14;

2.4 var、let、const的区别 #

特性 var let const
作用域 函数作用域 块级作用域 块级作用域
变量提升 是 否 否
重复声明 允许 不允许 不允许
重新赋值 允许 允许 不允许
暂时性死区 否 是 是
typescript 
var x = 1;
var x = 2;

let y = 1;
let y = 2;

const z = 1;
z = 2;

2.5 最佳实践 #

  • 优先使用const
  • 需要重新赋值时使用let
  • 避免使用var
typescript 
const MAX_SIZE = 100;
let count = 0;

for (let i = 0; i < MAX_SIZE; i++) {
    count++;
}

三、基本类型 #

3.1 字符串（string） #

typescript 
let name: string = 'TypeScript';
let greeting: string = `Hello, ${name}!`;
let multiline: string = `
    This is a
    multiline string
`;

3.2 数字（number） #

typescript 
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let float: number = 3.14;

3.3 布尔值（boolean） #

typescript 
let isDone: boolean = false;
let hasStarted: boolean = true;

3.4 null和undefined #

typescript 
let n: null = null;
let u: undefined = undefined;

let name: string | null = null;
let age: number | undefined = undefined;

在严格模式下，null和undefined只能赋值给any和它们各自的类型：

typescript 
let name: string = null;

3.5 symbol #

typescript 
let sym1: symbol = Symbol('key');
let sym2: symbol = Symbol('key');

console.log(sym1 === sym2);

3.6 bigint #

typescript 
let big: bigint = 100n;
let big2: bigint = BigInt(100);

console.log(big + big2);

3.7 any类型 #

any类型可以表示任何类型，会跳过类型检查。

typescript 
let anything: any = 'hello';
anything = 123;
anything = true;
anything = {};

anything.toFixed();

3.8 unknown类型 #

unknown是类型安全的any，使用前必须进行类型检查。

typescript 
let value: unknown = 'hello';

value.toUpperCase();

if (typeof value === 'string') {
    console.log(value.toUpperCase());
}

3.9 void类型 #

void表示没有任何类型，通常用于函数没有返回值的情况。

typescript 
function log(message: string): void {
    console.log(message);
}

let unusable: void = undefined;

3.10 never类型 #

never表示永远不会发生的类型，用于不会返回的函数。

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

function infiniteLoop(): never {
    while (true) {}
}

四、类型推断 #

4.1 基本类型推断 #

TypeScript会根据初始值自动推断类型。

typescript 
let name = 'TypeScript';
let age = 12;
let isDone = false;

name = 123;

4.2 最佳通用类型 #

当需要从多个类型中推断时，TypeScript会推断出最通用的类型。

typescript 
let arr = [1, 2, 'three'];

4.3 上下文类型 #

TypeScript会根据上下文推断类型。

typescript 
window.onmousedown = function(mouseEvent) {
    console.log(mouseEvent.button);
};

window.onmousedown = function(mouseEvent: any) {
    console.log(mouseEvent.button);
};

4.4 显式类型注解 vs 类型推断 #

typescript 
let name: string = 'TypeScript';
let age = 12;

function greet(name: string): string {
    return `Hello, ${name}`;
}

const result = greet('World');

最佳实践：

  • 函数参数和返回值：总是显式注解
  • 变量：让TypeScript推断，除非需要特定类型

五、对象类型 #

5.1 内联类型 #

typescript 
let user: { name: string; age: number } = {
    name: 'TypeScript',
    age: 12
};

5.2 可选属性 #

使用?标记可选属性：

typescript 
let user: { name: string; age?: number } = {
    name: 'TypeScript'
};

5.3 只读属性 #

使用readonly标记只读属性：

typescript 
let user: { readonly name: string; age: number } = {
    name: 'TypeScript',
    age: 12
};

user.name = 'JavaScript';

5.4 索引签名 #

typescript 
interface StringArray {
    [index: number]: string;
}

let arr: StringArray = ['a', 'b', 'c'];
console.log(arr[0]);

六、数组类型 #

6.1 数组类型定义 #

typescript 
let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];

let numbers2: Array<number> = [1, 2, 3];
let strings2: Array<string> = ['a', 'b', 'c'];

6.2 只读数组 #

typescript 
let arr: readonly number[] = [1, 2, 3];

arr.push(4);
arr[0] = 0;

或使用ReadonlyArray：

typescript 
let arr: ReadonlyArray<number> = [1, 2, 3];

6.3 多维数组 #

typescript 
let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6]
];

七、元组类型 #

7.1 基本元组 #

元组是一个固定长度和类型的数组。

typescript 
let tuple: [string, number] = ['hello', 10];

tuple = ['world', 20];
tuple = [10, 'hello'];
tuple = ['hello', 10, 20];

7.2 可选元素 #

typescript 
let tuple: [string, number?] = ['hello'];
tuple = ['hello', 10];

7.3 剩余元素 #

typescript 
let tuple: [string, ...number[]] = ['hello', 1, 2, 3];

7.4 只读元组 #

typescript 
let tuple: readonly [string, number] = ['hello', 10];

tuple.push(20);

八、枚举类型 #

8.1 数字枚举 #

typescript 
enum Direction {
    Up,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Up;
console.log(dir);
console.log(Direction[0]);

8.2 字符串枚举 #

typescript 
enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right = 'RIGHT'
}

let dir: Direction = Direction.Up;
console.log(dir);

8.3 异构枚举 #

typescript 
enum BooleanEnum {
    No = 0,
    Yes = 'YES'
}

8.4 const枚举 #

typescript 
const enum Direction {
    Up,
    Down,
    Left,
    Right
}

let dir = Direction.Up;

编译后：

javascript 
var dir = 0;

九、类型别名 #

9.1 基本用法 #

typescript 
type Name = string;
type Age = number;

type User = {
    name: Name;
    age: Age;
};

let user: User = {
    name: 'TypeScript',
    age: 12
};

9.2 联合类型 #

typescript 
type ID = string | number;

let id: ID = 'abc123';
id = 123;

9.3 交叉类型 #

typescript 
type Name = { name: string };
type Age = { age: number };

type Person = Name & Age;

let person: Person = {
    name: 'TypeScript',
    age: 12
};

十、类型断言 #

10.1 尖括号语法 #

typescript 
let value: any = 'hello';
let length: number = (<string>value).length;

10.2 as语法 #

typescript 
let value: any = 'hello';
let length: number = (value as string).length;

10.3 非空断言 #

使用!断言值不为null或undefined：

typescript 
let value: string | null = 'hello';
let length: number = value!.length;

10.4 双重断言（不推荐） #

typescript 
let value: string = 'hello';
let num: number = value as unknown as number;

十一、总结 #

本章介绍了TypeScript的基础语法：

  1. 类型注解：明确指定类型，帮助编译器进行类型检查
  2. 变量声明：let、const的使用和最佳实践
  3. 基本类型：string、number、boolean、null、undefined等
  4. 类型推断：TypeScript自动推断类型的能力
  5. 对象类型：内联类型、可选属性、只读属性
  6. 数组类型：数组定义、只读数组、多维数组
  7. 元组类型：固定长度和类型的数组
  8. 枚举类型：数字枚举、字符串枚举、const枚举
  9. 类型别名：使用type定义类型
  10. 类型断言：手动指定类型

下一步，我们将深入学习TypeScript的数据类型系统。

最后更新：2026-03-26