TypeScript入门指南:从基础语法到高级特性

TypeScript是一种静态类型的JavaScript超集,它提供了更强的类型检查和代码提示,以及更好的代码可维护性和可读性。下面是从基础语法到高级特性的TypeScript入门指南:

1. 基础语法

1.1 数据类型

TypeScript支持JavaScript中的所有数据类型,包括数字、字符串、布尔、数组、元组、枚举、任意类型、空类型和null/undefined类型等。

let num: number = 123;
let str: string = 'hello';
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['hello', 123];
enum Color { Red, Green, Blue };
let c: Color = Color.Green;
let anyType: any = 'hello';
let voidType: void = undefined;
let nullType: null = null;
let undefinedType: undefined = undefined;

1.2 变量声明

在TypeScript中,可以使用let、const和var关键字来声明变量,其中let和const是ES6中引入的关键字,var是ES5中使用的关键字。推荐使用let和const来声明变量,它们提供了更好的变量作用域和类型检查。

let a: number = 123;
const b: string = 'hello';
var c: boolean = true;

1.3 函数定义

在TypeScript中,可以使用箭头函数和函数表达式来定义函数。箭头函数使用“=>”符号来定义函数,函数表达式使用function关键字定义函数。函数也可以有可选参数、默认参数和剩余参数等。

const add = (a: number, b: number): number => a + b;
function greet(name: string, age?: number): void {
    console.log(`Hello, ${name}!`);
}
function sum(a: number, b: number = 0, ...rest: number[]): number {
    let result = a + b;
    rest.forEach(num => result += num);
    return result;
}

1.4 类定义

在TypeScript中,可以使用class关键字来定义类。类可以有构造函数、属性和方法等。

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}
const person = new Person('Alice', 25);
person.greet();

2. 高级特性

2.1 泛型

TypeScript支持泛型,可以让代码更加通用和可重用。泛型可以应用于函数、类和接口等。

function identity<T>(arg: T): T {
    return arg;
}
const result = identity<string>('hello');

2.2 接口

在接口中定义的属性和方法可以有可选标记、只读标记和函数类型等。

interface Person {
    name: string;
    age?: number;
    readonly id: number;
    greet(): void;
}
class Student implements Person {
    name: string;
    id: number;
    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }
    greet(): void {
        console.log(`Hello, my name is ${this.name} and my id is ${this.id}.`);
    }
}
const student = new Student('Alice', 123);
student.greet();

2.3 类型别名

在TypeScript中,可以使用类型别名来给一个类型起一个新的名字。类型别名可以用于基本类型、联合类型、交叉类型和任意类型等。

type Age = number;
type NameOrAge = string | Age;
type PersonInfo = { name: string, age: number };

2.4 枚举

在TypeScript中,可以使用枚举来定义一组有名字的常量。枚举可以是数字枚举或字符串枚举。

enum Color {
    Red = 1,
    Green,
    Blue
}
enum Size {
    Small = 'S',
    Medium = 'M',
    Large = 'L'
}
console.log(Color.Red);     // 1
console.log(Color.Green);   // 2
console.log(Size.Medium);   // 'M'

2.5 命名空间

在TypeScript中,可以使用命名空间来组织代码并避免命名冲突。命名空间可以包含变量、函数、类和接口等。

namespace MathUtil {
    export const PI = 3.14;
    export function add(a: number, b: number): number {
        return a + b;
    }
}
console.log(MathUtil.PI);
console.log(MathUtil.add(1, 2));

2.6 模块

在TypeScript中,可以使用模块来组织代码并实现代码的复用。模块可以导出变量、函数、类和接口等,也可以导入其他模块的导出。

export const PI = 3.14;
export function add(a: number, b: number): number {
    return a + b;
}
import { PI, add } from './math';
console.log(PI);
console.log(add(1, 2));

结论

以上是一个简单的TypeScript入门指南,从基础语法到高级特性,覆盖了TypeScript的主要特性。希望对你了解和使用TypeScript有所帮助。

文章来源于网络,作者:27149高级会员,如若转载,请注明出处:https://puhuiju.com/9094.html

(0)
27149的头像27149高级会员管理团队
上一篇 2023年3月29日 下午5:44
下一篇 2023年3月30日 上午8:22

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

登陆
注意

保障您购买的商品请登陆账号在购买商品

资源下载
返回顶部