首页手记新手必看！轻松掌握ts考点

新手必看！轻松掌握ts考点

标签：

面试 Typescript

概述

本文深入介绍了TypeScript的基本概念和安装方法，涵盖了变量声明、函数定义、类型推断等基本语法，并详细讲解了接口、泛型和装饰器等核心特性。文章还探讨了函数式编程和面向对象编程模式，以及如何在项目中使用模块化和路由管理。文中提供了丰富的示例代码，帮助读者理解和掌握这些ts考点。

TypeScript简介与安装

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，也是静态类型语言的扩展。TypeScript 为 JavaScript 添加了类型支持，使得在大型项目中更易于维护。TypeScript 可以编译成纯 JavaScript，并且可以运行在任何支持 JavaScript 的运行环境中。

为什么学习TypeScript

TypeScript 的主要优势在于其静态类型系统，它可以帮助开发者在编码时捕捉到更多的错误，提高代码的质量和可维护性。此外，TypeScript 还提供了更丰富的语言特性，如接口、泛型、装饰器等，这些特性使得编写复杂的、可维护的代码变得更加容易。因此，学习 TypeScript 可以提高开发效率，减少错误，并且可以更好地管理大型项目。

示例代码

// 示例：类型检查
function sayHello(name: string) {
    console.log(`Hello, ${name}!`);
}

sayHello("Alice");

如何安装TypeScript

安装 TypeScript 有多种方式，这里介绍两种常用的方法：通过 npm（Node.js 包管理器）和通过 Visual Studio Code 插件。以下是使用 npm 安装 TypeScript 的步骤：

确保已经安装了 Node.js 和 npm。可以通过以下命令检查是否已经安装：
```
node -v
npm -v
```
如果没有安装，可以访问 Node.js 官方网站下载并安装。
使用 npm 安装 TypeScript。在命令行中输入以下命令：
```
npm install -g typescript
```
这将全局安装 TypeScript，安装完成后可以使用 tsc 命令来编译 TypeScript 文件。
检查安装是否成功：
```
tsc -v
```
如果安装成功，将输出安装的 TypeScript 版本。
创建一个 TypeScript 文件并编译它：

创建一个名为 hello.ts 的文件：
```
touch hello.ts
```
编写以下代码：
```
// hello.ts
console.log("Hello, TypeScript!");
```
使用 tsc 编译这个文件：
```
tsc hello.ts
```
这将生成一个名为 hello.js 的文件，其中包含编译后的 JavaScript 代码。

通过以上步骤，你可以成功安装并使用 TypeScript 进行开发。

基本语法与类型

学习 TypeScript 首先要掌握基本的语法和类型系统。这包括变量声明、函数定义、类型推断和类型断言等。

变量与类型

在 TypeScript 中，变量的声明和 JavaScript 类似，但是可以通过类型注解来指定变量的类型。常见的基本类型包括 number、string、boolean、null 和 undefined。此外，还可以使用 any 类型，它表示任何类型。

示例代码

let age: number = 25;  // 数字类型
let name: string = "John Doe";  // 字符串类型
let isActive: boolean = true;  // 布尔类型
let value: null = null;  // null 类型
let notDefined: undefined = undefined;  // undefined 类型
let anyValue: any = 25;  // 任何类型

类型推断

TypeScript 有类型推断的能力，可以自动推断变量的类型。例如，如果给一个变量赋值为数字，那么 TypeScript 将推断该变量的类型为 number。

let age = 25;  // 类型推断为 number

类型断言

类型断言是告诉编译器如何将一个类型转换为另一个类型。这通常用于向下兼容或者在不确定变量类型时进行类型转换。

示例代码

let anyVariable: any = "Hello";
let stringVariable: string = <string>anyVariable;  // 类型断言

函数与返回类型

TypeScript 中的函数声明需要指定参数类型和返回值类型。这有助于在编译时确保函数的正确性。

