【TypeScript】 ts基本语法

写在最前

本笔记为参加DataWhale 202409 组队学习而写，也是复习前端语言的记录。
项目github链接:https://github.com/datawhalechina/wow-fullstack

1. JS和TS的关系

1.1 什么是JS

JavaScript（也称为ECMAScript）诞生时是一种简单的浏览器脚本语言。当它被发明时，它被期望用于在网页中嵌入简短的代码片段。这些片段通常不超过几十行。因此，早期的 Web 浏览器执行此类代码的速度非常慢。但是，随着时间的推移，JS 变得越来越流行，并且 Web 开发者开始使用它来创造交互式体验。

Web 浏览器开发者通过优化执行引擎（动态编译）和扩展可以完成的功能（添加API）来应对 JS 日益增加的使用量，这反过来又使 Web 开发者更多地使用 JS。在现代网站上，你的浏览器经常运行超过数十万行代码的应用程序。这是“网络”的长期而渐进的发展，从一个简单的静态页面网络开始，逐渐演变成一个用于各种丰富应用程序的平台。

不仅如此，JS已经变得足够流行，以至于可以在浏览器环境之外使用。例如用 node.js 实现 JS 服务器。JS “随处运行”的特性使其成为跨平台开发的颇具吸引力的选择。如今，有许多开发者 只 使用 JavaScript 便可完成全栈编程！

1.2 什么是TS

TypeScript (简称 TS) 是由微软开发并在 2012 年首次发布的一种编程语言，它是 JavaScript 的超集，扩展了 JavaScript 的语法并引入了类型系统。TypeScript 的设计目的是帮助开发者更好地构建大型、复杂的 JavaScript 项目，尤其是在团队协作中，通过静态类型检查可以在开发阶段发现潜在的错误。

TypeScript 引入了静态类型、接口、泛型等高级编程概念，同时仍然保持与现有的 JavaScript 代码完全兼容。TypeScript 代码最终会被编译成纯 JavaScript，从而可以在任何支持 JavaScript 的环境中运行。它适合用于开发大型项目，增强代码的可维护性、可读性和重构的便利性。

1.3 JS和TS关系

JavaScript 和 TypeScript 的关系可以理解为 TypeScript 是 JavaScript 的增强版本。TypeScript 扩展了 JavaScript，使其在开发大型项目时更加健壮和易于维护。以下是两者的关键区别和关系：

1. 超集关系：TypeScript 是 JavaScript 的超集，任何合法的 JavaScript 代码都是合法的 TypeScript 代码。也就是说，JavaScript 是 TypeScript 的子集。
2. 静态类型：TypeScript 引入了静态类型检查，这意味着可以在编译时发现类型相关的错误，而 JavaScript 是动态类型语言，错误通常是在运行时发现的。
3. 编译：TypeScript 需要通过编译器将 .ts 文件转换为 JavaScript 文件，而 JavaScript 则是直接解释执行的语言。
4. 开发体验：TypeScript 提供了更强大的 IDE 支持、自动补全和错误提示功能，使开发体验更加顺畅，尤其是在大型项目中。
5. 现代特性支持：TypeScript 支持 ECMAScript 的最新特性，即使是 JavaScript 尚未完全支持的部分功能，也可以通过 TypeScript 使用。

总结来说，TypeScript 提供了 JavaScript 开发中缺乏的类型系统和更多开发工具支持，帮助开发者更容易编写和维护复杂的代码。

这里是补充的 TypeScript 基本语法和运算符内容，以及相应的代码示例：

2. ts基本语法

2.1. 基本语法

变量声明

在 TypeScript 中，变量可以通过 let、const 或 var 来声明。推荐使用 let 和 const，因为它们有块级作用域和不可变的特性。

let myVariable: string = "Hello, TypeScript!";
const myConstant: number = 42;

类型注解

TypeScript 中可以为变量、函数参数、函数返回值等添加类型注解，显式地说明变量的类型。

let myNumber: number = 10;
let myString: string = "Hello";
let isCompleted: boolean = true;

// 数组
let numbers: number[] = [1, 2, 3, 4];

// 元组
let person: [string, number] = ["Alice", 25];

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

函数

在函数定义时，可以为参数和返回值指定类型。也可以设置默认参数和可选参数。

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

// 默认参数
function greet(name: string = "Guest"): void {
    console.log("Hello, " + name);
}

// 可选参数
function logMessage(message: string, user?: string): void {
    if (user) {
        console.log(`${user} says: ${message}`);
    } else {
        console.log(message);
    }
}

接口

接口定义对象的结构，并且可以通过接口来确保对象具有特定的属性和方法。

interface User {
    name: string;
    age: number;
    sayHi(): void;
}

