TypeScript 是 JavaScript 的超集，它增加了静态类型检查的功能。类型注解是 TypeScript 的核心特性之一，通过类型注解，开发者可以在变量、函数、对象等地方明确指定数据类型，从而提高代码的可读性和可维护性。
TypeScript 常见的数据类型
1. 基本类型
1.1 字符串类型（
string）
使用场景：用于表示文本数据。
let uname:string = '落日弥漫的橘_'1.2 数字类型（
number）
使用场景：用于处理所有数字类型，包括整数和浮点数。
let decimal: number = 10; // 十进制数
let binary: number = 0b1010; // 二进制数
let octal: number = 0o744; // 八进制数
let hex: number = 0xf00d; // 十六进制数1.3 布尔类型（
boolean)
使用场景：用于表示真或假。
let isEdit: boolean= true1.4 空类型（
void）
使用场景：用于表示没有返回值的函数。
function logMessage(message: string): void {
console.log(message); // 查看日志信息
}1.5 未定义类型（
undefined）
使用场景：表示一个变量未被赋值。
let a: undefined = undefined1.6 空值类型（
null）
使用场景：表示一个变量的值为空。
let b: null = null1.7 任意类型（
any）
使用场景：允许在编写代码时临时跳过类型检查，可以是任何类型，通常用于不确定类型的变量。
// 可以是任何类型
let a: any = 'hello' // 字符串
a = 123 // 数字1.8 永远类型（
never）
使用场景：表示一个函数永远不会返回，通常用于抛出异常的函数。
function throwError (message: string): never {
throw new Error(message) // // 抛出错误
}2.数组和元组
2.1 数组类型
使用场景：用于存储同一类型的多个值。
let numList: number[] = [1, 2, 3] // 数字数组
let strList: Array<string> = ["a", "b", "c"]; // 字符串数组2.2 元组类型
使用场景：用于存储不同类型的固定长度数组。
let list: [number, string] = [1, 'a'] // 包含字符串和数字的元组3.对象类型
3.1 对象字面量
使用场景：用于定义具有特定属性的对象。
let personInfo: {name: string, age: number} = {
name: '落日弥漫的橘_'.
age: 18
}3.2 接口类型（
interface）
使用场景：用于定义对象的结构，可以被多个对象共享，便于复用。
// 定义接口
interface Person {
name: string,
age?: number // 表示该属性可以是可选的
}
// 使用接口定义对象
let user: Person = {
name: '落日弥漫的橘_'.
age: 18
}
4.函数类型
4.1 函数参数和返回值类型
使用场景：用于定义函数参数和返回值的类型。
// 函数接收一个字符串参数并返回一个字符串
function sumFn(a: string, b: string): string {
return `${a}-${b}`
} 4.2 函数类型注解
使用场景：用于指定函数变量的类型，便于复用。
let sumFunciton: (a: string, b: string) => string = sumFn4.3 可选参数: 可选参数通过
?表示，且必须放在参数列表末尾。此时参数lastName可以是 string类型或 undefined类型
function buildName(firstName: string, lastName?: string): string {
return lastName ? `${firstName} ${lastName}` : firstName
}
4.4 默认参数: TypeScript允许为参数设置默认值。
function buildFullName(firstName: string, lastName: string = "John"): string {
return `${firstName} ${lastName}`
}
4.5 剩余参数（Rest Parameters）: 剩余参数可以将不确定数量的参数收集为一个数组。
function addNumbers(a: number, ...numbers: number[]): number {
return numbers.reduce((a, b) => a + b, 0);
}
console.log(addNumbers(1, 2, 3, 4)); // 输出 10
5.联合类型和交叉类型
5.1 联合类型（
|）
使用场景：表示一个变量可以是多种类型之一。
// id 可以是数字或字符串
let id: number | string;
id = 1
id = '1'5.2 交叉类型（
&）
interface Person {
name: string;
}
interface Employee {
employeeId: number;
}
type Worker = Person & Employee
6.类型别名（type）
使用场景：用于定义一个复杂类型的别名，以便重用。
type StringOrNumber = string | number
let a: StringOrNumber = '字符串'7.枚举（enum）
使用场景：用于定义一组相关的常量。
// 默认情况下，枚举的值从 0 开始递增，也可以手动指定值。
enum Direction {
Up = 1,
Down,
Left,
Right,
}
let position: Direction = Direction.Up
console.log(Direction.Up === 1); // true
// 反向映射是枚举的一个特性，可以通过枚举的值获取对应的名称：
console.log(Direction[1]); // Up8.类型断言（as）
使用场景：用于告诉 TypeScript 某个变量的具体类型。
let b: any = 'this is a string'
let a: number = (b as string).length9.类（class）
TypeScript的类提供了更多的面向对象编程特性，包括继承、访问修饰符和抽象类等。
9.1 基本类
class Animal {
name: string
constructor(name: string) {
this.name = name
}
running(distance: number = 0): void {
console.log(`${this.name} run ${distance} meters.`)
}
}
let dog = new Animal("Dog")
dog .running(5)
9.2 继承: 类可以通过
extends关键字继承另一个类。
class Dog extends Animal {
dance(): void {
console.log("~~~")
}
}
let dog = new Dog("小六")
dog.dance()
dog.running(10) // 输出 小六 run 10 meters.
9.4 访问修饰符: TypeScript提供
public、private、protected、readonly来控制成员的访问权限。
public: 公共，可以自由的访问类中定义的成员。
class Person {
public name: string
constructor(name: string) {
this.name = name
}
}
class Employee extends Person {
department: string
public getDetails(): string {
return `${this.name} works in ${this.department}.`
}
}
let employee = new Employee("John", "Engineering")
console.log(employee.name())
console.log(employee.getDetails())
private: 只能在该类的内部进行访问，实例对象并不能够访问，继承该类的子类也不能访问。
class Father{
private name: string
constructor(name: string) {
this.name = name
}
}
let father = new Father("John")
console.log(father.name) // 属性"name"为私有属性，只能在类"Person"中访问
class Son extends Father{
say() {
console.log(`my name is ${this.name}`) // 属性"name"为私有属性，只能在类"Person"中访问
}
}
protected：实例对象不能访问受保护的属性，但protected的成员在子类中可以访问。
class Father{
protected name: string
constructor(name: string) {
this.name = name
}
}
let father = new Father("John")
console.log(father.name) // 属性"name"为私有属性，只能在类"Person"中访问
class Son extends Father{
say() {
console.log(`my name is ${this.name}`) // protected的成员在子类中可以访问。
}
}
readonly：只读属性必须在生命时或构造函数里初始化值。
class Father{
protected name: string
constructor(name: string) {
this.name = name
}
}
let father = new Father("John")
console.log(father.name)
father.name = 'Bob' //无法分配到"name"，因为它是只读属性
10.泛型（Generics）
泛型是 TypeScript 的一项强大特性，它使得函数、接口、类等在使用时可以适应多种类型。使用场景：在运行时传入参数才能确定类型
使用方式：通过<>的形式进行表述
10.1 函数声明
function identity<T>(arg: T): T {
return arg
}
let outputRes1 = identity<string>("Hello")
let outputRes2 = identity<number>(18)
定义泛型的时候，可以一次定义多个类型参数，比如可以同时定义泛型 T 和 U
function swap<T, U>(tuple: [T, U]): [T, U] {
return [tuple[0], tuple[1]]
}
swap([8, 'eight']) // [8, 'eight']10.2 接口声明
interface Person<T> {
(arg: T): T
}
// 传入一个number作为参数的时候，可以这样声明函数
const person: Person<number> = arg => arg10.2 类声明
// 声明
class Stack<T> {
private arr: T[] = []
public push(item: T) {
this.arr.push(item)
}
public pop() {
this.arr.pop()
}
}
// 使用
const stack = new Stacn<number>()
// 若只能传递 string 和 number 类型 可以使用 <T extends xx> 的方式来实现约束泛型
type Params = string | number
class Stack<T extends Params> {
private arr: T[] = []
public push(item: T) {
this.arr.push(item)
}
public pop() {
this.arr.pop()
}
}
const stack = new Stack(boolean) // 类型"boolean"不满足约束"Params"11.模块（Modules）
模块是 TypeScript 中组织代码的主要手段。通过 import 和 export，可以将代码分割成多个文件并进行重用。
11.1 导出
export class User {
constructor(public name: string) {}
}
11.2 导入
import { User } from './User'
let user = new User("John")11.3 命名空间：解决重名问题
TypeScript中命名空间使用 namespace 来定义，若需要在外部可以调用SomeNameSpaceName 中的类和接口，则需要在类和接口前添加 export 关键字
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
// 外部使用方式
SomeNameSpaceName.SomeClassName总结
通过使用 TypeScript 的类型注解，可以提高代码的可读性和可维护性，减少运行时错误。类型注解在定义变量、函数、对象、数组等多种场景中都非常有用。
扫一扫
5964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
