第Ⅰ章-VII Typescript主要功能概览

第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目项目文件详解
第Ⅰ章-III Vite 创建vue3 项目
第Ⅰ章-IV npm yarn pnpm 包管理器
第Ⅰ章-V package.json文件详解
第Ⅰ章-VI 熟练掌握ES6新特性

第Ⅰ章-VII Typescript主要功能概览

简介
语法特性
- 类型系统
- 面向对象特性
- 函数特性
- 模块与命名空间
- 其他特性

简介

TypeScript2012发布，是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。增加了类型检查、类和接口等高级特性，以帮助开发者编写更健壮、可维护的代码。

JavaScript 的超集：TypeScript 是 JavaScript 的超集，意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码。TypeScript 添加了静态类型系统和其他特性，使其更适合大型项目的开发。
编译器：TypeScript 代码在运行前需要通过 TypeScript 编译器（tsc）编译成 JavaScript。这个编译过程可以检查代码中的类型错误，生成与目标 JavaScript 版本（如 ES5、ES6）兼容的代码。
生态系统：TypeScript 拥有一个丰富的生态系统，包括大量的工具、库和社区资源。

语法特性

TypeScript 引入了一套静态类型系统，可以在编译时检查类型错误。

类型系统

基本类型：包括 string、number、boolean、any 等，用于定义不同的数据类型。
复杂类型：定义数组、元组、枚举、联合类型、交叉类型等复杂类型，以描述更复杂的数据结构。
自定义类型：可以通过 type 关键字来定义类型别名或组合类型，以更灵活地描述数据。

typescript">//定义了一个名为UserId的联合类型 
type UserId = number | string;

可以多出重用，是代码可读性更强。

类型断言：用于显式地将一个值转换为特定类型。

typescript">let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

类型推断：TypeScript 可以自动推断变量、函数返回值等的类型，从而简化代码编写过程。

typescript">let message="Hello,World!";
let count=42;
message="Hi!";//可以重新赋值为字符串
//message =10 //报错 不能将number 分配给 string
count=100;//可以重新赋值为证书
// count="foo";//报错：不能将string 分配给number

面向对象特性

类（Class）：TypeScript 支持面向对象的类，包括属性、方法、构造函数、继承等。
javavscript 写法

javascript">class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}
const dog = new Animal("Buddy");
dog.speak(); // 输出 "Buddy makes a noise."

typescript

typescript">class Animal {constructor(public name: string) {}speak() {console.log(`${this.name} makes a sound.`);}
}

接口（Interface）：接口定义了一组属性和方法，可以用于描述对象的形状

typescript">interface Person {name: string;age: number;speak(): void;
}

修饰符：TypeScript 支持 public、private、protected 等访问修饰符，用于控制类属性和方法的可见性。
抽象类：抽象类可以用于定义基础类，并强制子类实现特定的方法。

typescript">abstract class Shape {abstract getArea(): number;
}class Rectangle extends Shape {constructor(private width: number, private height: number) {super();}getArea() {return this.width * this.height;}
}

//javascript 继承类

javascript">class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}const dog = new Dog("Tom");
dog.speak(); // 输出 "Tom barks."

泛型：泛型可以用于函数、接口、类等，以创建更通用的代码

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

函数特性

函数类型：TypeScript 允许为函数指定类型签名，包括参数和返回值类型。

typescript">function add(x: number, y: number): number {return x + y;
}

可选参数：可以通过在参数后添加 ? 来定义可选参数。

typescript">function greet(name?: string) {if (name) {console.log(`Hello, ${name}`);} else {console.log("Hello, world!");}
}

剩余参数：使用 … 来定义可变数量的参数。

typescript">function sum(...numbers: number[]): number {return numbers.reduce((a, b) => a + b, 0);
}

函数重载：可以定义多个函数签名，以支持不同参数类型的重载。

typescript">function getLength(x: string): number;
function getLength(x: any[]): number;
function getLength(x: any): number {return x.length;
}

模块与命名空间

模块：TypeScript 支持 ES6 模块语法，可以使用 import 和 export 进行模块化开发。

typescript">// utils.ts
export function add(a: number, b: number): number {return a + b;
}// main.ts
import { add } from './utils';
console.log(add(1, 2)); // 输出 3

命名空间：TypeScript 支持命名空间，可以用于组织代码。

typescript">namespace Utils {export function add(a: number, b: number): number {return a + b;}
}console.log(Utils.add(1, 2)); // 输出 3

其他特性

readonly 属性：可以用于定义只读属性，确保对象的某些属性不可修改。

typescript">class Person {constructor(public readonly name: string) {}
}const p = new Person("Alice");
// p.name = "Bob"; // 报错：Cannot assign to 'name' because it is a read-only property.

装饰器：TypeScript 支持装饰器，用于为类、方法、属性等添加元数据或行为。

typescript">function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function(...args: any[]) {console.log(`Calling ${propertyKey} with arguments:`, args);return originalMethod.apply(this, args);};
}class Example {@Loggreet(name: string) {console.log(`Hello, ${name}`);}
}const ex = new Example();
ex.greet("World");

类型守卫：可以使用类型守卫来确保在运行时操作特定类型的数据。

typescript">function isString(x: any): x is string {return typeof x === 'string';
}
function printLength(x: any) {if (isString(x)) {console.log(x.length);} else {console.log("Not a string.");}
}