typescript学习笔记1-tsconfig.json配置和变量类型声明

一，tsconfig.json

{
  // 编译器选项
    "compilerOptions": {
  
      /* 基本选项 */
     
      "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6','ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
//      注意：target将ts转为最终target js版本是不全的，有些无法转换，无法做到完全兼容
      // 例如 代理反射等功能，所以考虑兼容性必须还要使用 babel进行兼容性转换

      "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd','es2015'
      "lib": [],                             // 指定要包含在编译中的库文件, ----->>>一般在后端使用，要引入库的时候使用，默认引入浏览器运行的库
      "allowJs": true,                       // 允许编译 javascript 文件,----->有些模块是js写的
      "checkJs": true,                       // 报告 javascript 文件中的错误 ----->检查js中有没有语法错误，应该和上面一起用
      "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
      "declaration": true,                   // 生成相应的 '.d.ts' 文件
      "sourceMap": true,                     // 生成相应的 '.map' 文件
      "outFile": "./dist/app.js",            // 将输出文件合并为一个文件      ---->>>>全局作用域文件中的内容合并，全局作用域即不使用模块导出导入, 如果要合并有导入导出模块的文件，
                                             // module必须为amd或者system
      "outDir": "./",                        // 指定输出目录，             ---->>>>编译后的js所在目录
      "rootDir": "./",                       // 用来控制输出目录结构 --outDir.
      "removeComments": true,                // 删除编译后的所有的注释 --->删除编译前的注释,只检查语法的时候用
      "noEmit": true,                        // 不生成输出文件 --->为true不生成最后的编译.js文件
      "noEmitOnError":true,                  // 当有错误的时候，不生成编译文件(.js)
      "importHelpers": true,                 // 从 tslib 导入辅助工具函数
      "isolatedModules": true,               // 将每个文件作为单独的模块 （与 'ts.transpileModule' 类似）.
  
      /* 严格的类型检查选项 */

      "strict": true,                        // 启用所有严格类型检查选项
      //下面的总开关
      "noImplicitAny": true,                 // 在表达式和声明上有隐含的 any类型时报错;--->没有写类型的值不会被推断为any
     
      "strictNullChecks": true,              // 启用严格的 null 检查
       // 例如获取dom，不成功，执行了属性，dom可能为null
      "noImplicitThis": true,                // 当 this 表达式值为 any 类型的时候，生成一个错误
      //使用this的时候必须指定类，
      "alwaysStrict": true,                  // 以严格模式检查每个模块，并在每个文件里加入 'use strict'
    // 注意当代码中使用模块，自动就使用了严格模式


      /* 额外的检查 */
      "noUnusedLocals": true,                // 有未使用的变量时，抛出错误
      "noUnusedParameters": true,            // 有未使用的参数时，抛出错误
      "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时，抛出错误
      "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）
  
      /* 模块解析选项 */
      "moduleResolution": "node",            // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
      "baseUrl": "./",                       // 用于解析非相对模块名称的基目录
      "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表
      "rootDirs": [],                        // 根文件夹列表，其组合内容表示项目运行时的结构内容
      "typeRoots": [],                       // 包含类型声明的文件列表
      "types": [],                           // 需要包含的类型声明文件名列表
      "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。
  
      /* Source Map Options */
      "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
      "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置
      "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
      "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性
  
      /* 其他选项 */
      "experimentalDecorators": true,        // 启用装饰器
      "emitDecoratorMetadata": true          // 为装饰器提供元数据的支持
    },


    /*指定要编译的文件 **表示任意目录 *表示任意文件  */
    "include":[
      "./src/**/*"  // src下任意目录下面的任意文件
    ]
    ,
// 包括和排除，应设置，不然，全局变量的范围会很大，
    //排查的，有默认值
    "exclude":
    [
      "./scr/hello/**/*"
    ]
    ,
    // 编译具体的文件
    "files":["xx.ts"]

  }

主要要注意;include/strict(建议为true)/target(建议为es5)/outDir 这几项配置

二，类型声明
Ts中有很多可以作为变量的类型，这里要分清楚变量的名字，变量的值，变量的类型这三个概念
let a:string=222;
其中a是变量的名字
string是变量的类型
222是变量的值
有些变量类型和变量值是一样的，例如:null,undefind等，还有变量的值也可以作为类型，例如：
let a:1=1; // 类型为1

//1.基本类型, number，string，Boolean，null，undefined，

let num: number = 11;
let sr: string = "htll";
let ddf: null = null; // null类型的值只能是null
let und: undefined = undefined; // 只能是undefined
//let bool: boolean = null; //

// 2.字面量类型声明
// 类似于常量

let a: 11; // 只能是类型对应的值
a = 11;
//a=12
let b: "hello";

let c: string;

