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 的重要一步,后续还需要不断实践、深入探索,才能更好地运用它进行项目开发呀。

相关推荐
GISer_Jing10 分钟前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii11 分钟前
工作中可以用到的前端小知识(不定时更新)
javascript
Dragon Wu17 分钟前
TailwindCss 总结
前端·css·前端框架
bpmf_fff26 分钟前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
泰山小张只吃荷园39 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
悦涵仙子1 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树1 小时前
分布式在线评测系统
前端·c++·后端·负载均衡
haima952 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐2 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲2 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5