首页手记 TypeScript 类型学习入门教程

TypeScript 类型学习入门教程

标签：

Typescript

概述

本文介绍了如何进行TypeScript类型学习，涵盖了从安装配置TypeScript环境到基本类型、接口、函数类型、类的定义与使用等内容。文章详细讲解了不同类型的应用场景和示例代码，帮助开发者更好地理解和应用TypeScript类型学习。

TypeScript 基础介绍

TypeScript 的定义与特点

TypeScript 是一种开源编程语言，它是JavaScript的超集，并添加了静态类型检查功能。它是由Microsoft开发的，旨在提高代码质量和开发效率。TypeScript的主要特点包括：

静态类型检查：TypeScript强制在编译时检查变量、参数和返回值的类型，这有助于在开发早期发现潜在的类型错误。
面向对象编程：支持类、接口、继承等面向对象编程特性。
泛型支持：允许类型参数化，使得代码更加通用和复用。
模块支持：支持模块化开发，便于组织和管理代码。
可编译为JavaScript：TypeScript代码可以编译为纯JavaScript，可以在任何支持JavaScript的环境中运行。

安装和配置TypeScript环境

为了开始使用TypeScript，你需要在你的计算机上安装TypeScript。以下是安装和配置TypeScript的步骤：

安装Node.js和npm（Node.js的包管理工具），你可以从官网下载最新的版本。
使用npm安装TypeScript：

npm install -g typescript

创建一个新的项目文件夹，并在文件夹中初始化TypeScript项目：

mkdir my-ts-project
cd my-ts-project
npm init -y
npm install typescript --save-dev

配置TypeScript编译器。在项目根目录下创建一个tsconfig.json文件，如下所示：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

创建一个TypeScript源文件夹src，并在其中创建一个示例文件index.ts：

mkdir src
touch src/index.ts

在src/index.ts文件中编写一些简单的TypeScript代码：

// src/index.ts
let message: string = "Hello, TypeScript!";
console.log(message);

编译TypeScript代码并运行生成的JavaScript代码：

npx tsc
node dist/index.js

上述命令将编译src/index.ts文件，并在dist文件夹中生成对应的JavaScript文件。运行生成的JavaScript文件可以确保代码能够正确运行。

基本类型讲解

常见数据类型

TypeScript支持多种常见数据类型，包括number、string、boolean等。以下是一些常用的内置类型及其示例：

数字类型（number）

let age: number = 25;
let price: number = 9.99;

字符串类型（string）

let greeting: string = "Hello, world!";
let name: string = "Alice";

布尔类型（boolean）

let isActive: boolean = true;
let isCompleted: boolean = false;

其他类型

除了上述基本类型外，TypeScript还支持undefined、null等类型：

let undefinedValue: undefined = undefined;
let nullValue: null = null;

特殊类型

any类型

any类型表示它可以是任何类型的值，常用于那些需要动态类型处理的场景。例如：

let dynamicValue: any = 123;
dynamicValue = "hello";
dynamicValue = true;

void类型

void类型表示函数或表达式的值为undefined或null。通常用于没有返回值的函数：

function sayHello(): void {
  console.log("Hello!");
}

never类型

never类型表示一个函数或表达式永不会返回，通常用于表示永远不会完成的函数或抛出异常的函数：

function throwError(message: string): never {
  throw new Error(message);
}

示例代码

下面是一个使用多种类型的示例代码：

let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;
let undefinedValue: undefined = undefined;
let nullValue: null = null;
let dynamicValue: any = 123;

dynamicValue = "hello";
dynamicValue = true;

function sayHello(): void {
  console.log("Hello!");
}

function throwError(message: string): never {
  throw new Error(message);
}

接口与类型定义

接口的定义与使用

接口是TypeScript中一种定义结构的机制，用于描述对象的结构。接口可以定义属性、方法、访问修饰符等。以下是如何定义和使用接口的示例：

定义接口

interface PersonInterface {
  name: string;
  age: number;
  sayHello(): void;
}

实现接口