c = "hell";
c = "ddf";
// 字面量作为类型的应用(联合类型)
let selector: "A" | "B";
selector = "A";
selector = "B";

let age: string | number;

// 3.any 表示任意类型,关闭类型检测

let an: any = 11; // 显示any

let ang; // any
ang = 11;

an = "hell";
// 将any类型的数据赋值给其他类型

c = an; //string可以
//c=ang;// 不行
selector = an; // 字面量类型可以是其他值

// 4.unknown 表示未知类

let f: unknown;

f = 10;
f = "abc";
f = true;
let s: string;

f = "helll";
//s=f; // 和any的区别：
// 任意类型可以赋值给它，他不能赋值给任意类型，any是任意类型值可以赋值给它,他也可以赋值给任意类型
// unknown是any的安全类型，如果必须将unknown赋值给其他类型
//1. 复制前类型判断
if (typeof f === "string") {
  s = f;
}
// 2.类型断言，
s = f as string; // 告诉编译器f就是字符串，
s = <string>f; // 第二种写法，注意不是泛型，泛型是 xxx

// 5.void //表示函数没有返回值，never 表示没有值

//let vo: void = null;
function fn(): void {}
// 永远不会返回值，
function fn2(): never {
  throw new Error("出现错误");
}

// void表示函数返回null或者undefined，一般函数即使不return，就是返回undefined
// never表示函数结果完全不返回，例如函数中有抛出错误，那么函数直接回停止退出，
//不返回任何值,就应该使用never

/*总结: 作为类型的有如下:
(1)基本类型:number,string,boolean,symbol,null,undefined,bigint
(2)字面量(就是其他类型的值):11,"str",true,null,undefined,;
(3)联合类型: 基本类型|字面量
(4)any和unknown:any类型可以被任意类型赋值，也可以赋值给任意类型，而unknown不能直接
赋值给别人，两种方法，一先判断类型，第二使用断言类型
(5)void 和 never 这两个用于函数返回值，void表示返回undefined，null，never表示不返回任何数据

注意区分类型声明和赋值：
(1)null和undefined的类型都只有一个值，就是他们本身
(2)any和unknown可以被任意类型赋值
(3)void和never用在函数返回值，可以被undefined赋值
(4)其他基本类型都只能，被基本类型的值赋值

 */

// 6.object类型

let ob: object; // 限制为一个对象
ob = {};
ob = function () {};

let o: {}; // 限制对象的属性

// 限制为具体对象的属性的类型,字面量方式

let obj: {
  name: string; //
  cse?: number; //
  [Name: string]: string | number | undefined;
};
// 不能多不能少
// ?表示对象可选 注意可选对象类型是联合类型  number|undefined
// [propName:string]:any 表示属性名是任意字符串，注意propName是任意的
// [name:type] []表示属性名，name是属性名的值，type是属性名的类型
// 值是任意类型，属性名是string时，值要是其他类型值的并集

// 注意:对象的类型声明，的key是固定的，而下面函数参数的名字是不固定的

obj = { name: "xdf" }; // 赋值

//7.Function
let func: Function; // 和上面的object差不多，只要是是函数即可，范围太广

func = function () {};
func = new Function();

// 字面量形式限制函数
// 设置函数结构的类型声明
let funct: (a: number, b: number) => number;
funct = function (n1: number, n2: number): number {
  // 赋值
  return 22;
};

// 8.array 两种声明方式

// 基本类型数组声明
let ar: string[];

ar = ["a", "b"]; // 数组赋值

//泛型数组
let arr: Array<number>;

// 9.元组，就是固定长度的数组
let tu: [string, string];

tu = ["eer", "dff"]; // 个数类型固定

// 10.枚举 enum 几个值之间选

// let en: { name: string; gender: 0 | 1 };
// en = {
//   name: "dfsdf",
//   gender: 1, // 用0一代替男女
// };

enum Gender {
  Male,
  Female,
}
let en: { name: string; gender: Gender };
en = {
  name: "dfsdf",
  gender: Gender.Male, // 直接获得字符串，和联合类型类似
};

if (en.gender === Gender.Male) {
  console.log("枚举成功");
}

// 10 . 联合类型（或）和&（并且）
let lh: string | number; // 类型为string或者是number
let lh1: 11 | "sdfdd"; // 字面量类型

let lh2: string & number; // 即使number又是string，不可能
let lh3: { name: string } & { age: number };

//lh3={name:"dfd"} // 对象必须包含两种属性

// 11.类型别名  为类型起名字
let K: 1 | 2 | 3 | 4 | 5; //如果k的类型要服用，则很麻烦

type rand = 1 | 2 | 3 | 4 | 5;

// 简化类型名字，特别是联合类型，或者函数类型，对象类型
let KK: rand;
KK = 1;