TS(TypeScript)入门

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_40816649/article/details/100660027

ts是js类型的超集,可以被编译成纯js。新公司的项目中无论是逻辑代码或者封装的函数都多次使用到了ts,在往后的工作中ts会成为不可缺少的一部分因此在空闲的时间简单的入门了一下ts。

ts让原生的js成为了强类型语言,例如:

//js
function test(a) {//可以传入任意类型
    console.log(a)
}

//ts
function TStest(a:String) {//强制定义函数test只能传入字符串类型
    cosnole.log(a)
}

TStest(123)//Type 'string' is not assignable to type 'Number'

下面是几个常用的定义类型

    let name: String = 'ts';//类型是字符串
    let age: Number = 12;//类型是数字
    let list: Array<Number> = [34342, 342343];//数组的每一项需要是数字
    let list1: Number[] = [23434, 23424];//数组的每一项需要是数字
    let list2: [Number, Boolean] = [2343434, false];//数组第一项为数字第二项为布尔值
    enum Color { red, green, yellow };//枚举类似循环
    let c = Color[1];//取到枚举的第一项
    let anyType: any = 345353;//可以是任意值
    let ListAng: any[] = [1, '3', false];//数组中可以任意定义类型和个数
    let object: Object = { name: '3234234' };//类型是对象

ts的class类

export class CommonFnTs {

  private nn: String;
  public mm: Number;
  protected tt: String;
  constructor(nnn: String) {
    this.nn = nnn;
    this.mm = 2234234;
    this.tt = '123456';
    let name: String = 'ts';
  }
  private getValue() {
    console.log(this.nn, this.mm)
  }
  public get setValue() {//这不是一个方法
    return this.mm
  }
  public test(nnn: String = '5') {
    console.log(nnn)
  }
  fnReturnType(num?: String): Number {//定义函数返回的值的类型,参数的写法为可有可无
    return 2423434
  }
}

public是定义类的公共的方法或者参数默认不写为公共方法,private定义类的私有方法或参数。
get必须要return一个参数出来。
num?String意思是参数可有可无但是如果传值的话必须为字符串。
fnReturnType(): Number函数必须返回一个数字。

TS接口

interface extendInterface {
  extend: Object
}
export interface interFaceObj extends extendInterface {//接口继承
  name1?: String;//可有可无
  readonly age1: Number;//不可修改
  sex1: Boolean
}
function interfaceFn(obj: interFaceObj = { name1: '1111123', age1: 123, sex1: false, extend: { a: 1 } }) {//接口定义规则
  console.log(obj)
}
let objTest: interFaceObj = { name1: '123', age1: 123, sex1: false, extend: { a: 1 } }
objTest.name1 = 'true'
interfaceFn(objTest)

interface接口主要用来定义类似函数传入参数的规则。
接口是可以继承的类似class类。

文档中还有一些关于tsconfig.json的配置项以及一些比较少用到的知识点,以上是比较常用的知识点大致就先这样吧,后续在补上其他的知识点。

猜你喜欢

转载自blog.csdn.net/qq_40816649/article/details/100660027