TS演练场

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
}