ts问题基础

47 阅读4分钟

介绍

  • ts是一个跨平台的语言, 是js的超集, 从技术来说,ts是具有静态类型的js. 为了大型应用开发设计的, 可以编译为js
  • 特点: 强类型, 支持静态和动态类型, 可以在编译期间发现并纠正错误, 降低了试错成本.

和js的区别

  • js中变量可以接收不同类型的值, 同时可以访问任意类型,属性不存在的时候返回undefined
  • 在ts中,值和类型是绑定的, ts做的是就是给变量加上了类型的限制

常用语法

基础类型

  • 布尔类型: boolean
  • 数字类型: number
  • 字符串: string
  • null和undefined:
  • 数组:
  • 元组: 元组是表示一个已知元素数量和类型的数组
  • 枚举: enum, 是对js标准数据类型的补充, 可以为一组数值赋予友好的名字
  • any: 在编译阶段为不清楚类型的变量, 此时可以用any指定他的数据类型
  • void: 表示没有任何类型, 当一个函数没有返回值时返回的就是一个void
  • object: 除上述基本数据类型外的类型
  • 联合类型: 取值为多个数据类型的一种, 比如可以定义一个数字为number或string类型
  • 类型断言: 手动指定一个值的类型, 只在编译阶段起作用
// - 布尔类型: 
let b: boolean = true
// - 数字类型: number
let n: number = NaN
let n1: number = 1
// - 字符串: string
let s: string = 'string'
// - 数组: 定义数组有两种方式
let arrOne: Array<number> = [1,2,3] // 定义一个数组, 数组里面的数据类型只能是数字
let arrTwo: string[] =['a','b','c'] // 定义一个数组, 数组里面的数据类型只能是字符串
// - **元组**: 元组是表示一个已知元素数量和类型的数组
let y: [number, string,null] = [1,'a', null]
// - 枚举, 可以由枚举值得到他的名字
enum flag {flag1= 1, flag2= 2, flag3 = 3}
let useEnum: flag = 1
let useEnum1: flag = flag.flag2
// - void: 
let fn1 = (): void => {
    let a = 1
}
let fn2 = (): string => {
    let a = '1'
    return a
}
// - 联合类型: 取值为多个数据类型的一种, 比如可以定义一个数字为number或string类型
let lh: number | string // 变量可以是联合类型中的任意一种类型
lh = 1
lh = 'a'
// - 类型断言: 手动指定一个值的类型, 只在编译阶段起作用
let fn3 = (x: number | string): number => {
    if(typeof x === 'string') {
        return (x as string).length
    } else {
        return x.toString().length
    }
}

接口

  • ts中的接口是用来对对象,函数和类做一个行为规范约束
  • 可选属性: 接口中的属性不完全是必须的, 有些只在某种条件下存在, 此时可以使用可选属性
  • 只读属性: 可以在属性名前使用readonly,指定制度属性, 只读属性一旦确定就不可以被修改
  • readonly和const区别: 看把定义的内容作为变量使用还是属性使用, 如果定义成属性使用readonly否则用const
  • 定义的类接口, 类使用时通过implements使用, 且一个类可以实现多个接口
  • 接口间亦可继承通过extends
// 对象类型接口
interface obj {
    readonly name: string // 只读属性
    age: number
    work?: string // 可选属性
}
// 函数接口
interface fnFace {
    // 定义一个带有名字年龄和工作的函数返回值为string类型, 主要可选函数要放到最后
    (name1: string, age: number, work?: string): string
}
let fn: fnFace = (name1: string, age: number, work?: string): string => (
    `${name1}今年${age}岁`
)
let a = fn('胡桃', 10)
console.log(a); // 胡桃今年10岁
// 类类型接口
interface animalFace {
    eat(): void
}
interface peopleFace {
    study(): string
}
// 一个类可以实现多个接口
class user implements animalFace, peopleFace {
    eat() {
        console.log('22');
    }
    study() {
        return '人得学习啊'
    }
}

  • 封装: 将一堆函数封装成一个类去使用
  • 继承: 类之间可以相互继承, 子类继承父类的所有方法, 当方法名重复时会覆盖父类的方法
  • 多态: 在父类中定义方法时不规定他具体做什么,而在继承它的类中去决定
class c1 {
    fn1(): string {
        return '11'
    }
    fn2(work): void{
        console.log(`你的工作是${work}`);
    }
}
// 使用时通过new类名去使用
// 每个new的类都有自己单独的一个内存空间不相互影响
let useClass1 = new c1
let useClass2 = new c1
useClass1.fn2('杀人放火') // 你的工作是杀人放火
useClass2.fn2('烧杀抢掠') // 你的工作是烧杀抢掠

泛型

  • 泛型是在定义函数,接口或者类的时候,不预先指定数据类型, 而是在使用时确定类型
  • 泛型,解决了函数接口或者类的复用性以及对不特定数据类型的支持