let user: User = {
    name: "John",
    age: 30,
    sayHi: () => console.log("Hi!")
};

类

TypeScript 支持面向对象编程中的类、继承、修饰符等特性。

class Animal {
    private name: string;

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

    public move(distance: number): void {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    bark(): void {
        console.log("Woof! Woof!");
    }
}

let myDog = new Dog("Buddy");
myDog.bark();
myDog.move(10);

泛型

泛型使得可以编写能够适用于多种类型的代码。常用于函数、接口、类的定义。

function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("myString");  // 明确指定类型
let output2 = identity<number>(100);         // 使用数字类型

2.2. 运算符

TypeScript 主要包含以下几种运算：

• 算术运算符
• 逻辑运算符
• 关系运算符
• 按位运算符
• 赋值运算符
• 三元/条件运算符
• 字符串运算符
• 类型运算符

以下是你提到的运算符的详细补充以及对应的 TypeScript 示例代码：

2.2.1 算术运算符

算术运算符用于对数值进行基本的数学运算。

let x: number = 10;
let y: number = 5;

console.log(x + y);  // 15
console.log(x - y);  // 5
console.log(x * y);  // 50
console.log(x / y);  // 2
console.log(x % y);  // 0
console.log(x++);    // 10 (先返回值，再自增)
console.log(++y);    // 6  (先自增，再返回值)

2.2.2 逻辑运算符

逻辑运算符用于处理布尔逻辑。

let a: boolean = true;
let b: boolean = false;

console.log(a && b);  // false
console.log(a || b);  // true
console.log(!a);      // false

2.2.3 关系运算符（比较运算符）

关系运算符用于比较两个值，返回布尔结果。

let a: number = 10;
let b: number = 20;

console.log(a > b);   // false
console.log(a < b);   // true
console.log(a == b);  // false
console.log(a != b);  // true
console.log(a >= b);  // false
console.log(a <= b);  // true
console.log(10 === "10");  // false (严格相等)
console.log(10 == "10");   // true  (自动类型转换)

2.2.4 按位运算符

按位运算符对数字的二进制表示执行操作。

let m: number = 5;   // 0101
let n: number = 3;   // 0011

console.log(m & n);  // 1  -> 0001 (按位与)
console.log(m | n);  // 7  -> 0111 (按位或)
console.log(m ^ n);  // 6  -> 0110 (按位异或)
console.log(~m);     // -6 -> 1010 (按位取反)
console.log(m << 1); // 10 -> 1010 (左移)
console.log(m >> 1); // 2  -> 0010 (右移)

2.2.5 赋值运算符

赋值运算符用于将值赋给变量。

let a: number = 10;
a += 5;   // 等价于 a = a + 5;
console.log(a);  // 15

a -= 2;   // 等价于 a = a - 2;
console.log(a);  // 13

a *= 3;   // 等价于 a = a * 3;
console.log(a);  // 39

a /= 3;   // 等价于 a = a / 3;
console.log(a);  // 13

a %= 2;   // 等价于 a = a % 2;
console.log(a);  // 1

2.2.6 三元/条件运算符

三元运算符是一种简洁的条件运算符，语法为：condition ? expr1 : expr2。

let age: number = 18;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote);  // "Yes"

2.2.7 字符串运算符

字符串运算符主要是字符串的连接。

let firstName: string = "John";
let lastName: string = "Doe";

let fullName: string = firstName + " " + lastName;
console.log(fullName);  // "John Doe"

2.2.8 类型运算符

typeof

typeof 运算符返回一个变量的类型。

let str: string = "Hello";
console.log(typeof str);  // "string"

let num: number = 42;
console.log(typeof num);  // "number"

let isFlag: boolean = true;
console.log(typeof isFlag);  // "boolean"

instanceof

instanceof 检查一个对象是否是某个类的实例。

class Car {}
let myCar = new Car();

console.log(myCar instanceof Car);  // true

类型断言

类型断言用于明确告诉 TypeScript 某个值的类型。常用两种语法形式：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;  // 类型断言为 string

// 或者使用尖括号语法
let strLength2: number = (<string>someValue).length;

---

这些是 TypeScript 中的主要运算符示例，通过这些运算符，你可以在编程中处理各种数据类型和逻辑条件。

3. 学习总结

通过本章学习了JS和TS的概念，JavaScript 和 TypeScript 的关系可以理解为 TypeScript 是 JavaScript 的增强版本。TypeScript 扩展了 JavaScript，使其在开发大型项目时更加健壮和易于维护。
学习了常见的TS基本语法和运算符：算术运算符、逻辑运算符、关系运算符、按位运算符等等。
通过官网给出的环境进行代码运算，观察代码示例的结果。
有需要的朋友可以点击官网ts环境进行代码实践：https://www.typescriptlang.org/zh/play/