TypeScript 入门指南

TypeScript 是什么？

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码都是有效的 TypeScript 代码。TypeScript 的主要特点是它添加了静态类型系统和对 ES6+ 的支持。

TypeScript 与 JavaScript 的区别

• 静态类型：TypeScript 支持静态类型，这有助于在编译时发现错误。
• 编译时错误检查：TypeScript 在编译时进行错误检查，而 JavaScript 通常在运行时检查错误。
• 面向对象：TypeScript 支持类和接口，使得面向对象编程更加方便。
• 工具支持：TypeScript 有丰富的工具支持，如自动补全、重构等。

安装与编译

要安装 TypeScript，你可以使用 npm：

npm install -g typescript

编译 TypeScript 文件：

tsc yourfile.ts

TypeScript 值得学吗？

是的，TypeScript 提供了类型系统和现代 JavaScript 特性，使得代码更加健壮和易于维护。

基础类型

布尔类型 boolean

布尔类型有两个值：true 和 false。

let isDone: boolean = false;

数值类型 number

TypeScript 的所有数字都是浮点类型。

let integer: number = 6;
let float: number = 3.14;

字符串类型 string

字符串可以用双引号或单引号表示。

let name: string = "Bob";
let greeting: string = 'Hello, ' + name;

数组类型 array

数组类型可以使用两种方式定义：

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

枚举类型 enum

枚举类型用于定义一组常量。

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

any类型

any 类型可以赋予任何值。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

元组类型 Tuple

元组类型允许你定义已知元素数量和类型的数组。

let x: [string, number];
x = ["hello", 10]; // okay

void类型

void 类型表示没有任何类型。

function warnUser(): void {
  console.log("This is my warning message");
}

null 和 undefined 类型

null 和 undefined 是 TypeScript 中的两种特殊类型。

let u: undefined = undefined;
let n: null = null;

never 与 unknown类型

never 类型表示那些永不存在的值的类型，例如总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数的返回值类型。

unknown 类型是 any 类型的类型安全对应类型。

let value: unknown;
value = true; // okay
value = 4; // okay
value = "Hello World"; // okay
if (typeof value === "string") {
  console.log(value.toUpperCase()); // okay
}

字面量类型

字面量类型是指直接将值作为类型。

let foo: 123; // 类型是字面量类型 "123"

高级类型

联合类型

联合类型表示一个值可以是几种类型之一。

function printId(id: number | string) {
  console.log("Your ID is:", id);
}

交叉类型

交叉类型是将多个类型合并为一个类型。

type Person = {
  name: string;
  age: number;
};
type Logger = {
  log: (message: string) => void;
};
type ActiveLogger = Person & Logger;

可选类型

可选类型是指在对象中可以省略的属性。

interface Person {
  name: string;
  age?: number;
}

条件类型

条件类型使用三元表达式的形式来决定类型。

type IsNumber<T> = T extends number ? "Yes" : "No";
type A = IsNumber<123>;  // "Yes"
type B = IsNumber<true>;  // "No"

映射类型

映射类型可以用来创建类型，这些类型是其他类型的属性的映射。

type OptionsFlags = {
  [K in "option1" | "option2"]: boolean;
};

函数

函数的类型签名/类型注释/类型约束

函数的类型签名定义了函数的参数类型和返回类型。

function greet(name: string): string {
  return "Hello, " + name;
}

可选参数和默认参数

TypeScript 支持可选参数和默认参数。

function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + " " + lastName;
  } else {
    return firstName;
  }
}

函数重载

函数重载允许同一个函数名表示多个函数。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
  if (typeof x === "number") {
    return Number(x.toString().split("").reverse().join(""));
  } else if (typeof x === "string") {
    return x.split("").reverse().join("");
  }
}

索引签名

索引签名允许你定义一个对象的属性可以是任意类型。

interface StringArray {
  [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];

类型推断&类型断言&非空断言

类型推断

TypeScript 会根据变量的初始化值推断其类型。

let sample = "this is a string";

类型断言

类型断言告诉 TypeScript 一个值的确切类型。

let x = 4;
let y = x as number;

非空断言

非空断言操作符 (!) 表示一个值不是 null 或 undefined。

let value: number | null = null;
let notNull: number = value!; // 如果 value 是 null，则会报错

---