示例代码

function add(a: number, b: number): number {
    return a + b;
}

let result: number = add(5, 3);

默认参数

TypeScript 支持默认参数，如果某些参数未传递值，则使用默认值。

function greet(name: string = "Guest"): string {
    return `Hello, ${name}`;
}

console.log(greet());  // 输出 "Hello, Guest"

可选参数

可选参数允许在调用函数时忽略某些参数。

function greetUser(name: string, greeting?: string): string {
    return `${greeting} ${name}`;
}

console.log(greetUser("Alice"));  // 输出 "Alice"
console.log(greetUser("Bob", "Hello"));  // 输出 "Hello Bob"

类型推断与类型断言

类型推断可以自动推断变量的类型，而类型断言则显式地告诉编译器变量的类型。这有助于在编译时避免类型错误。

示例代码

let unknownVariable: unknown = "Hello";
let stringVariable: string = <string>unknownVariable;  // 类型断言

任何类型 (`any`)

使用 any 类型可以暂时避开 TypeScript 的类型检查。

let anyVariable: any = 123;
anyVariable = "Hello";  // 没有任何类型错误

示例代码

let value: any = 123;
value = "Hello";  // 类型检查被忽略

TypeScript的核心特性

TypeScript 提供了许多核心特性，例如接口、泛型和装饰器等，这些特性使得编写更强大和灵活的代码成为可能。

接口与类型别名

接口是在 TypeScript 中定义对象的结构的一种方式。接口定义了一组属性、方法和索引签名等。

接口定义

interface Person {
    name: string;
    age: number;
    greet(): void;
}

let john: Person = {
    name: "John Doe",
    age: 25,
    greet() {
        console.log("Hello, my name is " + this.name);
    }
}

类型别名

类型别名用于定义一种新的类型，它是现有类型的别名。

type PersonType = {
    name: string;
    age: number;
    greet: () => void;
}

let john: PersonType = {
    name: "John Doe",
    age: 25,
    greet() {
        console.log("Hello, my name is " + this.name);
    }
}

示例代码

interface Rectangle {
    width: number;
    height: number;
}

let rect: Rectangle = {
    width: 10,
    height: 20
};

console.log("Rectangle width: " + rect.width);
console.log("Rectangle height: " + rect.height);

泛型

泛型是一种允许函数、类或接口参数化的机制，这意味着它们可以适用于多种类型，而不需要为每种类型定义一个特定的实现。

泛型函数

function createArray<T>(length: number, value: T): T[] {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

let numbers = createArray<number>(5, 1);  // 创建一个包含5个数字1的数组
let strings = createArray<string>(5, "Hello");  // 创建一个包含5个字符串"Hello"的数组

泛型类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;

    constructor(zeroValue: T, add: (x: T, y: T) => T) {
        this.zeroValue = zeroValue;
        this.add = add;
    }
}

let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.add(1, 2));  // 输出 3

示例代码

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

let output = identity<string>("myString");  // 将类型参数设置为 string
console.log(output);

装饰器

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数。装饰器使用 @expression 的形式，其中 expression 必须是一个函数。

类装饰器

function readonly(target: any, key: string) {
    let value = target[key];
    let writableKey = "__writable_" + key;
    Object.defineProperty(target, key, {
        get: function () { return target[writableKey]; },
        set: function (this: any, newValue: any) {
            if (this[writableKey] !== newValue) {
                throw new Error(`Cannot modify readonly property ${key}`);
            }
        }
    });
    Object.defineProperty(target, writableKey, {
        value: value,
        writable: true
    });
}

class Example {
    @readonly
    readonly property: number = 10;
}

let example = new Example();
example.property = 20;  // 抛出错误 "Cannot modify readonly property property"

方法装饰器

function readonly(target: any, key: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false;
}

class Example {
    @readonly
    property: number;

    setProperty(value: number) {
        this.property = value;
    }
}

