28张图助我学废TS

457 阅读2分钟

Ts现在用的越来越多,我感觉是时候总结一波Ts的基础知识点,毕竟与时代脱节不是咱们程序员该做的事,话不多说,直接开整。(注:脑图已经上传至云盘20+脑图系列中)

TypeScript.png

一、基础

1.png

二、tsconfig.json文件

2.png

示例代码

{
    // include用来指定哪些ts文件需要被编译
    // **表示任意目录
    // *表示任意文件(匹配0或多个字符)
    // ?匹配一个任意字符
    "include": [
        "./src/**/*"
    ],

    // 定义需要排除在外的目录,默认情况下会排除node_modules,bower_components,jspm_packages和<outDir>目录
    "exclude": [],

    // 定义被继承的配置文件
    // "extends": "",

    // 指定被编译的文件列表
    // "files": [],

    // 编译器的选项
    "compilerOptions": {
        // 设置ts代码编译的目标版本
        "target": "es2015",
        // 设置编译后代码使用的模块化系统
        "module": "amd",
        // 用来指定编译后文件所在的目录
        "outDir": "./dist",
        // 用来将代码合并为一个文件(一般用的不多)
        // "outFile": "./dist/app.js",
        // 是否对js文件进行编译,默认是false
        "allowJs": true,
        // 是否检查js代码是否符合语法规范,默认是false
        "checkJs": true,
        // 是否移除注释,默认是false
        "removeComments": false,
        // 所有严格检查的总开关
        "strict": true,
        // 用来设置编译后的文件是否使用严格模式,默认为false
        "alwaysStrict": true,
        // 不允许隐式any使用,默认值是false
        "noImplicitAny": true,
        // 不允许不明确类型的this,默认值是false
        "noImplicitThis": true,
        // 严格的检查空值,默认为false
        "strictNullChecks": true
    }
}

三、联合webpack使用

3.png

四、类型

4.png

4.1 类型声明语法

4-1.png

4.2 类型内容

4-2.png

4.3 object与{}

4-3.png

4.4 Function与(a:xxx)=>xxx

4-4.png

4.5 类型推断

4-5.png

4.6 类型断言

4-6.png

五、高级类型

5.png

六、类

6.png

6.1 定义类

6-1.png

6.2 属性

6-2.png

6.3 构造函数constructor

6-3.png

6.4 方法

6-4.png

6.5 修饰符

6-5.png

6.6 存取器

6-6.png

6.7 继承

6-7.png

七、接口

7.png

八、泛型

8.png

九、声明文件

9.png

9.1 为社么需要声明文件

9-1.png

9.2 第三方库通常两种类型声明方式

9-2.png

9.3 什么情况需要自己订一声明文件

9-3.png

9.4 声明文件类型

9-4.png

9.5 声明文件基础语法

9-5.png

参考文献

  1. 尚硅谷TypeScript教程
  2. TypeScript中文文档