快速上手TypeScript

目录

00.demo

01.工具配置

02.基本类型

03.函数类型

04.接口

05.类

06.接口与类的使用

07.泛型

js本身语法 类型太弱了 不适合 开发后端 复杂业务

引入ts 代码写起来严谨 可阅读性强很多，更有利于团队开发

优点：

1.类型检查

2.语言扩展

3.类型推断机制

4.代码设计，团队合作

demo01

//-->ts写法
function addTen2(n:number){
  return n+10
}
addTen2(10)
addTen2('10')

 编译时就可以发现问题：

//强类型 ：不允许复制给其他类型  （编译时报错，检测类型）

01.工具配置

1.安装Typescript编辑器：tsc指令

npm i -g typescript

2.转换成JS文件

PS C:\Desktop\软件开发\前端\ts> tsc hello.ts

3.设置同步监听

PS C:\Desktop\软件开发\前端\ts> tsc --watch

4.修改生成js文件目录

02.基本类型

举例实例

/**
 * 01 基本类型
 * 02 数组 & 元组
 * 03 更多内置模块
 */

//公式 变量名：类型 =赋值
/**
 * 01 基本类型
 */

//01 string
//js
// let p_name ='phdvb'
//ts
let p_name: string='phdvb'
//ts 模板字符串
let nameStr: string=`姓名: ${p_name}`


//02 number
let p_age: number =23 
let num_16: number =0xfff

//03 boolean
let flag: boolean=true

//04 any 慎用
let anything:any ='hello'
anything =7
anything.lklsf

function divide(param: any){
  return param/2
}
divide('123')//报错

// 05 unknown 安全
function divide2(param: unknown){
  return param as number /2 //编写时提示报错  -->断言不会报错
}

//06 undefined(未定义)  07 null（空对象） ，是所有类型的子类型。配可选参数
let abc: null =null

//void 没有返回值
function fn1():void{
}

//never 永远不可能有返回值类型  --》true
function fn2():never{
  throw Error('error msg')
  while(true){}
}

/**
 * 02 数组+元组
 */
let fruits: string[] = ['apple','orange','banana']
// fruits.push(23)
fruits.push('watermelon')

//元组
let turple: [string,number,boolean] = ['apple',5,false]

/**
 * 03 更多的内置类型
 */
const d: Date =new Date()
const r: RegExp =/abc/

//Dom 和 Bom
const div:HTMLDivElement = document.createElement('div')
document.addEventListener('click',function(e: MouseEvent){
  
})

03.函数类型

/**
 * 01 定义函数的三种方式
 */
//声明方式
function add(x:number,y:number):number{
  return x+y
}
//表达式方式
let add2 = (x:number,y:number):number =>{
  return x+y
}

//ts箭头 公式 变量名：类型 =赋值
let add3: (x:number,y:number) =>number //函数类型
add3=(x,y)=>x+y
add3=add2

/**
 * 02 默认参数 可选参数 ?
 */
function introducePerson(name: string,age: number=23,career?: string){
  console.log(`姓名 ${name} 年龄${age} 职业${career ? career: '无'}`)
}
introducePerson('tom',undefined,'cooker')

/**
 * 03 函数重载 ：功能很类似 类型不同
 */
//法一：不重载反转实例，冗余
function reverseNumber(x:number):number{
  return Number(x.toString().split('').reverse().join(''))
}
function reverseString(x: string): string{
  return x.split('').reverse().join('')
}

//法二：联合类型      缺点：返回值提示类型比较模糊
function reverse_union(x:string|number):string|number|void{
  if (typeof x=== 'number') {
    return Number(x.toString().split('').reverse().join(''))
  }
  else if(typeof x=== 'string'){
    return x.split('').reverse().join('')
  }
}

//法三：函数重载
//写法： 前半部分写 函数声明， 最后一个函数是去实现它，并且要兼容之前的类型
function reverse(x:number):number
function reverse(x:string):string
function reverse(x:string|number):string|number|void{
  if (typeof x=== 'number') {
    return Number(x.toString().split('').reverse().join(''))
  }
  else if(typeof x=== 'string'){
    return x.split('').reverse().join('')
  }
}
reverse(123)

04.接口

/**
 * 01 对象接口-基本概念和用法
 * 02 可选属性 & 只读属性 & 任意属性
 * 03 用来描述函数的类型
 * 04 可索引接口
 */

/**
 * 01 对象接口-基本概念和用法
 */
//people
interface introducePerson {
  name:string,
  age:number,
  career:string,
  isNickLooking:boolean
}
const obj:introducePerson ={
  name: 'tom',
  age:23,
  career:'coder ',
  isNickLooking:true
}

/**
 * 02 可选属性 & 只读属性 & 任意属性
 */
interface introducePerson2 {
  readonly name:string,     //只读
  age:number,
  career?:string,           //可选： 可穿可不穿
  isNickLooking: boolean
}

