TypeScript实用笔记(一)：初始化、类型定义与函数使用

一、ts初始化

1. 初始化.json文件一

• 命令行输入: tsc --init生成tsconfig.json。

  • [初始化node的.json文件是: npm init -y]

2. 启动方式

2.1 直接运行.ts文件

1. 下载依赖: npm i -g ts-node。//-g 是全局安装
2. 运行: ts-node file.ts

2.2 转换运行

1. 把.ts文件转换成.js文件: tsc test.ts

2. 转换后会生成.js文件test.js。然后直接node test.js按照运行.js文件的方式运行就可以

二、类型

1. 参数类型

1.1 常规参数

参数后可加type,因为ts是强类型。 如果不加type，则会由系统自动判断，但是不建议。

//string
let str: string = "str";//int
let num: number = 111;//null
let nu: null = null;//undefind
let und: undefined = undefined;//any: you can use whenever you don’t want a particular value to cause typechecking errors.
let an: any = 100; //boolean
let boo:boolean = true;//unknown: 在不知道这个参数是什么类型的时候可以先写unknown，后期再回头看
let unk: unknown = 123;

1.2 symbol

//symbol: 唯一的标识符，可用作Object的key。
let sy: symbol = Symbol("key1")
let obj = {[sy]: "value","key1": "value1"
}
console.log(obj[sy]); //value
console.log(obj.key1); //value1, 取的是手写的"key1"
console.log(Object.keys(obj)); //["key1"] 取的是手写的,.keys()获取不到Symbol()
console.log(Object.getOwnPropertySymbols(obj)); //[ Symbol(key1) ]

1.3 数组[]

//数组,两种写法：type[] or Array<type>，| is or
let arr: number[] = [1,2,3];
let arr1: Array<number> = [1,2,3];
let arr2: (string | number)[] = ["1", 1]; //可同时包括string或者number类型
let arr3: string | number[] = "str"; //可以是单string或者number数组

1.4 元组[]

用于表示固定大小和已知类型的数组。元组与普通数组的主要区别在于每个元素的类型和数量是固定的。

//元组通过指定元素类型的顺序来定义，允许每个元素具有不同的类型
let point: [number, number] = [10, 20]; // 有两个数值类型的元素
let mixed: [string, number, boolean] = ["Alice", 30, true]; // 不同类型的元素

1.5 用字面量定义数据类型

可用于任意类型定义：string, number, boolean, function…

//number
type StatusCode = 200 | 404 | 500;let code: StatusCode;code = 200; // 合法
// code = 404; // 合法
// code = 300; // 不合法，TypeScript 报错//function
function setDirection(direction: "up" | "down" | "left" | "right") {// 函数实现
}setDirection("up"); // 合法
// setDirection("forward"); // 不合法，TypeScript 报错

2. Object

声明参数类型前加’?'，参数转为可选参数。age?: number

//写法一
let obj: { name: string, age: number, fun(): void } = {"name": "name1","age": 30,fun() {return 2;}
}/*** 类型声明：在定义时，fun(): void 表示这个函数不应该返回任何值。理想情况下，函数应该只执行一些操作，而不是返回一个值。* 由于我在实现中返回了 2，这会导致类型检查不一致。虽然 TypeScript 允许你在运行时返回值，但在类型系统中，这与 void 类型不符。但可以使用*/
console.log(obj.fun()); //2//写法二 -> 类型中间可用';'隔开
let obj: { name: string; age: number; fun(): void } = {...}//写法三 -> 类型可以横排写，也可以竖排写，竖排写的话，类型中间可不加',' or ';'
let obj: { name: stringage: number fun(): void 
} = {...}

3. 枚举类型[Enum]

1. 枚举（Enum）是一种特殊的类型，用于定义一组命名的常量
2. 枚举可以分为两种类型：数字枚举（Numeric Enum）和 字符串枚举（String Enum）。

3.1 数字枚举

• 数字枚举是默认的枚举类型。它的成员会被赋予数字值，从 0 开始，后续成员的值会自动递增。

enum Direction {Up,      // 0Down,    // 1Left,    // 2Right    // 3
}console.log(Direction.Up); // 输出: 0

