22
头图
Ts is used more and more now. I feel that it is time to summarize the basic knowledge points of Ts. After all, it is not what we programmers should do to be out of touch with the times. (Note: The brain map has been uploaded to the cloud disk 20+ brain map series)

TypeScript.png

1. Basics

1.png

2. tsconfig.json file

2.png

sample code
{
    // 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
    }
}

3. Use with webpack

3.png

4. Type

4.png

4.1 Type declaration syntax

4-1.png

4.2 Type Content

4-2.png

4.3 object and {}

4-3.png

4.4 Function and (a:xxx)=>xxx

4-4.png

4.5 Type Inference

4-5.png

4.6 Type Assertion

4-6.png

Five, advanced type

5.png

6. Class

6.png

6.1 Defining classes

6-1.png

6.2 Properties

6-2.png

6.3 Constructor constructor

6-3.png

6.4 Methods

6-4.png

6.5 Modifiers

6-5.png

6.6 Accessors

6-6.png

6.7 Inheritance

6-7.png

7. Interface

7.png

Eight, generic

8.png

9. Declaration document

9.png

9.1 Why do we need to declare documents

9-1.png

9.2 Third-party libraries usually have two types of declarations

9-2.png

9.3 Under what circumstances do you need to order a declaration document yourself?

9-3.png

9.4 Declaring file types

9-4.png

9.5 Declarative file basic syntax

9-5.png

references

  1. Shang Silicon Valley TypeScript Tutorial
  2. TypeScript Chinese Documentation

执鸢者
1.7k 声望2.5k 粉丝

摸摸头,编程使我快乐。