TS演练场
使用export阻断模块
当只是单纯的练习ts时如果在两个ts文件中定义了相同的变量名这时就会报错，因为这两个ts文件属于同一个作用域，因此可以使用export 导出一个空模块来建立独立的作用域
// index.ts
export {}
TS中的!和?用法
- 属性或参数中使用 ？：表示该属性或参数为可选项
- 属性或参数中使用 ！：表示强制解析，告诉[typescript]编译器，这里一定有值
- 变量后使用 ！：表示类型推断排除null、undefined
要支持ts解析！需要在tsconfig.json文件中配置
"compilerOptions": {
"suppressImplicitAnyIndexErrors": true,
}
TS中let 和 const 的区别
let定义变量它的类型可以根据变量的值自动推断，const定义常量，但是const定义的常量的值就是它的类型
let num = 1 // TS会推断出num的类型是number
const str = '123' // str的类型就是'123'
TS中object 和Object 的区别
object 是不包含原始类型的但是包含对象和数组,Object 是既包含原始类型也包含对象和数组，
{}和Object 是相同的
let obj :object = { a:' aa' }
let arr:object = [1,2,3]
let num:Object = 1
let obj:Object = {b: 'bb'}
let arr:Object = ['a', 'b']
ts中数组类型的定义
// 方法一
let arr: number[] = [1,2,3] // arr中的元素全为number类型
// 泛型定义法
let arr: Array<number> = [3,4,5]
联合类型 |
联合类型由|符号实现
let a : number | string = ''qq
// 使用常量作为类型，变量的值只能是它们
let num : 1|'2' = 1
num = '2'
// num的值只能是1或者'2'，不能是其他值
交叉类型&
交叉类型需要同时满足才可以
let obj : {name: string, age: number} & {height:number} = {
name: 'zhangsan',
age: 17,
height: 10
}
name\age\height需要同时都有才可以
any和unknown的区别
any会绕过类型的检验，好似在写js,但是unknown不会绕过类型检测，可以给它赋任何类型的值
interface 接口
- 对象接口
interface MyItf {
name: string;
age: number;
height: number;
}
let obj:MyItf = {
name: 'zhangsan',
age:18,
height:170
}
- 数组接口
interface ArrItf {
// 下标类型：值类型
[idx:number]: number|string
}
let arr:ArrItf = [1,2,3,'4','5']
- 函数接口
// 匿名函数
interface FnItf {
// 形参类型:返回值类型
(p:string):void
}
let fn:FnItf = (p:string) => {}
// 对象属性中的函数
interface PersonItf {
name:string;
getName:() => string;
}
let person:PersonItf ={
name: '',
getName() {
return ''
}
}
- 接口继承
接口通过extends来实现继承
interface NameItf {
name: string
}
interface AgeItf {
age: number
}
interface PersonItf extends NameItf , AgeItf {
height: number
}
// 此时PersonItf 接口有name、age、height三个属性
let person:PersonItf = {
name: 'zhangsan',
age: 18,
height: 170
}
- 接口同名
接口同名类似于合并了同名的所有接口
interface AItf {
a: number
}
interface AItf {
b: string
}
let a:AItf = {
// 此时的a需要同时写上a和b属性
a: 1,
b: 'vvv'
}
- 接口缺省
接口使用?来实现缺省，类似于可选
interface PersonItf {
name?: string,
age: number
}
// 这样写name属性可以不写
let person:PersonItf = {
age: 18
}
- 只读 readonly
如果接口中的某个属性是只读的，只需要在属性名前加上readonly即可
interface PersonItf {
readonly name: string
}
let person: PersonItf = {
name: 'Tony'
}
// person的name属性不支持修改
联合交叉类型
联合交叉类型：同时使用&和|，在ts中&的优先级高于|
类型别名
可以通过关键字type定义类型别名，
type StrOrNum = string | number
let str:StrOrNum = '123'
type ObjType = { a:number&2, b:string}
let obj:ObjType = {
a:2,
b: 'qq'
}
类型别名和interface的区别
- 都可以用来自定义类型
- 类型别名不支持重复定义，接口支持重复定义
- 类型别名支持联合类型和交叉类型
函数
- 使用接口来定义函数类型
interface FnItf {
(k:string):number
}
let fn:FnItf = (k:string) => {
return 1
}
- 使用类型别名定义函数类型
type FnType = (k:string) => void
let fn:FnType = (k:string):void => {}
- 函数作为对象的属性
// interface实现
interface FnItf {
(k:string):number
}
interface ObjItf {
fn: FnItf
}
let obj:ObjItf = {
fn: (k:string) => { return 1 }
}
// 类型别名实现
type FnType = (k:string) => void
type ObjType = {
fn: FnType
}
let obj:ObjType = {
fn: () => {}
}
函数参数
- 默认参数
function add(a:number, b: number = 3):number {
return a + b
}
add(1, 2) // 3
add(4) // 7
- 可选参数
function add(a:number, b?:number) :number{
if(b) {
return a + b
}
return a
}
- 剩余参数
function add (a:number, b:number, ...arr:number[]) {
}
add(1,2,3,4,5)
Promise
在ts中写Promise
interface DataItf {
a: number;
b: number;
}
interface ResItf {
code: number;
data: DataItf [],
message: string
}
let p:Promise<ResItf> = new Promise((resolve, reject) => {
resolve({
code: 1,
data: [{a: 1, b:2},{a:3,b:4}],
message: 'success'
})
})
全局声明文件
ts 中以.d.ts结尾的文件是全局声明文件，可以理解成定义全局类型变量的文件，在其他ts文件中使用全局声明文件中的内容时无需引入
枚举
枚举不是用来定义类型的，是用来列举数据的
enum Status {
Succ = 200,
ParamsError = 400,
ServerErroe = 500
}
let code : number | string = 200
if (code === Status.Succ) {
console.log('success')
}
泛型
泛型可以理解成类型的形参
// T只是一个标识符，可以自定义，T表示某种类型
function fn<T>(n:T):T{
return n
}
fn<number>(100)
// 类型也可以使用多个
function fn<T,U>(n:T, m:U):T{
return n
}
fn<number,string>(1,'q')
- 类型别名中的泛型
type objType<T,G> = {
name: T,
getName: () => G
}
type strOrNum = string | number
let obj:objType<strOrNum, strOrNum> = {
name: '1',
getName(){
return ''
}
}
- 接口中的泛型
interface PersonItf<T,U> {
name:T;
getName:() => U;
}
let person:PersonItf<string,string> ={
name: '',
getName() {
return ''
}
}
- 泛型默认值
interface PersonItf<T,U=string> {
name:T;
getName:() => U;
}
let person:PersonItf<string> ={
name: '',
getName() {
return ''
}
}
- 泛型约束
泛型可以使用extends来实现约束
interface PersonItf<T extends number ,U=string> {
name:T;
getName:() => U;
}
let person:PersonItf<number> ={
name: 1,
getName() {
return ''
}
}
Class
ts中定义类需要先定义类的属性，同时定义的类ts会同步定义一个相同名字的接口
class Person{
myName:string = ''
constructor(name:string) {
this.myName = name
}
getName(){
return this.myName
}
}
// ts自动定义了一个同名接口
let person:Person = {
myName: '',
getName(){
return ''
}
}
- 类的继承extends
class Person{
myName:string = ''
constructor(name:string) {
this.myName = name
}
getName(){
return this.myName
}
}
class Male extends Person {
myAge: number
constructor(name:string, age:number) {
super(name)
this.myAge = age
}
}
类的修饰符
- public 被修饰的属性和方法在类中和类外都可以访问
- private 私有的，在类里面可以访问，子类和类的外部都不能访问
工具类型 Partial
Partial(部分的)：是TS内置的工具类型，被Partial修饰的接口相当于添加了缺省符号?
interface PItf {
name: string;
age: number;
}
// 如果不使用Partial 下面的对象就会报错
let obj:Partial<PItf> = {
name:''
}
工具类型 Required
Required与Partial正好相反，Required是抵消调缺省，被Required修饰的接口中的缺省符会被抵消，变成必须项
interface PItf {
name: string;
age: number;
height?: number
}
let obj:Partial<PItf> = {
name:''
}
let obj1:Required<PItf> = {
name: '',
age: 12,
height: 12
}
网友评论