TS学习笔记 类型标签 联合类型 枚举类型 泛型 类型别名

个人理解总结：

• js天生没有编译和类型检查的束缚 灵活好上手 结合项目使用时也可以做到热更新提升开发体验。
  (需要编译的JAVA以前开发DEBUG很麻烦但现在有了容器编排技术，也可以实现类似效果)

• TS是JS的超集，添加了类型标注，不能直接在浏览器或Node中运行(Deno可以支持)，其他情况都需要TSC转译为JS后执行。npm install tsc -g

• TS可以提升代码的健壮性，可维护性，可扩展性与可读性

• 变量添加类型标注let i:number
  参数添加类型标注function F(a:number){}
  可选参数function F(b?:number){}
  函数返回值类型标注function F():number{}

• 联合类型let i:number|string;
  枚举类型let i:1|2|3
  类型别名type numStr = number|string;function F(userId:numStr){};

• 泛型 传递给函数的类型占位符 调用函数时将实际指定的参数类型链式传递给参数类型和返回值类型
  function identity(value:T ,message:U):T{ return value }; identity(68,'跳动的世界线');

• 回调函数function F(callback:(data:string)=>void){}

• 抽象继承封装多态待补全…

代码实例：

JS写法

//在JS中合法  JS中的变量和函数类型都是动态的  可以隐式转换  
function multiply(a,b){
	return a*b;//这里在执行中会将'1'隐式转换为1
}
multiply('1',2)
1
2
3
4
5

TS添加类型标注

//在TS中添加参数类型标签  不加时默认是any  此时TS不进行类型检查
function multiply(a:number,b:number){
	return a*b;
}
multiply('1',2)//TS中这里不符合语法规范  就会在运行前报错  提前发现错误
1
2
3
4
5

TS可选参数

function multiply1(a:number,b?:number){//添加? TS识别为参数可选 空参默认传undefined
	if(b==undefined) b=1 //
	return a*b;
}
1
2
3
4

TS函数返回值添加类型标注

function multiply2(a:number,b?:number):number{//添加函数返回值类型标签  无返回值时标记为void
	if(b==undefined) b=1 //
	return a*b;
}
1
2
3
4

TS类型推导 变量初值和固定类型函数返回值的情况下 不用手动添加类型 TS会自动推导

let i:number = 1
let str:string = '你好'

let i = 1
let str= '你好'
1
2
3
4
5

数组与元组

// 定义数组
let arr:number[];
let arrOfArry:number[][];
// 定义元组  类似数组  但元素个数与类型确定
let point:[number,number,number]
point = [1,2,3]
1
2
3
4
5
6

联合类型

let color:number|string;
color = 'red';
color = 0x111;
1
2
3

类型别名

type numStr = number|string;
function F(userId:numStr){};
1
2

枚举类型 限制变量取值

let gender:'male'|'female'
let dice:1|2|3|4|5

gender = 'male'
gender = 'female'
dice = 1
dice = 2
1
2
3
4
5
6
7

接口 定义接口创建的对象缺少或多出属性都会报错

interface User{
    name:string
    id:number
}
let user:User = {
    name:'222',
    id:111,
}

1
2
3
4
5
6
7
8
9

**函数 限制函数必须有特定参数和返回值，多用于回调函数 **

function getUserName(callback:(data:string)=>void){//限制回调函数没有返回值且参数必须为string
    // ...
}
getUserName((data)=>{
    alert(data);
})
1
2
3
4
5
6
7

泛型 泛型变量是传递给函数的类型占位符 调用函数时将实际指定的参数类型链式传递给参数类型和返回值类型

//T U为泛型变量，它是传递给identity函数的类型占位符
function identity<T,U>(value:T ,message:U):T{
    return value
}
identity<number,string>(68,'跳动的世界线')

T (Type) 表示类型；
K (Key) 表示对象中键的类型；
V (Value) 表示对象中值的类型；
E (Element) 表示元素类型。
1
2
3
4
5
6
7
8
9
10

tsconfig.json配置

{
	"compilerOptions":{
		"watch":true.
		"removeComments":true.
		"target":"es6".
		"noImplicitAny":true.
		"strictNullChecks":true.//不允许给任意类型变量赋null undefined
	}
}
1
2
3
4
5
6
7
8
9

类型定义扩展包 第三方插件添加完善的类型支持

npm install three --save
npm install @types/three --save

1
2
3

ts中的联合类型和类型保护— as、in、typeof、instanceof、enum、keyof

链接