ts的简单使用

2021-09-28  本文已影响0人  阿凯_8b27

ts的好处
1.类型检查
2.避免低级错误
3.解放劳动力
4.帮我我们写出更高质量的代码

实际使用发
1.利用 node.js
npm install -g typescript
tsc -v
2.利用vsCode plugin
code.ts => tsc => code.js;

具体特点:
const 声明常量 不可以修改
let 来解决var作用域混乱

image.png

TypeScript的类型
boolean string number
array tuple enum
null undefined object
void never any
高级类型
union 组合类型

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

Nullable 可空类型

let sn: string | null = "bar";

Literal 预定义类型

type Gender = "male" | "female";
var gender: Gender;
gender = "male"; // Correct
gender = "Chinese"; // Error: not assignable

Number 数字类型
对数字的定义只要一个很笼统的number来表示
既能表示证书,也能表示浮点数,甚至也开业表示正负数
例如: 1 ,5.3 -10

Array数组和 元组(Tupple)

let list1:number[] = [1,2,3,4];
let list2: Array<number> = [1,2,3,4];
let list3 = [1,2,3,4];
let list5:any = [1,"dss", true];

元组

let person1 : [number,string]=[1,"a是假的回复"] 

//联合(Union)与文献(Literat)累心
let unin2 ; number | string | booolean

enum Coler {
    red = 4,
    green =10,
    bue = 1
}
// any he unkown

unkonwn 使用之前需要类型前判断 typeof

函数定义void,undefined never
void 无返回值
undefined return
never 永远执行不完 例如while 和throw

//3-9类型适配 (类型断言) Type Assertions
let message : any;
message = 'abc';
message.endsWith("c")

let ddd = (<string> mseeage).endsWith("c")

函数类型
let log = function(message){
conso
}
let log2 = (message?: string, code :number = 0 ) =>

面向对象
对象 Object (以 {} 包括起来,用键值对的形式显示,就是 object 类型)

typescript中,当我们调用一个没有定义的内部变量,IDE/编译器会报错。、

typescript中,在对象初始化的时候,就已经定义好类型了。

与JavaScript不同的是,typescript对对象类型的定义不是 key to value(键值对),而是 key to type(键类型对)

object类型定义更精确,object类型是any类型的一个子集。

Access Modifier 访问修饰符:public、private、protected

在对象外部直接访问内部成员变量,甚至重新赋值是非常危险的!一般要避免外部直接操作class内部属性,修饰符可以限制外部直接访问class内部属性。

interface IPoint {

  drawPoint: () => void;

  getDistance: (p: IPoint) => number;

  // getter  setter 正常写法

  // getX:()=>number;

  // setX:(value)=>void;

  // getY:()=>number;

  // setY:(value)=>void;

  // 懒人包写法

  X: number;

  Y: number;

}





class newPoint implements IPoint {

  constructor(private x: number, private y: number) {

    console.log(`在 constructor 中,x is ${x},y is ${y}`);

  }

  drawPoint = () => {

    console.log(`x : ${this.x}, y : ${this.y}`);

  }

  getDistance = (p: IPoint) => {

    return Math.sqrt(Math.pow(p.X - this.x, 2) + Math.pow(p.Y - this.y, 2));

    // return 0;

  }

  // 懒人包写法

  get X() {

    return this.x;

  }

  set X(value: number) {

    this.x = value;

  }

  get T() {

    return this.y;

  }

  set Y(value: number) {

    this.y = value;

  }

  // 正常写法

  // setX =(value:number)=>{

  // if(value<0){

  // throw new Error("value 不能小于0")

  // }

  // this.x=value;

  // }

  // setY =(value:number)=>{

  // if(value<0){

  // throw new Error("value 不能小于0")

  // }

  // this.y=value;

  // }

  // getX=()=>{

  // return this.x;

  // }

  // getY=()=>{

  // return this.y;

  // }

}

泛型<T,Y>

interface keypair<T,U>{
    key:T,
    value:U
}
const kp1:keypair<number,string> = {key:1,value:'1'}
const kep2:keypair<number,number> = {key:1,value:1}
上一篇 下一篇

猜你喜欢

热点阅读