[JavaScript知识库]Ts的基本知识

Typescript

1. 为什么我们要学习它？

   • js安全度低，但是ts可以弥补,我们才可以去做大型项目
   • vue2.x js
   • vue3.x vue + ts
   • react
     • react + ts

2. 如何来启动我们的笔记

   • 安装插件： cnpm i http-server -g
   • 找到对应的目录 资源
   • 启动项目： http-server
   • 将连接复制到浏览器打开既可以

3. ts是什么的解释

   1. ts具有类型系统，是js的超集
      • js也是有数据类型
        • 基本数据类型： number/string/boolean/null/undefined
        • 引用数据类型: object
      • ts它是类型系统
        • 基本数据类型： number/string/boolean/null/undefined
        • 内置对象类型： Image Array HtmlElement …
        • 自定义类型
          • interface/type
        • 泛型
        • 枚举
        • 元组
        • 高级数据类型： Partial 等
   2. ts可以编译成普通的js代码
      • ts是不能直接在浏览器中使用,得将ts转成js之后在使用
   3. TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。

4. ts使用的准备工作

   • 需要一个工具来将ts编译成js: typescript

   • 终端安装: cnpm i typescript -g

   • 检验是否安装成功： tsc -h

     • 如果有正常的输出，则安装成功
     • 如果失败了，请重复： cnpm i typescript -g

   • 使用tsc来将ts文件编译成js文件

     1. 找到app目录

     2. 终端执行一下命令： tsc --init

        • 我们会得到一个 tsconfig.json

     3. 修改tsconfig.json中两个代码即可

        • 将下面的代码进行修改

            // outDir: './'
            // rootDir: './'
            将注释还原，并修改成下面的代码
            outDir: './dist',
            rootDir: './src'
        

     4. 运行下面的命令，可以将src下的所有ts文件编译成js文件

        • tsc

5. 带着大家来学习ts

   1. ts中写啥
      • js 但是得给类型
   2. ts可以使用先进的es
   3. ts预先报错的能力
      • 编写代码时就可以得到报错信息

6. ts的类型系统

   • 基本数据类型
   • 引用数据类型
   • 内置对象类型
   • 泛型
   • 枚举
   • 元组
   • 高级数据类型
   • 自定义数据类型
     • interface/type 来实现

7. type vs interface 区别【面试】

   • 相同点-> 都可以描述一个对象或者函数
   • -> 都允许拓展（extends）
   • —>> interface extends interface (接口继承接口)
   • —>> type extends type (类型继承类型)
   • —>> interface extends type (接口继承类型)
   • —>> // type extends interface (类型继承接口)
   • 不同点-> type 可以而 interface 不行
   • -----> type 可以声明基本类型别名，联合类型，元组等类型
   • -> interface 可以而 type 不行
   • -----> interface 能够声明合并
   • 工作中：
     • 用interface来写即可