前置知识

学会JavaScript的es5和es6语法之后,要想快速上手typescript,5分钟就能轻松搞定

JavaScript和typescript的区别

TypeScript 是 JavaScript 的一个超集，由微软开发，支持ECMAScript6标准,TypeScript提供了更多的数据类型以及更严谨的代码风格

typescritp的环境：

在终端中输入指令：npm i -g typescript,在全局中安装typescript, 首次安装即可
在我们的文件夹终端中输入指令tsc -init完成初始化,即可在文件夹中自动生成typescript的配置文件（tsconfig.json）
如果没有生成配置文件,可自己手写(网上复制一份), 其中将 "outDir": "./js", // 指定输出目录 解开,可设置ts转js文件后的存放路径（非常有用）

// tsconfig.josn文件（可直接复制拿去用）
{
    // ...
    "compilerOptions": {
        //   "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
        //   "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
        //   "diagnostics": true, // 打印诊断信息 
        "target": "ES5", // 目标语言的版本
        "module": "CommonJS", // 生成代码的模板标准
        //   "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
        //   "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
        //   "allowJS": true, // 允许编译器编译JS，JSX文件
        //   "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
        "outDir": "./js", // 指定输出目录
        //   "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
        //   "declaration": true, // 生成声明文件，开启后会自动生成声明文件
        //   "declarationDir": "./file", // 指定生成声明文件存放目录
        //   "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
        //   "sourceMap": true, // 生成目标文件的sourceMap文件
        //   "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
        //   "declarationMap": true, // 为声明文件生成sourceMap
        //   "typeRoots": [], // 声明文件目录，默认时node_modules/@types
        //   "types": [], // 加载的声明文件包
        //   "removeComments":true, // 删除注释 
        //   "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
        //   "noEmitOnError": true, // 发送错误时不输出任何文件
        //   "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
        //   "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块
        //   "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
        "strict": true, // 开启所有严格的类型检查
        //   "alwaysStrict": true, // 在代码中注入'use strict'
        //   "noImplicitAny": true, // 不允许隐式的any类型
        //   "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
        //   "strictFunctionTypes": true, // 不允许函数参数双向协变
        //   "strictPropertyInitialization": true, // 类的实例属性必须初始化
        //   "strictBindCallApply": true, // 严格的bind/call/apply检查
        //   "noImplicitThis": true, // 不允许this有隐式的any类型
        //   "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
        //   "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)
        //   "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)
        //   "noImplicitReturns": true, //每个分支都会有返回值
        //   "esModuleInterop": true, // 允许export=导出，由import from 导入
        //   "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
        //   "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
        //   "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
        //   "paths": { // 路径映射，相对于baseUrl
        //     // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
        //     "jquery": ["node_modules/jquery/dist/jquery.min.js"]
        //   },
        //   "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
        //   "listEmittedFiles": true, // 打印输出文件
        //   "listFiles": true// 打印编译的文件(包括引用的声明文件)
    }
}

点击vscode上方栏的终端 => 运行任务 => typescript => 找到我们的配置文件并运行
到此,我们的环境就搭建好了,直接在我们对应的文件夹下方新建一个tmep.ts即可开启我们的typescript之旅

声明变量/常量

相对js来说,ts代码要更为严谨,在声明变量/常量时,要在其后声明该变量存储的值的【数据类型】
一旦声明完之后,变量只能赋予已经声明的数据类型的值

/* 声明方式 */
    let a: number = 1;
    // 变量名:数据类型 = 初始化值
    let b: string;
    a = 2   // 正确
    a = '2' // 代码爆红,提示更改

可声明【多种】数据类型

/* 组合类型 */
    let a:number|string;
    a='1'  // 正确
    a=1    // 正确

简单了解一下ts的数据类型

（JavaScript所具有的）        （typescript另加的）
- boolean     布尔值        - tuple(元组类型) 
- number      数字          - enum(枚举类型)
- string      字符串        - any(任意类型)
- array       数组          - void(用于函数中声明无返回值函数)
- null        空值          - never其他类型
- undefined   未定义值
- object      对象

undefined 和 null

undefined null 是所有类型的子类型，可将这两个赋值给其他数据类型而不会报错

注意！！！在tsconfig.json指定了"strictNullChecks":true ，即开启严格模式后， null 和 undefined 只能赋值给 void 和它们各自的类型

    let a: undefined = undefined;
    let b: null = null;
    let str: string = 'zhangmazi';
    str = null;         // 正确
    str = undefined;    // 正确

number的进制转换

在ts中我们可以将数字的进制进行转换

    //  新增支持【进制转换】
    let a: number = 0xa // 0x启用十六进制 a是值
    console.log(a); // 10
    /* 
        默认：十进制  
        0b : 二进制
        0o : 八进制
        0x : 十六进制
    */

array的声明

ts中我们可以限定数组中所有元素都必须是统一的某种数据类型

* 声明方式1 */
    let arr1: string[] = ['1','2']
/* 声明方式2 */
    let arr2: Array<number> = [1, 2]
    console.log(arr1,arr2); //  ['1', '2']   [1, 2]

5分钟学会typescript（前两分半...）