ts第二天

唐先森
139 阅读3分钟
  1. 新文件: npm init -y 按照文件名称形成一个package.json tsc init 形成一个tsconfig.json配置文件 package.json里面的script 写一个
"dev": 'ts --watch' 只要ts页面更改 就会刷新js对应页面
  1. 类型推断 类型推断,上面的str虽然没说是字符串,但是已经写成了字符串,后面更改为数字就会报错
let str = '123'
// str = 1;
  1. as(断言) 保证肯定是某个值 特殊点: 必须给val 一个固定的值,如果只是let val会报错
let val :number| string = 0;
(val as number).toFixed(1)
  1. type 指定一个规则(可以写两个规则)
    1. 定义一个规则,有值 x y
    2. =>不是箭头函数,只是一个分隔符
    3. 需要上面规则下面要紧跟实现的逻辑
    4. 最终的理解: 定义了一个类型检查机制 不只是限定某一个参数是字符串还是数组,而是设定了一个结构,只要使用我的结构,所有限制点需要符合我的要求
定义规则
type getName = (x: number, y: string) => string;
执行规则
let fn: getName = function (a: number, b: string):string {
  return "真香";
};
fn(1, "2");
  1. 可选参 参数位置写?就可以 可选参必须是从后往前排,不能是第一个
function a(a:string,b?:number){

}
a('1')
  1. 默认参 不传参就是默认10
function b(a:string,c:string,b:number=10){

}
b('1')
  1. 剩余参 后面传入一个数组就可以
function c(...a:string[]){
  console.log(a)
}
c('1','2')
  1. 重载 同名函数下:根据不同参数执行不同的代码逻辑 js不能实现,ts可以
function e(num:number):void;
function e(str:string):void;
function e(value:any){
  return '1'
}
  1. public/procted/private在继承情况下的区别 私有属性,保护类型和共有属性是三个属性 私有属性不会被继承使用 保护属性不能被子类和外界更改 公共属性是都可以使用 这个属性es6里面没有,java有这个概念
class Person {
  public name1:string; // 共有属性必须有属性 需要写一个public
  constructor(name:string){
    this.name1 = name
  }
  say(){
    console.log(this.name1)
  }
}

class Coder extends Person{
  constructor(n:string){
    super(n)
  }
  speak(){
      console.log(this.name1)
  }
}
let p = new Person('耗');
console.log(p);

let c = new Coder('你好')
p.name1 ='jj'

// p.say()
  1. 多态：同一操作作用于不同的对象，可以有不同的解释，产生不同的执行结果。 一个代码,不同执行.结果不一样. 就是一个类上原型有值,自己私有方法也有.会先执行自己私有方法
  2. 抽象类 不能直接实例化,必须派生类实现
abstract  class Animale {
  constructor(){
    
  }
  abstract eat():void; // 父级身上设定必须有的方法
    
  
}

class Dog extends Animale{
  constructor(){
    super()
  }
  eat(){
    // 既然继承一个抽象类,就必须设定这个属性. 但是可以根据自己的设定来调整属性
  }
}

ts重点

接口 interface

对象的接口

如果提前接口里面没写好的路径是无法写入的
interface objType {
  num: number;
  str: string
}

let obj:objType = {
  num:1,
  str:'2'
}

接口任意属性:接口右侧单属性

interface t { // 右侧全都是数字
  [propName:string]:number
}
let ob:t = {
  q:1,
  w:1
}

函数接口

interface ajax{
  (url:string,data:object):void
}

let login:ajax = function(url,data){
  console.log(url,data)
}

login('1',{name:"jj"})

接口扩展，也就是接口继承

   interface Animal {
       eat():void;
   }

   interface Person extends Animal {
       say():void;
   }

   class Coder implements Person {
       eat(){

       }
       say(){

       }
   }

泛型

就是把类型部分改为 在后面new 执行的地方执行的时候写上<number等>

多个泛型

就是<T,D>可以有多个

泛型继承

就是在 xx代表新定义的接口

interface List<T>{ // T类似于vue里面的插槽,传入什么就是什么,但是必须传入
  jj : T[]; // jj代表类型里面已经明确的值,不声明无法使用 // 右侧T代表传入的类型以后的使用
  // 并且规定的是 必须是数组里面传入数字,而不能是字符串
}

let l:List<number> = {
  jj:[1,2,3] // 必须是List里面规定好的数据
  // jj:{}  必须是按照interface里面对应jj的属性来设定
}

console.log(l.jj)
avatar
文章
阅读
粉丝