class Person implements PersonInterface {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

使用接口

let person: PersonInterface = new Person("Alice", 25);
person.sayHello();

示例代码

下面是一个完整的示例代码，展示了如何定义和使用接口：

interface PersonInterface {
  name: string;
  age: number;
  sayHello(): void;
}

class Person implements PersonInterface {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

let person: PersonInterface = new Person("Alice", 25);
person.sayHello();

类型别名与接口的区别

类型别名

类型别名（Type Alias）用于创建一个新名称来表示一个已存在的类型。类型别名可以用于复用和简化类型定义。例如：

type Size = "small" | "medium" | "large";
let preferredSize: Size = "medium";

接口

接口（Interface）用于定义对象的结构，可以包含属性、方法等。接口通常用于描述对象的结构，而不直接实例化对象。例如：

interface SizeInterface {
  size: "small" | "medium" | "large";
}

let preferredSize: SizeInterface = { size: "medium" };

区别

类型别名：更像是一种类型别名或别名，主要用于简化类型定义。
接口：用于描述对象的结构，支持继承、属性和方法的定义。

示例代码

下面是一个示例代码，展示了类型别名和接口的区别：

// 类型别名
type Size = "small" | "medium" | "large";
let preferredSize: Size = "medium";

// 接口
interface SizeInterface {
  size: "small" | "medium" | "large";
}

let preferredSizeInterface: SizeInterface = { size: "medium" };

函数类型详解

函数的类型定义

函数类型定义用于描述函数的参数类型和返回值类型。以下是函数类型定义的基本语法：

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

示例代码

下面是一个示例代码，展示了如何定义一个带有参数和返回值类型的函数：

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

let result = add(2, 3);
console.log(result); // 输出 5

参数类型与返回值类型

参数类型

参数类型定义用于描述函数参数的数据类型。例如，可以定义一个接受两个数字参数的函数：

function subtract(a: number, b: number): number {
  return a - b;
}

返回值类型

返回值类型定义用于描述函数返回值的数据类型。例如，可以定义一个返回字符串类型的函数：

function getGreeting(name: string): string {
  return `Hello, ${name}!`;
}

示例代码

下面是一个示例代码，展示了参数类型和返回值类型的定义：

function subtract(a: number, b: number): number {
  return a - b;
}

function getGreeting(name: string): string {
  return `Hello, ${name}!`;
}

let result = subtract(5, 3);
console.log(result); // 输出 2

let greeting = getGreeting("Alice");
console.log(greeting); // 输出 "Hello, Alice!"

类与类型

类的定义与基本用法

类是TypeScript中定义对象的结构和行为的主要机制。类支持属性、方法、构造函数等。以下是一个简单的类定义示例：

class Person {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

示例代码

下面是一个示例代码，展示了如何定义和使用一个简单的类：

class Person {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

let person = new Person("Alice", 25);
person.sayHello(); // 输出 "Hello, my name is Alice and I am 25 years old."

类的继承与实现接口

类的继承

类可以继承其他类，从而重用和扩展父类的属性和方法。以下是一个类继承的示例：

class Employee extends Person {
  role: string;

  constructor(name: string, age: number, role: string) {
    super(name, age);
    this.role = role;
  }
}

实现接口

类可以实现接口，确保类实现接口中定义的所有属性和方法。以下是一个类实现接口的示例：

interface PersonInterface {
  name: string;
  age: number;
  sayHello(): void;
}

class Person implements PersonInterface {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Employee extends Person implements PersonInterface {
  role: string;

  constructor(name: string, age: number, role: string) {
    super(name, age);
    this.role = role;
  }

  sayHello(): void {
    console.log(`Hello, I am an employee named ${this.name}, ${this.age} years old, and my role is ${this.role}.`);
  }
}

示例代码

下面是一个示例代码，展示了类的继承和实现接口：

interface PersonInterface {
  name: string;
  age: number;
  sayHello(): void;
}

class Person implements PersonInterface {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Employee extends Person implements PersonInterface {
  role: string;

  constructor(name: string, age: number, role: string) {
    super(name, age);
    this.role = role;
  }

  sayHello(): void {
    console.log(`Hello, I am an employee named ${this.name}, ${this.age} years old, and my role is ${this.role}.`);
  }
}

let employee = new Employee("Bob", 30, "Manager");
employee.sayHello(); // 输出 "Hello, I am an employee named Bob, 30 years old, and my role is Manager."

实战演练与案例分享

常见问题解决与实践技巧

在实际开发中，经常会遇到一些常见的类型问题。以下是一些常见的问题及其解决方案：

问题 1：类型不匹配

type Size = "small" | "medium" | "large";
let preferredSize: Size = "medium";
preferredSize = "huge"; // 类型错误

解决方案：确保变量符合定义的类型。

type Size = "small" | "medium" | "large";
let preferredSize: Size = "medium";
preferredSize = "large"; // 正确

问题 2：函数参数类型不匹配

function add(a: number, b: number): number {
  return a + b;
}
let result = add("2", "3"); // 类型错误

解决方案：确保传递给函数的参数符合定义的类型。

function add(a: number, b: number): number {
  return a + b;
}
let result = add(2, 3); // 正确

示例代码

下面是一个包含常见问题解决的示例代码：

type Size = "small" | "medium" | "large";
let preferredSize: Size = "medium";
preferredSize = "large"; // 正确

function add(a: number, b: number): number {
  return a + b;
}
let result = add(2, 3); // 正确
console.log(result); // 输出 5

小项目示例与类型应用

项目示例：简单的计算器

以下是一个简单的计算器应用，使用TypeScript来定义和管理类型：

interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  multiply(a: number, b: number): number;
  divide(a: number, b: number): number;
}

class SimpleCalculator implements Calculator {
  add(a: number, b: number): number {
    return a + b;
  }

