【typescript教程】-学习笔记

学习笔记：

学习bilibili的https://www.bilibili.com/video/BV1AE41137QL，下面是学习笔记：

1.js是弱语言，声明变量时不用指明变量类型（编译时会自动识别），而ts使用变量时一定要指明变量类型，且当赋值给它不同的类型时会报错

2.ts指明变量类型，可以用string、number，还可以用any，any就表示可以为任意类型

3.ts的类型：

string、number、boolean、Array

null、undefined、Symbol、Object

新增：tuple、enum、any、never、void

4.ts的数组表示方式有2种：(1) let temp: string[ ]= ["str1","str2",..]

                                           (2)let temp: Array<string> = ["str1","str2",..]  （这个也叫ts的数组泛型写法）

上面两个都表示，创建一个变量temp，它的类型是数组，数组里的每个元素类型都为string

ts的数组只规定类型不规定数量，数组里的每个元素都必须是规定了的指定类型（对比元祖）

5.ts的元祖：tuple：（对比数组）既规定了类型又规定了数量，元祖里的每个元素类型可以不相同

let tuple1:[string,number,booolean] = [ "aa", 11, true ]

访问元祖和获取元祖长度方法同数组一样

6.ts的枚举：enum：

enum enumName {

    AAA = 1,

    BBB = 2,

    CCC = 3

}

AAA表示枚举项，1表示枚举值，枚举值可以省略，若省略，系统会默认自动从0开始添加

使用枚举：（和获取对象值差不多）enumName.AAA

7.ts的void：在ts中，如果函数有返回值，那也要对返回值进行类型声明，

function sayHi1(): string {

  return "hello!"

}

let temp = sayHi1()

而如果没有返回值，就用void声明，（void表示没有类型，用在无返回值的函数）

function sayHi2(): void {

   console.log("hello")

}

let temp = sayH2i()

8.ts的never类型：never表示不存在值的类型，用在函数死循环或者抛出异常的返回值类型，（用的不多）

9.ts的类型推断（结合我工作时候情况来看就是，ts脚本的入参和出参一定要声明变量类型，且当传参不是指定类型时一定会报错，而在脚本里声明的变量如果省去类型声明，会在自行类型推断，如let temp="hello"，自动判断temp为string类型，这时如果想在temp=001，就会报错）

10.ts的联合类型：用 | 隔开，let temp: string | number = sayHi()

11.ts的函数的返回值、参数：

返回值：在js中函数的返回值可以是任意类型，而在ts中函数的返回值必须指定具体的类型，若无返回值就为void

参数：函数的形参要指定具体的类型，实参传给函数，实参的类型和数量必须和形参一致（注意除了类型还有数量），如

function test (temp1:string, temp2:string) { }

let temp = test("aa","bb")

12.ts的可选参数：（ts函数如果定义了形参，那实参就必须传对应的数量和类型，类型不一致、实参数量太多、太少都会报错，所以就有了可选参数），写法：（加个问号就行）

function test (temp1:string, temp2?:string) { }

13.ts的默认值：function test (temp1:string = "aa", temp2:string = "bb") { }（如果带有默认值，那就不需要再设置为可选参数）

如果不传第一个实参，传第二个，let temp = test (undefined, "cc")

14.ts的剩余参数：当不知道除了已经定义的形参，还要会传多少个实参进去，就可以定义剩余参数，特点：只能有一个即只能有一个...、为数组形式、放在形参的最后，

function test (temp1:string, temp2?:string, ...temp3: string[] ) { }

15.类的封装：

在以往的js中，如果想批量创建对象，思路就是：创建构造函数，属性放在构造函数里，方法放在prototype里，

function City(name,level){   //构造函数

    this.cName = name  //属性、成员变量

    this.cLevel = level

}

City.prototype.detail = function () {   //方法，当用类批量创建对象时，所有对象都会拥有这个方法，不放在构造函数，而是放在这里目的，prototype里的为所有对象共享的，节省内存

    console.log("当前处于$(cLevel)省$(cName)市"

}

调用：let c1 = new City("深圳市","广东省")

          c1.detail() 

上面js的写法会导致构造函数和prototype不写在一起，不好看，而在ts中，也是为了解决上面同样的问题解决批量创建对象，ts写法是：

class City {

    cName: string   //成员变量，必须在声明时赋初始值或者在下面的constructor里赋

    cLevel: string

    constructor(name:string, level:string){     //构造函数

          this.cName = name   

          this.cLevel = level

    }

    detail (){   //成员方法

        console.log("当前处于$(cLevel)省$(cName)市"

     }

}

let c1 = new City("深圳市","广东省")     //创建对象
 c1.detail() 

（可以看成，ts中类的写法就是把成员变量属性和prototype方法写在一起里了，而在js中它们是分开的）

创建对象在js、ts中写法是一样的，但本质上是js：new构造函数，ts是：new类名，（其实ts的new类名，也是去调用类里的构造函数）

16.LocalStorage：本地存储，不可跨域，只能保存字符串（由于只能保存字符串，所有存进去要JSON.string( )，从本地读取的时候要JSON.parse( )），LocalStorage的4个操作：

localStorage.setItem("key","value")

localStorage.getItem("key")

localStorage.romoveItem("key")

localStorage.clear( )

17.搭建vue+ts的整个环境

18.用vue+ts去做一个todoList的app应用：（做app时的一些笔记）

（1）在ts中由于变量要么在声明时就要赋值要么在构造函数里马上赋值，而在itemData.ts文件里允许它暂时空，且不让它报错，就要写成 id !: number、title!: string，也就是在变量后面加感叹号

（2）要显示分类categoryId，可以使用ts的枚举，存在cateEnum.ts文件里

（3）可以把变量的类型声明为一个类，如datahelper: DataHelper

（4）let temp = arr.map()  //返回是一个数组

（5）通过vuex实现父子组件通信

（6）vue+ts框架的话，在vue文件里的<script>便签要写成<script lang='ts'>

（7）create生命钩子在组件被加载的时候调用

 

else：

1.运行函数，实参和形参类型不一致

2.void类型，运行函数，如果又没有返回值，又不设置void

3.联合类型

4.为什么要用$(变量名)来调用形参

5.剩余参数

6.构造函数里的方法为什么要放在prototype里而不是this.xx里

7.封装类的时候写法是class City { } 而不是()

8.js和ts封装类的区别

9.Symbol类型怎么用

10.indexDB、webSql使用

11.使用JSON.parse、JSON.stringify的[]、{}变化情况

12.数组泛型写法作用

13.封装DataHelper类（使用localStorage读取、保存、添加、删除数据）

14.可以把变量的类型声明为一个类，如datahelper: DataHelper

15.map使用，返回是一个数组

16.ts文件的命名规则

17.ts的继承

18.如果返回值是undefined，可以用if (!temp)去写判断条件吗

19.find、findIndex方法

20.import {vue} from 'Vue'、import {Vue} from 'vue-porperty-decorator'的区别

21.export default class 类名 extends Vue {}、export default{}区别，为什么要extends Vue继承于vue

22.import {Component,Prop,Vue} from 'vue-porperty-decorator'

23.filter方法