TS和JS的区别
- ts与js相比增加了类型的限制
- ts在变量赋值时必须提供与提供的类型匹配的值
- 限制变量只能访问绑定类型中的属性和方法
JS转TS
- 手动转换: 通过命令 tsc 文件名.ts 进行转换
- 自动转换
- 通过tsc --init创建一个tsconfig.json文件
- outDir属性表示输出路径
- strict属性表示是否开启严格模式
- 具体属性介绍见tsconfig.json属性说明
TS中的数据类型
- 布尔类型: boolean
- 数字类型: number
- 字符串: string
- null和undefined
- 数组: 有两种定义方式
- 元组(tuple): 元组类型用来表示一个已知元素数量和类型的数组
- 枚举(enum): 用于标识状态和固定值
- any: 不确定数据类型可以赋值any,尽量不用
- void: 空值,常用于函数没有return的时候
- object: 复杂数据类型
- 联合类型: 可以对一个变量定义多个类型, 类型中间用 | 分割
- 类型断言: 手动的指定一个值的类型, 只在编译阶段起作用
- 类型推断: ts在没有明确指出类型时推断出一个类型
- 定义的变量赋值时, 推断的类型与赋值的类型一致
- 定义变量没有赋值时, 推断类型为any
let num: number = 1
let str: string = "33"
let bool: boolean = true
let arr1: Array<string> = ['w','q','g']
let arr2: number[] = [1,2,3,4]
let tuple: [string,number,number,boolean] = ['w',1,3,true]
enum enu {flag = 1, flag2 = 'ww'}
if(num === enu.flag) {
console.log('判断中使用枚举类型');
} else if(str === enu.flag2) {
console.log('注意,使用枚举时如果两边数据类型不同会报错');
}
function fn0(): void{
console.log('使用void没有返回值');
}
function fn1(): number{
console.log('返回值为number类型');
return 1
}
let func = (a: number | string): string {
console.log('参数a可以是number类型也可以是string类型');
if(<string> a) {
return <string> a
} else if(a as number) {
return a.toString()
}
}
TS中的接口
- 接口可以对属性或行为进行规范,包括属性接口, 函数接口和类接口
- 可选类型: 在函数传参或接口定义时有些属性或参数可传可不传,这是会给可选属性 变量名?:类型
属性接口
- 属性接口是对TS中对象的一种约束,通过interface定义
interface objInter {
name: string
age: number
idCore?: number
};
let peoplOne: objInter = {
name: '老祖',
age: 86000,
idCore: 210782082605247482
}
let peoplTwo: objInter = {
name: '一劫',
age: 319960000,
}
函数接口
interface fnInter {
(name: string, age: number): string,
}
let useInterFn:fnInter = (name: string, age: number): string=> {
return `${name}活了${age}岁`
}
泛型
- 泛型是在定义函数,接口或类的时候,不提前指定类型,而是在使用的时候决定类型.
- 泛型可以解决类接口和方法的复用性以及对不特定数据的支持
function getDataFn<T>(value: T):T {
return value
}
console.log(getDataFn<number>(111));
console.log(getDataFn<string>('111'));
class MinClass<T> {
list:T[] = []
add(value: T): void {
this.list.push(value)
}
minFn(): T {
var min = this.list[0]
this.list.forEach((item,index) => {
if(min > item) {
min = item
}
});
return min
}
}
let m = new MinClass<number>()
m.add(12)
m.add(20)
console.log(m.minFn());
interface ConfigFn {
<T>(value1: T,value2: T): T
}
let esFive: ConfigFn = function<T>(v1: T,v2: T): T{
return v1
}
esFive<string>('33','44')
esFive<number>(31,55)
let esSix = <T>(v1: T, V2: T): T => {
return V2
}
esSix<number>(31,55)
interface TconfigFn<T> {
(value: T): T
}
function TesFive<T>(v: T): T {
return v
}
let five:TconfigFn<string> = TesFive
five('3ee')