TypeScript 的发展与基本语法

一、TypeScript 的发展

TypeScript 是由微软开发的一种开源编程语言,它在 JavaScript 的基础上构建而来。随着 JavaScript 在前端开发以及越来越多的后端等场景广泛应用,JavaScript 本身弱类型、动态类型所带来的一些诸如代码可维护性差、大型项目中容易出现难以排查的类型错误等问题逐渐凸显出来。

为了解决这些痛点,TypeScript 应运而生。它首次发布于 2012 年,旨在为 JavaScript 开发者提供一套可选的静态类型系统,使得代码在编译阶段就能发现很多潜在的类型相关错误,从而提升代码质量,增强代码的可维护性与可读性。

经过多年的发展,TypeScript 受到了众多开发者以及各大主流框架(比如 Angular 就将其作为首选开发语言)的青睐,在业界的应用范围不断扩大,从简单的网页脚本到复杂的企业级应用开发等场景,都能看到它活跃的身影,已然成为当下非常热门且重要的编程语言之一。

二、TypeScript 的基本语法

(一)类型声明

  1. 基础类型

    • number :用于表示数字类型,像整数、浮点数都可以用这个类型来定义变量,例如:let num: number = 10; 或者 let floatNum: number = 3.14;
    • string :表示字符串类型,使用单引号或者双引号包裹起来的字符序列,比如:let str: string = "Hello, TypeScript";
    • boolean :代表布尔值,只有 truefalse 两个取值,如:let isDone: boolean = false;
    • nullundefined :分别表示空值和未定义的值,不过在 TypeScript 中,默认情况下 nullundefined 只能赋值给自身类型的变量,例如:let n: null = null;let u: undefined = undefined;
  2. 复合类型

    • 数组类型 :有两种常见的定义方式。一种是使用类型 + 方括号的形式,比如 let arr: number[] = [1, 2, 3]; 表示定义了一个数字类型的数组。另一种是使用泛型语法 let arr2: Array<string> = ["a", "b", "c"];,用来定义字符串类型的数组。
    • 对象类型:可以通过接口(interface)或者类型别名(type alias)来定义对象的结构和类型。例如使用接口定义一个简单的包含姓名和年龄属性的对象类型:

    interface Person {
    name: string;
    age: number;
    }
    let person: Person = {
    name: "Tom",
    age: 20
    };

使用类型别名定义类似的对象结构如下:

复制代码
type PersonAlias = {
    name: string;
    age: number;
};
let person2: PersonAlias = {
    name: "Jerry",
    age: 22
};

(二)函数

  1. 函数声明
    函数在声明时可以指定参数类型以及返回值类型。例如:

    function add(num1: number, num2: number): number {
    return num1 + num2;
    }

这里 add 函数接收两个 number 类型的参数,并返回一个 number 类型的值。

  1. 可选参数与默认参数

可选参数在定义时需要在参数名后面加上 ? 符号,并且可选参数必须放在必选参数后面。例如:

复制代码
function greet(name: string, message?: string) {
    if (message) {
        console.log(`${name}, ${message}`);
    } else {
        console.log(`Hello, ${name}`);
    }
}

默认参数则可以直接在参数定义时给定一个默认值,像这样:

复制代码
function multiply(num1: number, num2: number = 1) {
    return num1 * num2;
}

(三)类

  1. 类的定义

    class Animal {
    name: string;
    constructor(name: string) {
    this.name = name;
    }
    move(distance: number = 0) {
    console.log(${this.name} moved ${distance}m.);
    }
    }

这里定义了 Animal 类,有一个属性 name,构造函数用于初始化 name 属性,还有一个 move 方法。

  1. 继承

通过 extends 关键字可以实现类的继承,子类可以继承父类的属性和方法,并且可以进行重写等操作。例如:

复制代码
class Dog extends Animal {
    bark() {
        console.log(`${this.name} is barking.`);
    }
}
let dog = new Dog("旺财");
dog.move(10);
dog.bark();

(四)接口

接口用于定义对象的结构、函数的类型签名等。除了前面提到的定义对象结构的接口示例外,还可以定义函数类型的接口,如下:

复制代码
interface MathFunc {
    (num1: number, num2: number): number;
}
function subtract(num1: number, num2: number): number {
    return num1 - num2;
}
let mySubtract: MathFunc = subtract;

(五)泛型

泛型可以让我们编写可复用的、能适应不同类型的代码。例如定义一个简单的泛型函数:

复制代码
function identity<T>(arg: T): T {
    return arg;
}
let result = identity<number>(10);

这里的 T 就是一个类型变量,可以在调用函数时指定具体的类型。

通过对 TypeScript 发展历程的了解以及对这些基本语法的学习,我们算是迈出了掌握 TypeScript 的重要一步,后续还需要不断实践、深入探索,才能更好地运用它进行项目开发呀。

相关推荐
yuanyxh6 小时前
Mac 软件推荐
前端·javascript·程序员
万少6 小时前
AtomCode开发微信小程序《谁去呀》 全流程
前端·javascript·后端
某人辛木6 小时前
Web自动化测试
前端·python·pycharm·pytest
Kagol6 小时前
Superpowers GSD gstack AgentSkills深度测评
前端·人工智能
excel7 小时前
JavaScript 字符串与模板字面量:从表象到本质理解
前端
京东云开发者8 小时前
当AI成为导演-如何用AI创作动漫短剧
前端
李白的天不白8 小时前
使用 SmartAdmin 进行前后端开发
java·前端
乘风gg8 小时前
🤡PUA AI Coding 工具 的 10 条终极语录
前端·ai编程·claude
学Linux的语莫8 小时前
Vue 3 入门教程
前端·javascript·vue.js
怕浪猫9 小时前
第一章、Chrome DevTools Protocol (CDP) 详解
前端·javascript·chrome