  subtract(a: number, b: number): number {
    return a - b;
  }

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

  divide(a: number, b: number): number {
    return a / b;
  }
}

let calculator = new SimpleCalculator();
console.log(calculator.add(2, 3)); // 输出 5
console.log(calculator.subtract(5, 2)); // 输出 3
console.log(calculator.multiply(4, 5)); // 输出 20
console.log(calculator.divide(10, 2)); // 输出 5

示例代码

下面是一个完整的计算器示例代码，展示了如何定义和使用接口以及实现类型：

interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  multiply(a: number, b: number): number;
  divide(a: number, b: number): number;
}

class SimpleCalculator implements Calculator {
  add(a: number, b: number): number {
    return a + b;
  }

  subtract(a: number, b: number): number {
    return a - b;
  }

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

  divide(a: number, b: number): number {
    return a / b;
  }
}

let calculator = new SimpleCalculator();
console.log(calculator.add(2, 3)); // 输出 5
console.log(calculator.subtract(5, 2)); // 输出 3
console.log(calculator.multiply(4, 5)); // 输出 20
console.log(calculator.divide(10, 2)); // 输出 5

实践技巧

使用类型注解：为变量、参数和返回值添加类型注解，有助于提高代码的可读性和可维护性。
利用接口和类型别名：通过接口和类型别名来定义复杂的类型结构，使得代码更具可读性和可复用性。
遵循最佳实践：遵循TypeScript的最佳实践，如使用严格的类型检查（strict），避免使用any类型等。

示例代码

下面是一个更复杂的示例代码，展示了如何在实际项目中应用类型和接口：

interface User {
  id: number;
  name: string;
  email: string;
}

class UserManager {
  users: User[];

  constructor() {
    this.users = [];
  }

  addUser(user: User): void {
    this.users.push(user);
  }

  getUserById(id: number): User | null {
    return this.users.find(u => u.id === id) || null;
  }

  updateUser(user: User): void {
    let index = this.users.findIndex(u => u.id === user.id);
    if (index !== -1) {
      this.users[index] = user;
    }
  }

  deleteUserById(id: number): void {
    this.users = this.users.filter(u => u.id !== id);
  }
}

let userManager = new UserManager();
userManager.addUser({ id: 1, name: "Alice", email: "alice@example.com" });
userManager.addUser({ id: 2, name: "Bob", email: "bob@example.com" });

console.log(userManager.getUserById(1)); // 输出 { id: 1, name: "Alice", email: "alice@example.com" }
userManager.updateUser({ id: 1, name: "Alicia", email: "alicia@example.com" });
console.log(userManager.getUserById(1)); // 输出 { id: 1, name: "Alicia", email: "alicia@example.com" }
userManager.deleteUserById(2);
console.log(userManager.users); // 输出 [{ id: 1, name: "Alicia", email: "alicia@example.com" }]

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

qq_笑_17

手记
篇

粉丝

11

获赞与收藏

49

关注作者，订阅最新文章

相关文章推荐

typescript 入门教程一

TypeScript教程

TypeScript基础入门 - 接口 - 类类型

系统学习 TypeScript（五）——联合类型

TypeScript基础入门 - 类 - 继承

阅读免费教程

TypeScript 入门教程

38个小节 92549 663

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

TypeScript 类型学习入门教程

数字类型（number）

字符串类型（string）

布尔类型（boolean）

其他类型

any类型

void类型

never类型

示例代码

定义接口

实现接口

使用接口

示例代码

类型别名

接口

区别

示例代码

示例代码

参数类型

返回值类型

示例代码

示例代码

类的继承

实现接口

示例代码

问题 1：类型不匹配

问题 2：函数参数类型不匹配

示例代码

项目示例：简单的计算器

示例代码

实践技巧

示例代码

相关文章推荐

阅读免费教程