TypeScript使用记录

安装

1. 全局安装 TypeScript

npm i typescript -g

编译

手动编译

1. 使⽤命令编译 .ts ⽂件

tsc demo.ts

⾃动化编译

1. 创建 TypeScript 编译控制⽂件

     tsc --init
   

2. ⼯程中会⽣成⼀个 tsconfig.json 配置⽂件，其中包含着很多编译时的配置。
3. 观察发现，默认编译的 JS 版本是 ES7 ，我们可以⼿动调整为其他版本。
4. 监视⽬录中的 .ts ⽂件变化

tsc --watch 或 tsc -w

3. ⼩优化，当编译出错时不⽣成 .js ⽂件

tsc --noEmitOnError --watch

1. 当然也可以修改 tsconfig.json 中的 noEmitOnError 配置

类型声明

1. 使⽤:来对变量或函数形参，进⾏类型声明：

let a: string //变量a只能存储字符串
let b: number //变量b只能存储数值
let c: boolean //变量c只能存储布尔值

2. 函数声明类型，表示函数返回类型

// 参数x必须是数字，参数y也必须是数字
// 函数返回值也必须是数字
function demo(x:number,y:number):number{
 return x + y
}

类型推断

• TS 会根据我们的代码，进⾏类型推导，例如下⾯代码中的变量 d ，只能存储数字
• 注意，类型推断不是万能的，⾯对复杂类型时推断容易出问题，所以尽量还是明确的编写类型声明！

let d = -99 //TypeScript会推断出变量d的类型是数字
d = false //警告：不能将类型“boolean”分配给类型“number”

TypeScript 中的数据类型

1. any: 任意类型
2. unknown: 未知类型
3. never: 任何值都不是
4. void: 空[函数不返回任何值]
5. tuple: 元组[数组类型]
6. enum: 枚举
7. type: 任意类型
8. interface: 接⼝

断⾔的两种写法

1. as

xxx as string

2. <>

<string>xxx

type 类型

• type可以为任意类型创建别名，让代码更简洁、可读性更强，同时能更⽅便地进⾏类型复⽤和扩展。
• 使用type声明，叫类型声明

1. 基本⽤法

• 类型别名使⽤ type关键字定义，type后跟类型名称，例如下⾯代码中num 是类型别名。

type num = number;
let price: num
price = 100

2. 联合类型

• 联合类型是⼀种⾼级类型，它表示⼀个值可以是⼏种不同类型之⼀。

type Status = number | string
type Gender = '男' | '⼥'
function printStatus(status: Status) {
console.log(status);
}
function logGender(str:Gender){
console.log(str)
}
printStatus(404);
printStatus('200');
printStatus('501');
logGender('
男
')
logGender('
⼥
'

3. 交叉类 &

• 交叉类型（Intersection Types）允许将多个类型合并为⼀个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常⽤于对象类型。

//
⾯积
type Area = {
  height: number; //⾼
  width: number; //宽
};
//
地址
type Address = {
  num: number; //楼号
  cell: number; //单元号
  room: string; //房间号
};
// 定义类型House，且House是Area和Address组成的交叉类型
type House = Area & Address;
const house: House = {
  height: 180,
  width: 75,
  num: 6,
  cell: 3,
  room: '123'
};

属性修饰符

修饰符	含义	具体规则
public	公开的	可以被：类内部、⼦类、类外部访问 。
protected	受保护的	可以被：类内部、⼦类访问。
private	私有的	可以被：类内部访问。
readonly	只读属性	属性⽆法修改。

interface（接⼝）

• interface 是⼀种定义结构的⽅式，主要作⽤是为：类、对象、函数等规定⼀种契约，这样可以确保代码的⼀致性和类型安全，但要注意 interface 只能定义格式，不能包含任何实现。

泛型

• 泛型允许我们在定义函数、类或接⼝时，使⽤类型参数来表示未指定的类型，这些参数在具体使⽤时，才被指定具体的类型，泛型能让同⼀段代码适⽤于多种类型，同时仍然保持类型的安
  全性。
• 举例：如下代码中 就是泛型，（不⼀定⾮叫 T ），设置泛型后即可在函数中使⽤ T 来表

// 泛型函数
function logData<T>(data: T): T {
console.log(data)
return data
}
logData<number>(100)
logData<string>('hello')

// 泛型可以有多个
function logData<T, U>(data1: T, data2: U): T | U {
console.log(data1,data2)
return Date.now() % 2 ? data1 : data2
}
logData<number, string>(100, 'hello')
logData<string, boolean>('ok', false)

// 泛型接⼝
interface PersonInterface<T> {
name: string,
age: number,
extraInfo: T
}
let p1: PersonInterface<string>
let p2: PersonInterface<number>
p1 = { name: '
张三
', age: 18, extraInfo: '
⼀个好⼈
' }
p2 = { name: '
李四
', age: 18, extraInfo: 250 }

继承 extends

泛型约束

interface LengthInterface {
length: number
}
// 约束规则是：传⼊的类型T必须具有 length 属性
logPerson<string>('hello')
function logPerson<T extends LengthInterface>(data: T): void {
console.log(data.length)
}
// 报错：因为number不具备length属性
// logPerson<number>(100)