TypeScript数据类型（一）-蒲公英云

TypeScript数据类型（一）

心已赠人 2023-05-29 03:21 36阅读 0赞

TypeScript是强类型语言，这就意味着声明变量时，必须指定类型。这是与Javascript不同的地方。指定类型，既可以增强代码的健壮性（执行编译、语法检查）又可以提升代码的可读性（类型是最好的注释）。

TypeScript数据类型：

number：数值类型
string：字符串类型
boolean：布尔类型
数组类型（Array）

number[]：数值数组
Array：泛型数组

[string, number]：元组类型（Tuple）
enum Color {Red, Green, Blue}：枚举类型
any：任意类型
void：空类型
undefined
null
never：永不存在值的类型

TypeScript数据类型基本使用

// 1. 基本类型
// 数字，二、八、十六进制都支持
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// 字符串，单双引都行
let fullName: string = "bob";
let sentence: string = `Hello, my name is ${ fullName }.`;
// 数组，第二种方式是使用数组泛型，Array<元素类型>：
let list: number[] = [1, 2, 3];
let lists: Array<number> = [1, 2, 3];
let u: undefined = undefined;
let n: null = null;
// 2. 特殊类型
// 元组 Tuple - 有组织的数组
const messyArray = ["something", 2, true, undefined, null];
const tuple: [number, string, string] = [24, "Tom" , "James"];
// 枚举 enum - 可以为一组数值赋名
// 默认情况从0开始为元素编号，也可手动为1开始
enum Color { Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
let colorName: string = Color[2];
console.log(colorName);  // 输出"Green"因为上面代码里它的值是2
// void - 无返回值
function sayMyName(name: string): string { 
  return name;
}
function consoleMyName(name: string): void { 
  console.log(name);
}
// any - 任意类型
let person: any = "前端劝退师";
person = 25;
person = true;
// Never - 永远得不到
// 3. 断言类型 - 可以用来手动指定一个值的类型，有两种写法，尖括号和 as
let someValue: any = "this is a string";
let strLength1: number = (<string>someValue).length;
let strLength2: number = (someValue as string).length;
function getLength(something: string | number): number { 
  if ((<string>something).length) { 
    return (<string>something).length;
  } else { 
    return something.toString().length;
  }
}
// ? - 安全导航操作符: 为了解决导航时变量值为null时，页面运行时出错的问题。
// ! - 非空断言操作符: 能确定变量值一定不为空时使用，不会防止出现 null 或 undefined。
// 4. 泛型 - Generics
// 泛型声明
function gen_func1<T>(arg: T): T { 
  return arg;
}
// 或者
let gen_func2: <T>(arg: T) => T = function (arg) { 
  return arg;
};
// 泛型调用
gen_func1<string>("Hello world");
gen_func2("Hello world");
// 第二种调用方式可省略类型参数，因为编译器会根据传入参数来自动识别对应的类型。
// 泛型接口
interface Generics_interface<T> { 
  (arg: T): T;
}
function func_demo<T>(arg: T): T { 
  return arg;
}
let func1: Generics_interface<number> = func_demo;
func1(123);     // 正确类型的实际参数
// func1("123"); // 错误类型的实际参数
// 5. 自定义类型
interface User1 { 
  name: string;
  age: number;
}
type User2 = { 
  name: string,
  age: number,
};
interface SetUser1 { 
  (name: string, age: number): void;
}
type SetUser2 = (name: string, age: number) => void;
// 相同点: 接口和自定义类型可以相互继承 - 参考链接 https://cloud.tencent.com/developer/article/1475206
// 不同点:
// 1. type 可以声明基本类型别名，联合类型，元组等类型
// 2. type 语句中还可以使用 typeof获取实例的 类型进行赋值
// 3. interface 能够声明合并
// 4. interface 有可选属性和只读属性 ? - 可选属性标识符 readonly - 只读属性标识符
interface Person { 
  name: string;
  age?: number;
  gender?: number;
  readonly note: string;
}