• 也可以为枚举成员指定初始值，后续成员会自动递增。

enum Direction {Up = 2,      // 2Down,    // 3Left = 300,    // 300Right    // 301
}console.log(Direction.Right); // 输出: 301

3.2 字符串枚举

• 字符串枚举要求每个成员都必须具有字符串值。这种枚举类型不支持自动递增，必须为每个成员显式地指定字符串值。

enum Response {Success = "SUCCESS",NotFound = "NOT_FOUND",Error = "ERROR",
}let response: Response = Response.Success;
console.log(response); // 输出: "SUCCESS"

三、 类型别名

如果同一种类型重复被使用，可以去进行统一添加别名

1. 数组别名使用

let arr: (string | number)[] = [1, 'two', 3, 'four'];
let arr2: (string | number)[] = [1, 'two', 3, 'four'];type StrOrNumArr = (string | number)[]; //给常用的组合类型统一用一个别名归总
let arr3: StrOrNumArr = [1, 'two', 3, 'four'];

2. 对象别名使用

let obj: { name: string; age: number; fun(): void } = {...}
let obj2: { name: string; age: number; fun(): void } = {...}//声明user类,fun()设置为可选参数
type UserType = { name: string, age: number, fun?(): void };
//参数可以直接调用，就不需要重复去写了
let obj3: UserType = {"name": "name1","age": 30
}

3. 接口别名使用

interface User {name: string,age: number
}//使用接口别名
let obj: User = {"name": "name1","age": 30
}

4. 对象&接口别名共同点

1. type 和 interface 都可以用来定义对象的类型

5. 对象&接口别名区别

5.1 扩展性

• interface 可以通过 extends 进行扩展。
• type 可以通过交叉类型（&）进行扩展。

// interface 扩展
interface User {name: string;age: number;
}interface Admin extends User {role: string;
}// type 扩展
type UserType = {name: string;age: number;
};type AdminType = UserType & {role: string;
};

5.2 联合类型和交叉类型

• type可以定义联合类型和交叉类型
• interface不可以

// type 联合类型：使用 | 运算符表示，表示一个值可以是多个类型中的任何一个。
type StringOrNumber = string | number;// type 交叉类型：使用 & 运算符表示，表示一个类型同时满足多个类型的结构。& 写法等同于直接定义{ name: string, age: number }
type NameAndAge = { name: string } & { age: number };

5.3 声明合并

• interface 支持声明合并，即可以多次声明同一个接口，++TypeScript 会将它们合并。++
• type 不支持声明合并。

// interface 声明合并
interface User {name: string;
}interface User {age: number;
}const user: User = {name: "Alice",age: 30
};

5.4 复杂类型

• type 可以使用映射类型、条件类型等高级类型特性。
• interface 不支持这些高级类型特性。

6. 对象&接口别名的选择

• 如果需要声明合并、扩展接口或定义类的形状，使用 interface。
• 如果需要定义联合类型、交叉类型或使用高级类型特性，使用 type。

四、Function

1. 用于定义可执行的代码块，可以接受参数并返回值。
2. 可以使用 function 关键字声明一个函数，或者使用箭头函数语法。

1. 常规写法

//fun(数字类型参数1，数字类型参数2): 返回一个数字类型的结果。在引用的时候两个参数必须都传
function fun(start: number, end: number): number{return start + end
}//接收参数后加?，则参数则为可选参数，写法也适用于object参数
function fun1(start: number, end?: number): number{return start + end
}fun(3, 5) //如果没有返回值则void
function fun2(start: number, end: number): void{console.log(start + end)
}

2. 箭头函数

除了写法不一样，判断规则同上

let fun = (start: number, end: number): number => {return start + end
}.

五、Interface

1. 用于定义对象的结构和类型约束，可以描述对象的属性和方法，但不包含实现。
2. 接口可以用于类型检查，确保对象符合预定义的结构。
3. 不能被直接调用；它们只是用来描述对象的结构，通常用于类型注解和接口实现。

1. 继承

interface User {name: string;age: number;
}interface Admin extends User {role: string;
}let obj: Admin = {"name": "name1","age": 30,"role": "Manager"
}