怎么设置微信公众号_武汉网络营销公司哪家好_百度引擎搜索网址_做网站推广公司

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

---

🚀前言

🚀一、TypeScript 类型系统详解

🔎1.基础类型定义

语法格式：变量名: 类型 = 值

类型	示例	说明
布尔类型	let flag: boolean = false;	仅接受 true/false
数值类型	let num: number = 15;	支持整数、浮点数、二进制等
字符串类型	let str: string = "abc";	支持单引号、双引号、模板字符串
模板字符串	let msg = `hello, ${str}, ${num}`;	使用反引号拼接变量
null/undefined	let u: undefined = undefined; let n: null = null;	需显式声明类型

let flag:boolean = false; //布尔类型
let num:number = 15; //数值类型
let str:string = 'abc'; //字符串类型
let str2:string=`hello,${str}`;
let msg:string = `hello,${str},${num}`;
let u: undefined = undefined;
let n: null = null;

🔎2.任意值（Any）

特点：允许赋值为任意类型，关闭类型检查。

let a1: string = 'seven';
a1 = 7;//error
但如果是 any 类型，则允许被赋值为任意类型。
let a2: any = 'seven';
a2 = 7;
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
let a3;
a3 = 'seven';
a3 = 7;
相当于
let a3:any;
a3 = 'seven';
a3 = 7;

注意事项：滥用 any 会丧失类型安全，应谨慎使用。

🔎3.联合类型

定义：变量可以是多种类型中的一种，用 | 分隔。

let a4: string | number;
a4 = "seven"; // 合法
a4 = 7;       // 合法
a4 = true;    // 报错：不能赋值给联合类型

联合类型的限制
只能访问共有属性或方法：

function getLength(str: string | number): number {return str.length; // 报错：number 没有 length 属性
}

解决方法：类型断言或类型保护。

// 类型断言（明确告知类型）
function getLength(str: string | number[]): number {return (str as number[]).length; // 断言为数组
}// 类型保护（运行时检查）
function getLength(str: string | number[]): number {if (Array.isArray(str)) {return str.length; // 合法}return str.length;   // 报错：number 没有 length
}

🔎4.数组类型定义

🦋4.1 类型 + 方括号

let arr: number[] = [1, 2, 3]; // 仅允许数值
let arrError: number[] = [1, "2", 3]; // 报错：包含字符串

🦋4.2 泛型数组（Array<T>）

let arrGeneric: Array<number> = [1, 2, 3];
let arrMultiType: Array<number | string> = ["1", 2, 3];

泛型优势：支持更灵活的类型组合，适用于复杂数据结构。

🦋4.3 任意类型数组

let arrAny: any[] = [1, "1", true, { id: 1 }]; // 允许任意类型

🔎5.对象的类型——接口（Interfaces）

🦋5.1 基本接口

interface Person {name: string;age: number;
}let tom: Person = { name: "Tom", age: 18 
}; // 合法let tomError: Person = { name: "Tom" 
}; // 报错：缺少 age 属性

🦋5.2 可选属性

interface Person2 {name: string;age?: number; // 可选属性
}let tom4: Person2 = { name: "Tom" 
}; // 合法

🦋5.3 任意属性

interface Person3 {name: string;age?: number;[propName: string]: any; // 允许任意额外属性
}let tom6: Person3 = { name: "Tom", sex: "男" 
}; // 合法

关键规则：
一旦定义任意属性，其他属性的类型必须是其子类型。
例如，若 [propName: string]: string，则 age: number 会报错。

🔎6.函数的类型定义

🦋6.1 基础函数类型

function sum(x: number, y: number): number {return x + y;
}

🦋6.2 参数默认值

function sum3(x: number = 5, y: number): number {return x + y;
}sum3(undefined, 2); // x 使用默认值 5

注意：默认参数应放在参数列表末尾，否则需显式传 undefined。

🦋6.3 可选参数

function sum4(x: number, y?: number): number[] {return [x, y];
}sum4(1); // 返回 [1, undefined]

规则：可选参数必须位于必选参数之后。

🦋6.4 类型别名

function myHello(person: n) {return 'Hello, ' + person;
};
type n = number;
let name:n = 18;
console.log(myHello(name));

🔎7.总结

特性	核心要点
类型注解	明确变量类型，增强代码可读性和安全性。
联合类型	通过 `
泛型数组	使用 Array<T> 提高灵活性，适用于复杂数据。
接口	约束对象形状，支持可选属性和任意属性，需注意类型兼容性。
函数类型	参数类型、返回值类型、可选参数和默认值的组合使用。

避坑指南：

1. 联合类型方法调用：确保访问的属性是所有类型的共有属性。
2. 接口任意属性：定义后，其他属性必须兼容任意属性的类型。
3. 函数默认参数：默认参数应放在参数列表末尾，避免调用时歧义。