📜  TypeScript功能(1)

📅  最后修改于: 2023-12-03 14:48:05.735000             🧑  作者: Mango

TypeScript 功能介绍

TypeScript 是一种由 Microsoft 开发的开源编程语言,它是 JavaScript 的超集,在保持 JavaScript 动态特性的同时,为 JavaScript 提供了类型系统、ES6+的语法支持、类、接口、模块等特性,可以更好地帮助开发者进行大型和复杂的项目开发。

类型系统

TypeScript 强大的类型系统可以帮助开发者在编码过程中发现和修复类型相关的错误,从而提高代码的可读性和健壮性。

基本类型

TypeScript 支持 JavaScript 的所有基本数据类型,如 string、number、boolean、null、undefined、symbol 和 any 类型。同时,TypeScript 还提供了新的类型,如 tuple 类型,枚举类型等。

// 字符串类型
let name: string = 'TypeScript';

// 数字类型
let age: number = 10;

// 布尔类型
let isStudent: boolean = true;

// 数组类型
let list: number[] = [1, 2, 3];

// 元组类型
let tuple: [string, number] = ['TypeScript', 10];

// 枚举类型
enum Color {Red, Green, Blue}
let color: Color = Color.Blue;

// 任意类型
let other: any = 'hello';
other = 10;
类型注解

TypeScript 的类型注解可以更加明确地指定变量、函数、类等的类型,让代码更加可读和健壮。

// 变量类型注解
let name: string = 'TypeScript';

// 函数类型注解
function add(x: number, y: number): number {
  return x + y;
}

// 类类型注解
class Person {
  name: string;
  age: number;
}
类型推导

TypeScript 支持类型推导,能够自动地推断变量或表达式的类型,让代码编写更加简洁。

// 类型推导
let name = 'TypeScript'; // 推断为 string 类型
let add = (x: number, y: number) => x + y; // 推断为 (x: number, y: number) => number 类型
ES6+的语法支持

TypeScript 对 ES6+ 的语法提供了原生的支持,可以直接在代码中使用 ES6+ 的语法。

let 和 const

TypeScript 支持 ES6 中的 let 和 const 关键字,可以更加灵活地定义变量。

// let 关键字
let name = 'TypeScript';
name = 'JavaScript';

// const 关键字
const age = 10;
函数

TypeScript 支持箭头函数、默认参数、剩余参数等 ES6+ 函数特性。

// 箭头函数
const add = (x: number, y: number): number => x + y;

// 默认参数
const greeting = (name: string = 'TypeScript') => `Hello ${name}`;

// 剩余参数
const sum = (...args: number[]) => args.reduce((a, b) => a + b);

TypeScript 支持 ES6 中的类,包括类的定义、构造函数、类的继承、类的访问修饰符等。

// 类的定义
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 类的方法
  greet() {
    return `Hello, my name is ${this.name}, I'm ${this.age} years old.`;
  }
}

// 类的继承
class Student extends Person {
  major: string;

  constructor(name: string, age: number, major: string) {
    super(name, age);
    this.major = major;
  }

  // 类的覆盖方法
  greet() {
    return super.greet() + ` My major is ${this.major}.`;
  }
}
模块化

TypeScript 支持使用模块化的方式来组织代码,可以使用 ES6 的 import/export 语法导入/导出模块。

// 导出模块
export const name = 'TypeScript';
export const age = 10;
export const greeting = (name: string) => `Hello, ${name}`;

// 导入模块
import { name, age, greeting } from './module.ts';
联合类型和交叉类型

TypeScript 支持联合类型和交叉类型,可以更加方便地处理复杂的类型关系。

联合类型

联合类型表示一个变量可以是多个类型中的一种类型,可以使用 | 符号来定义。

// 联合类型
let name: string | null = 'TypeScript';
name = null;
交叉类型

交叉类型可以将多个类型合并成一个类型,可以使用 & 符号来定义。

// 交叉类型
interface Name {
  name: string;
}
interface Age {
  age: number;
}
type Person = Name & Age;

const person: Person = {
  name: 'TypeScript',
  age: 10,
};
总结

TypeScript 带来了很多有用的特性,可以大大提高 JavaScript 代码的可读性和健壮性,适合用于大型和复杂的项目开发。类型系统、ES6+的语法支持、类、接口、模块等特性都能帮助开发者更好地组织代码和处理复杂的类型关系。