TypeScript

TSC

npm i -g typescript

可以把TS编译成JS的工具，搭建一个可以运行TS的环境

tsc 你的代码.ts

node 你的代码.js

ts-node

npm i -g ts-node

直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令

ts-node hello.ts

console.log报错问题

tsc --init 生成配置文件 tsconfig.json

1. 联合类型（Union Types）

联合类型允许一个变量的类型可以是多种类型之一。

示例：

typescriptCopy code
let age: number | string;
age = 25; // 合法
age = 'twenty-five'; // 合法
age = true; // 错误，类型不匹配

2. 自定义类型（类型别名）（Type Aliases）

使用类型别名可以为复杂的类型定义一个简洁的名称。

示例：

typescriptCopy code
type Person = {
  name: string;
  age: number;
};

let user: Person = {
  name: 'Alice',
  age: 30
};

接口（Interfaces）

接口用于描述对象的形状，定义了对象应该具有的属性和方法。

示例：

typescriptCopy code
interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  return `Hello, ${person.name}!`;
}

let user = { name: 'Alice', age: 30 };
console.log(greet(user)); // 输出: Hello, Alice!

元组（Tuples）

元组允许表示一个固定长度的数组，每个位置的元素可以是不同的类型。

示例：

typescriptCopy code
let user: [string, number];
user = ['Alice', 30]; // 合法
user = [30, 'Alice']; // 错误，类型不匹配

字面量类型（Literal Types）

字面量类型允许定义一个变量只能取特定的几个值。

示例：

typescriptCopy code
type Color = 'red' | 'green' | 'blue';
let primaryColor: Color;
primaryColor = 'red'; // 合法
primaryColor = 'yellow'; // 错误，值不在指定范围内

枚举（Enums）

枚举允许为一组相关的常量赋予友好的名字。

示例：

typescriptCopy code
enum Direction {
  Up,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;
console.log(move); // 输出: 0

void

void 表示没有任何类型。常用于函数的返回值，表示函数没有返回值。

示例：

typescriptCopy code
function greet(): void {
  console.log('Hello, world!');
}

let result: void = greet(); // 合法

any

any 类型表示任意类型。当你不确定变量的类型时，可以使用 any 类型。

示例：

typescriptCopy code
let data: any;
data = 'Hello'; // 合法
data = 25; // 合法
data = { name: 'Alice' }; // 合法

泛型

泛型函数

确保传入参数和返回值为一个类型

function fn<T>(value: T): T {
  return value;
}

const num = fn<number>(10);
console.log(num);

// useState它接收一个任意类似的数据，返回一个数组。数组的第一个元素的类型与入参一致； 数组的第二个元素是一个函数，函数的入参类型和返回值类型与useState的入参一致

function useState<T>(p:T): [T,(p:T)=>T] {
  const t = (p: T):T => {
    return p
  }
  return [p, t]
}

//可以接收任意类型的数组。

//将类型修改为 Type[](Type 类型的数组)，因为只要是数组就一定存在 length 属性，因此就可以访问了
function fn<Type>(value: Type[]): Type[] {
  console.log(value.length)
  return value
}

// 添加约束
// 比如 要求传入T类型必须要有length属性
// 创建一个接口
interface ILength { length: number }

// T extends ILength 添加泛型约束
function fn<T extends ILength>(value: T): T {
  console.log(value.length)
  return value
}

fn('abc') // Ok
fn([1,2,3]) // Ok 

泛型接口

当我们在使用数组时，TS 会根据数组的不同类型，来自动将类型变量设置为相应的类型

泛型工具类型

Partial

// Partial用来基于某个Type来创建一个新类型，新类型中所有的属性是可选的。
type Props = {
  id: string;
  children: number[];
};

const tree: Props = {
  id: "123",
  children: [1, 2, 3],
};

type PartialProps = Partial<Props>;

const treePart: PartialProps = {
  id: "312",
};

console.log(tree);
console.log(treePart);

Readonly

Readonly 用来构造一个类型，将 Type 的所有属性都设置为 readonly(只读)。
type Props =  {
  id: string
  children: number[]
}

type ReadonlyProps = Readonly<Props>

let props: ReadonlyProps = { id: '1', children: [] }
// 错误演示
props.id = '2'

Pick

type Props = {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>
解释:
Pick 工具类型有两个类型变量:1 表示选择谁的属性 2 表示选择哪几个属性。 2. 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。