【愚公系列】《鸿蒙原生应用开发从零基础到多实战》002-TypeScript 类型系统详解

🚀前言

🚀一、TypeScript 类型系统详解

🔎1.基础类型定义

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

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.总结

避坑指南：

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