第Ⅰ章-Ⅰ 了解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 关键字来定义类型别名或组合类型，以更灵活地描述数据。
//定义了一个名为UserId的联合类型
type UserId = number | string;
可以多出重用，是代码可读性更强。
- 类型断言：用于显式地将一个值转换为特定类型。
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
- 类型推断：TypeScript 可以自动推断变量、函数返回值等的类型，从而简化代码编写过程。
let message="Hello,World!";
let count=42;
message="Hi!";//可以重新赋值为字符串
//message =10 //报错 不能将number 分配给 string
count=100;//可以重新赋值为证书
// count="foo";//报错：不能将string 分配给number
面向对象特性
- 类（Class）：TypeScript 支持面向对象的类，包括属性、方法、构造函数、继承等。
javavscript 写法
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
class Animal {
constructor(public name: string) {}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
- 接口（Interface）：接口定义了一组属性和方法，可以用于描述对象的形状
interface Person {
name: string;
age: number;
speak(): void;
}
- 修饰符：TypeScript 支持 public、private、protected 等访问修饰符，用于控制类属性和方法的可见性。
- 抽象类：抽象类可以用于定义基础类，并强制子类实现特定的方法。
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 继承类
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Tom");
dog.speak(); // 输出 "Tom barks."
- 泛型：泛型可以用于函数、接口、类等，以创建更通用的代码
function identity<T>(arg: T): T {
return arg;
}
函数特性
- 函数类型：TypeScript 允许为函数指定类型签名，包括参数和返回值类型。
function add(x: number, y: number): number {
return x + y;
}
- 可选参数：可以通过在参数后添加 ? 来定义可选参数。
function greet(name?: string) {
if (name) {
console.log(`Hello, ${name}`);
} else {
console.log("Hello, world!");
}
}
- 剩余参数：使用 … 来定义可变数量的参数。
function sum(...numbers: number[]): number {
return numbers.reduce((a, b) => a + b, 0);
}
- 函数重载：可以定义多个函数签名，以支持不同参数类型的重载。
function getLength(x: string): number;
function getLength(x: any[]): number;
function getLength(x: any): number {
return x.length;
}
模块与命名空间
- 模块：TypeScript 支持 ES6 模块语法，可以使用 import 和 export 进行模块化开发。
// 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 支持命名空间，可以用于组织代码。
namespace Utils {
export function add(a: number, b: number): number {
return a + b;
}
}
console.log(Utils.add(1, 2)); // 输出 3
其他特性
- readonly 属性：可以用于定义只读属性，确保对象的某些属性不可修改。
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 支持装饰器，用于为类、方法、属性等添加元数据或行为。
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 {
@Log
greet(name: string) {
console.log(`Hello, ${name}`);
}
}
const ex = new Example();
ex.greet("World");
- 类型守卫：可以使用类型守卫来确保在运行时操作特定类型的数据。
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.");
}
}
