TypeScript理论知识
什么是TypeScript？
- js是一个运行时编译语言–编写一段代码以后，不会预编译，在执行这个代码的时候才会编译，那么如果代码有错误。只有执行的时候才知道
- js还是一个弱类型语言—没有数据类型
- 要解决以上问题，所以开发了JavaScript的超集—TypeScript
- 它是强类型语言、可以被编译成js代码
- 市面上可以执行ts的环境只有denojs
如何使用TypeScript？
- 1、安装TypeScript运行环境—cnpm i -g typescript
- 2、编写代码的时候，需要把文件命名为 .ts后缀
- 3、运行代码的时候，必须先编译，否则nodejs无法运行
TypeScript的数据类型？
- 显示数据类型：
let count: number = 1
let text: string = 'my text'
//text = 2 error
let bool: boolean = false
//bool = 0 error 这里一定要注意，这里0不是false，他不会做隐式转换
- 推导类型：
let myCount = 10 //相当于 let myCount: number = 10
//myCount = false error myCount推导类型为number
- any:当数据类型不固定，可以使用any
- 定义any数据有两种方法—一个是显式、推导
- any不判断数据类型
let myVal: any = 1
//let myVal 或者这样写，表示myVal为一个any
myVal = 'my value'
- unknow会对数据进行判断
let myVal: unknow = 10
myVal = 'my value'
//console.log(myVal.masg) 取不了属性，只能是一个简单的值
- any与unknown的区别？
any不判断数据类型
unknown会对数据进行判断
- 定义数组
- string[] 表示这个数据的类型为数组，数组每一项为字符串
let arrStr = ['str01','str02'] //相当于显式定义 let arrStr: string[]
//arrStr[1] = 2 (error 没有办法给一个字符串赋值为number)
arrStr[2] = 'str03'//可以用泛型来定义数组类型 Array<number> 表示arrNum为一个数组，他的没一项都为number类型
//let arrNum: Array<number> = [12, 34, '45'] (error '45'是string类型)
- 定义函数
- 把方法的入参和返回值进行类型固定
//: number表示方法一定会返回一个数字类型的数据
//add(x: number, y: number) 表示add方法要接收两个参数，都是number类型
function add(x: number, y: number): number {//return 10//return '10' (error)return x + y
}
//let result = add(10, '20') (error 调用方法的时候，传递的数据类型必须和定义的数据类型一致)
let result = add(10, 20)
- 定义返回空
- 表示无返回值，方法也不能有返回
//void 表示无返回
function doFunc(): void{//return 10 （error 不能执行返回）
}
- 函数接收的参数有默认值
//数据传递的个数不确定的时候，会经常使用： ...args
function func(type = 'atype', ...args): any {//return 'test'console.log(type, args)
}
func()
func('atype', 1,2,3,4)
总结
数组：
- 使用 string[] 表示是一个数组，每一个项都为string数据类型
- 使用Array
函数声明：
- function test(): void {} 表示无返回值，方法也不能有返回
- function test(): string/number/boolean等 {} 指定返回的数据的类型
- function test() {} === function test(): any {} 表示可以返回任意的数据类型
参数默认值：
- function test(type = ‘value’) {} 表示type数据可以不传，不传的默认值为’value’
剩余参数：
- 当一个函数，接收的数据个数不固定时，那么可以如下定义
function test(…args) {}
test(1, 2, 3) 那么args就是 [1, 2, 3]
接口
- 什么是接口？
- 定义数据或者对象的属性或者方法的规则
//定义一个用户数据
interface User {id: string,name: string,age: number,say: () => viod;//?: 表示这个参数属于可选参数，可传可不传//(msg: strimg) => boolean handle是一个数据类型为函数的属性，这个函数要求入参一个字符串，并且会返回一个Boolean值handle?: (msg: strimg) => boolean
}
//interface 可以进行接口继承，type不可以
interface SyUser extends User {sex: '男'| '女'
}function getUser():User{id: 'lisa',name:'丽莎',age: 24,say() {consolte.log('-----个人信息')}，handle(msg: string): boolean { //因为handle为可选数据，所以handle可传可不传return msg === '写代码'}
}let user: User = getUser()
user.say()//调用可选属性的时候，需要判断属性是否存在
//let bool: boolean = user.handle('12') ---error 没有对handle进行判断，handle属性可能为空
if(user.handle) {let bool: boolean = user.handle('12')
}
模块化
- module
- namespace
- module和namespace的区别和共同点？
- 都需要导出的数据或者方法外部才可以使用，模块可以导出任意的东西（包含命名空间）
泛型
- 当处理和返回的数据类型无法确定的时候，需要使用泛型
//T表示数据类型不固定，在调用的地方指定数据类型
function sort<T>(arr: T[] {return arr
})
sort<string>(['1', '2', 'a'])
sort<number>([1,2,3])
总结
- ts是允许前端使用强类型来开发项目
- 好处：控制数据类型、执行的时候会预编译，把我们的错误发现在编写阶段