let example = new Example();
example.setProperty(20);  // 抛出错误 "Cannot set property property which has only a getter"

示例代码

function log(target: any, name: string, descriptor: PropertyDescriptor) {
    let originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling "${name}" with`, args);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

class Logger {
    @log
    logMessage(message: string) {
        console.log(message);
    }
}

let logger = new Logger();
logger.logMessage("Hello, TypeScript!");  // 输出 "Calling "logMessage" with [ 'Hello, TypeScript!' ]"

常见的编程模式

TypeScript 支持多种编程模式，包括函数式编程和面向对象编程等。

函数式编程

函数式编程是一种编程范式，它强调程序是函数的组合。函数式编程通常避免使用可变状态和可变数据。

示例代码

function add(a: number, b: number): number {
    return a + b;
}

const result = add(1, 2);
console.log(result);  // 输出 3

高阶函数

高阶函数是接受一个或多个函数作为参数，或者返回一个函数的函数。

function multiplyBy(factor: number) {
    return function (value: number) {
        return value * factor;
    };
}

let double = multiplyBy(2);
let triple = multiplyBy(3);

console.log(double(5));  // 输出 10
console.log(triple(5));  // 输出 15

示例代码

function square(x: number): number {
    return x * x;
}

function map(array: number[], func: (x: number) => number): number[] {
    return array.map(func);
}

let numbers = [1, 2, 3, 4];
let squaredNumbers = map(numbers, square);

console.log(squaredNumbers);  // 输出 [1, 4, 9, 16]

面向对象编程

面向对象编程是一种编程范式，它通过对象来封装数据和行为。在 TypeScript 中，可以通过类和接口来实现面向对象编程。

类定义

class Animal {
    constructor(public name: string) {
    }

    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

let animal = new Animal("Dog");
animal.move(5);  // 输出 "Dog moved 5m."

继承

类可以继承其他类，从而复用代码和共享行为。

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

    bark() {
        console.log(`${this.name} barked.`);
    }
}

let dog = new Dog("Rex");
dog.bark();  // 输出 "Rex barked."
dog.move(10);  // 输出 "Rex moved 10m."

示例代码

class Rectangle {
    constructor(public width: number, public height: number) {
    }

    getArea(): number {
        return this.width * this.height;
    }
}

let rect = new Rectangle(5, 10);
console.log(rect.getArea());  // 输出 50

代码组织与模块化

在大型项目中，代码组织和模块化是非常重要的。TypeScript 支持 ES6 模块化以及路由与文件结构的管理。

模块与ES6模块化

ES6 模块化引入了 import 和 export 关键字，使得模块化开发更加方便。

示例代码

// module1.ts
export function add(a: number, b: number): number {
    return a + b;
}

// module2.ts
import { add } from "./module1";

console.log(add(1, 2));  // 输出 3

重新导出

可以在模块中重新导出其他模块中的内容。

// module1.ts
export function add(a: number, b: number): number {
    return a + b;
}

// module3.ts
import { add } from "./module1";

export { add };  // 重新导出 add 函数

示例代码

// module1.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from "./module1";

console.log(add(1, 2));  // 输出 3

路由与文件结构

在大型项目中，合理的文件结构可以帮助更好地组织代码。通常会按照功能或者模块划分文件夹，每个文件夹下包含相关的模块和文件。

示例代码

// src/
// ├── module1.ts
// │   export function module1Function() {}
// ├── module2.ts
// │   export function module2Function() {}
// ├── main.ts
// │   import { module1Function } from "./module1";
// │   import { module2Function } from "./module2";
// │   module1Function();
// │   module2Function();
// └── index.ts
//     export * from "./module1";
//     export * from "./module2";

// 使用模块
import * as modules from "./src";

modules.module1Function();
modules.module2Function();

项目实践与调试技巧

在实际项目中，掌握调试技巧和遵循代码规范是非常重要的。这可以帮助你更好地管理代码，并提高开发效率。

实践项目介绍

选择一个实际项目来练习 TypeScript 的使用。例如，可以开发一个简单的博客应用，包括用户管理、文章管理和评论系统等功能。

示例代码

// User.ts
export interface User {
    id: number;
    name: string;
    email: string;
}

// Post.ts
export interface Post {
    id: number;
    title: string;
    content: string;
    author: User;
}

// Comment.ts
export interface Comment {
    id: number;
    content: string;
    author: User;
    post: Post;
}

// App.ts
import { User, Post, Comment } from "./models";

function createPost(post: Post) {
    console.log(`Created post "${post.title}" by ${post.author.name}`);
}

let john: User = { id: 1, name: "John Doe", email: "john@example.com" };
let post: Post = { id: 1, title: "Hello, TypeScript!", content: "This is a sample post.", author: john };

createPost(post);

调试工具与技巧

调试是程序开发中不可或缺的一环。TypeScript 支持多种调试工具，例如 Visual Studio Code 的内置调试器。

使用调试器

在 VS Code 中打开项目。
创建一个新的 launch.json 文件，指定调试配置。
使用断点、日志输出等方式进行调试。

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/main.ts",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

示例代码

// main.ts
function add(a: number, b: number): number {
    return a + b;
}

function multiply(a: number, b: number): number {
    return a * b;
}

console.log(add(1, 2));  // 输出 3
console.log(multiply(2, 3));  // 输出 6

调试技巧

使用断点：在代码中插入断点，以便在运行时暂停执行。
查看变量：在调试时查看变量的值，以了解程序的状态。
跟踪调用：跟踪函数的调用链，了解程序的执行流程。
使用日志输出：在关键位置添加日志输出，以便更好地理解程序的执行过程。

代码规范与最佳实践

遵循代码规范和最佳实践可以帮助编写更高质量的代码。TypeScript 社区推荐了一些最佳实践，例如使用 TypeScript 编写代码，遵循统一的代码风格，避免使用 any 类型，等等。

示例代码

// 好的代码示例
function add(a: number, b: number): number {
    return a + b;
}

// 不好的代码示例
let anyValue: any = 123;
anyValue = "Hello";  // 使用 any 类型

代码规范

使用 TypeScript 编写代码：尽可能使用 TypeScript 的类型特性，而不是使用 any 类型。
遵循统一的代码风格：例如使用适当的缩进、空格和括号，保持代码的一致性。
保持代码简洁：避免不必要的复杂性，保持代码的清晰和可维护性。
使用有意义的命名：使用有意义的变量名和函数名，使代码更易理解。
添加注释和文档：添加必要的注释和文档，帮助其他开发者理解代码。

示例代码

// 好的代码风格示例
function calculateSum(a: number, b: number): number {
    return a + b;
}

// 不好的代码风格示例
function calc(a, b) {
    return a + b;
}

通过以上内容，你已经掌握了 TypeScript 的基本语法和核心特性，并了解了如何在实际项目中使用 TypeScript 以及一些调试和代码规范的最佳实践。希望这篇文章能帮助你更好地学习和使用 TypeScript。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕姐8265434

手记
篇

粉丝

222

获赞与收藏

1065

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

TypeScript 入门教程

38个小节 93478 666

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

新手必看！轻松掌握ts考点

示例代码

示例代码

类型推断

类型断言

示例代码

示例代码

默认参数

可选参数

示例代码

任何类型 (any)

示例代码

接口定义

类型别名

示例代码

泛型函数

泛型类

示例代码

类装饰器

方法装饰器

示例代码

示例代码

高阶函数

示例代码

类定义

继承

示例代码

示例代码

重新导出

示例代码

示例代码

示例代码

使用调试器

示例代码

调试技巧

示例代码

代码规范

示例代码

阅读免费教程

任何类型 (`any`)