const obj2:introducePerson2={
  name:'phdvb',
  age:35,
  isNickLooking:true
}

interface RandomIntroduce{
  name:string,
  age:number,
  //任意属性
  [propName: string]:string |number |undefined
}

const randomIntroduce: RandomIntroduce={
  name:'tom',
  age:23,
  like:'playgame',
  code:'good'
}

/**
 * 03 用来描述函数的类型
 */
interface ISum{
  (x:number ,y:number):number
}

const isum: ISum = (x,y) =>{
  return x+y
}

/**
 * 04 可索引接口
 */
interface RandomKeyArr{
  [propName: number]:String
}

const obj3:RandomKeyArr={
  0:'1',
  1:'123'
}
//或者
const obj31:RandomKeyArr = ['1','567']

05.类

/**
 * 01 基本写法
 * 02.继承
 * 03.多态
 * 04.抽象类
 * 05.this 类型
 */

// class
// 面向对象， 一类事物的抽象

/**
 * 01 基本写法
 */
class Animal{
  name:string
  constructor(name:string){
    this.name=name
  }
  eat(){}
  speak(){}
}
const p1=new Animal('tom')
p1.eat()

/**
 * 02.继承
 */
class Cat extends Animal{
  category:string 
  constructor(name:string,category:string){
    super(name)
    this.category=category
  }
}
const c2=new Cat('tom','加菲貓')
c2.eat()

/**
 * 03.多态
 */
class Dog extends Animal{
  speak(): void {
    console.log(this.name + '汪汪~~')
  }
  eat(): void {
    console.log('吃肉')
  }
}
class Cat2 extends Animal{
  speak(): void {
    console.log(this.name + '喵喵~~')
  }
  eat(): void {
    console.log('吃鱼')
  }
}

const dog1:Animal =new Dog('tom')
const cat1:Animal= new Cat2('jerry')

dog1.speak()
cat1.speak()

/**
 * 04 抽象类
 */
abstract class Animal2{
  name:string 
  constructor(name :string){
    this.name=name
  }
  abstract say():void
}

class Dog2 extends Animal2{
  say(): void {
    console.log('汪汪！')
  }
}

/**
 * 05 this  技巧：链式调用
 */
class Cook{
  step1(){
    console.log('烧水')
    return this
  }
  step2(){
    console.log('放调料')
    return this
  }
  step3(){
    console.log('加面条')
    return this
  }
}

const cook =new Cook()
//原始调用方法
// cook.step1()
// cook.step2()
// cook.step3()
cook.step1().step2().step3()

06.接口与类的调用

/**
 * 01. 类实现接口
 * 02. 接口继承接口
 */

/**
 * 01. 类实现接口(描述一类事物的行为)
 */
interface IWake{
  wakeUp():void
}
//类实现接口
class Alarm implements IWake{
  wakeUp():void{
  }
}

//抽象类 ：类是单一继承的
//类可以实现多个接口
interface IMusic{
  playMusic():void
}

class Alarm2 implements IWake,IMusic{
  wakeUp():void{
  }
  playMusic(): void {
  }
}

/**
 * 02 接口继承接口
 * 好处：代码复用 ，接口可以随意组合
 */
interface ISmartAudio extends IWake,IMusic{
  controlSomethings():void
}
class Smart implements ISmartAudio{
  controlSomethings():void{
  }
  wakeUp(): void {
  }
  playMusic(): void {
  }
}

07.泛型

/**<T>
 * 01.引子
 * 02.泛型约束函数
 * 03.泛型约束类
 * 04.泛型约束接口
 * 05.小结
 */

/**
 * 01 引子
 */
//1.普通写法 麻烦
function print1(arg:string):string{
  console.log(arg)
  return arg
}
function print2(arg:number):number{
  console.log(arg)
  return arg
}
//02 联合类型 返回类型不精确
function print3(arg:number|string):number|string{
  console.log(arg)
  return arg
}
//03 重载
function print(arg:string):string
function print(arg:number):number
function print(arg:number|string):number|string{
  console.log(arg)
  return arg
}
//04 泛型(具体使用时确定类型)，最开始可以用占位符，比如说T
function print_T<T>(arg:T){
  console.log(arg)
  return arg
}
print_T<number>(13)

/**
 * 02 泛型约束函数
 */
interface IPrint<T>{
  (arg: T):T
}
const p11:IPrint<number> =(arg) =>arg

/**
 * 03 泛型约束类
 */
class Stack<T>{
  private data:T[]=[]

  push(item:T){
    this.data.push
  }

  pop():T | undefined{
    return this.data.pop()
  }
}

const st01 =new Stack<string>()
st01.push('phdvb')

const st02 =new Stack<number>()
st02.push(63)

/**
 * 04 泛型约束接口
 */
interface ILength{
  length:number
}
function logLength<T extends ILength>(arg:T):T{
  console.log(arg.length)
  return arg
}
logLength('dasd')
logLength(['adas','3e2','dcasdqw'])