2022.11.05
TS基础类型
const hasDone: boolean = false
const num: number = 123
const str: string = "string"
const sym = Symbol()
const obj = {
[sym]: "symbol"
}
const arr: number[] = [1,2,3,4]
const arrT: Array<number> = [1,2,3,4]
const arrR: ReadonlyArray<number> = [1,2,3,4]
enum ColorType{
Red,
Green,
Yellow
}
1. 默认值
const ct: ColorType = ColorType.Red
默认情况下,Red初始值为【0】,其余走【1】自动增长
2. 设置初始值
若设置Red初始值为【5】,则其余走【6】开始
enum ColorType{
Red = 5,
Green,
Yellow
}
const ct: ColorType = ColorType.Yellow
1\2数字枚举情况下,支持【值访问成员名】【名访问成员值】
const value = ColorType[0]
const value = ColorType["Red"]
3. 字符串枚举值 (每个成员都必须⽤字符串字⾯量)
enum ColorType{
Red = "Red",
Green = "Green",
Yellow = "Yellow"
}
const ct: ColorType = ColorType.v
4. 常量枚举
const enum ColorType{
RED,
GREEN,
YELLOW
}
let x:ColorType = ColorType.GREEN
5. 异构枚举 (数字和字符串得混合)
enum Enum{
A,
B,
C = "1",
D = "D",
E = 9,
F
}
const x:Enum = Enum.B
const x:Enum = Enum.C
const x:Enum = Enum.F
const x:Enum = Enum[0]
const anyway: any = 1
anyway = "1"
anyway = true
const unknownway: unknown = 1
unknownway = "1"
unknownway = true
any类型可赋值给任意类型,而unknown类型只能赋值给any类型和自己;
any类型可执行任意操作,而unknown不行
const x:string = anyway
const x:number = anyway
x.obj.a
const y:any = unknownway
const y:unknown = unknownway
const y:string = unknownway
y.obj.a
工作方式类似于数组,可定义具有有限数量得未命名属性的类型,每个属性都关联一个类型。而在TS中的数组是由同种类型的值组成。
let x:[string,number,boolean]
x = ["1",1,true]
需赋值每个位置属性相同的类型,且个数一致
void类型与any类型相反,表示没有任何类型,一般多用于函数返回类型定义
function x():void{
console.log("void")
}
const x: undefined = undefined
const x: null = null
表示非原始类型 如{} \ []
const x:object = {}
const y:object = []
表示所有Object类的实例的类型,在js中所有引用类型的顶层对象都是Object
const z:Object = {}
const w:Object = []
表示一个没有成员变量的对象,若访问对象任意属性,会报错
const obj = {}
obj.x = 1
表示永不存在的值的类型,一般用于"抛出异常"、"while循环函数"
function x():never{
while(true){}
}
const x = () => { throw new Error("never") }
TS断言
1. 类型断言
1.1 自己很清楚此时应该使用某个更确切的类型
1.2 类似Java中的强制类型转换
const x: any = "1111"
const xL: number = (x as string).length
const x: any = "1111"
2. 非空断言
使用【!】后缀表达式操作符来断言操作的对象是非undefined和非null的,多用于带联合类型包括有undefined或null时,确定真实类型
const x: string | undefined = undefined
const y: string = x
const y:string = x!
3. 确定赋值断言
允许在实例属性和变量声明后面放置一个[!]操作符,告诉TS该属性或变量会被明确的赋值
let x!:number;
init()
console.log(x)
function init(){
x = 1
}
在ts中,会报 Variable 'x' is used before being assigned,按道理说走init方法会肯定赋值,因此需要确定赋值断言
TS类型守卫
类型保护是可执⾏运⾏时检查的⼀种表达式,⽤于确保该类型在⼀定的范围内,其主要思想是尝试检测属性、⽅法或原型,以确定如何处理值。
1. in
2. typeof
3. instanceof
4. 自定义类型谓词
TS联合类型和类型别名
1. 联合类型
使用[ | ]来使用多种类型中任意一个即可,通常与null、undefined一起使用
let x: string | number | undefined = 1
x = "2"
const colorType: 'red' | 'yellow' = 'red'
const whichWay: 1 | 2 = 2
2. 可辨识联合类型
多用于多组类型在联合时,每组类型中含相同属性的定义
3. 类型别名
type colorType = string | number
let c:colorType = "red"
let c:colorType = 1
TS交叉类型
通过&运算符,将多个类型合并为一个类型
type colorType = {x:number} & {y:string}
const c:colorType = {x:1,y:'red'}
1. 同名基础类型属性的合并
合并完成后,同名属性的类型将变成never
2. 同名非基础类型属性的合并
合并完成后,可使用合并类型
TS接口及与类型别名区别
在TS中,接口除了对类的一部分行为进行抽象外(Java中的接口常用操作方式),也常用对对象的形状进行描述
1. 针对一组对象进行描述
interface User{
username:string;
password:string;
}
2. 可选、只读、任意属性
interface User{
username?: string;
readonly password: string
[propName:string]: any
}
3. 与类型别名区别
3.1 均可定义为描述对象的形状或者函数签名
3.2 但类型别名可以用于定义其他类型
type color = string
type x = {x:string}
type y = {y:number}
type xy = x | y
type tupleColor = [string,number]
3.3 相互继承
interface extends interface
type alias extends type alias
interface extends type alias
type alias extends interface
3.4 实现
class implements interface
class implements type alias
3.5 自动合并
接口可定义多次,相同的接口会被合并为单个接口
TS各种符号
1. 非空断言操作符 -》 !
2. 可选链运算符 -》 ?.
3. 空值合并运算符 -》 ??
4. 可选属性 -》 ?:
5. 交叉类型 -》 &
6. 联合类型 -》 |
7. 数字分隔符 -》 _
8. 装饰符 -》 @XXX
9. 私有字段 -》 #XXX
tsconfig.json
1. 作用
⽤于标识 TypeScript 项⽬的根路径;
⽤于配置 TypeScript 编译器;
⽤于指定编译的⽂件
2. 个别字段
files - 设置要编译的⽂件的名称
include - 设置需要进⾏编译的⽂件,⽀持路径模式匹配
exclude - 设置⽆需进⾏编译的⽂件,⽀持路径模式匹配
compilerOptions - 设置与编译流程相关的选项
3. compilerOptions配置说明
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [],
"allowJs": true,
"checkJs": true,
"jsx": "preserve",
"declaration": true,
"sourceMap": true,
"outFile": "./",
"outDir": "./",
"rootDir": "./",
"removeComments": true,
"noEmit": true,
"importHelpers": true,
"isolatedModules": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {},
"rootDirs": [],
"types": [],
"allowSyntheticDefaultImports": true,
"sourceRoot": "./",
"mapRoot": "./",
"inlineSourceMap": true,
"inlineSources": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}