typescript入门笔记（个人用）

TypeScript中的基本类型

TypeScript中的基本类型：

• 类型声明

  • 类型声明是TS非常重要的一个特点；

  • 通过类型声明可以指定TS中变量（参数、形参）的类型；

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；

  • 语法：

    • let 变量: 类型;
      
      let 变量: 类型 = 值;
      
      function fn(参数: 类型, 参数: 类型): 类型{
                
          ...
      }
      

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

• 类型：

  类型	例子	描述
  number	1, -33, 2.5	任意数字
  string	‘hi’, “hi”, hi	任意字符串
  boolean	true、false	布尔值true或false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或undefined）
  never	没有值	不能是任何值
  object（不常用）	{name:‘孙悟空’}	任意的JS对象
  array	[1,2,3]	任意JS数组
  tuple	[4,5]	元素，TS新增类型，固定长度数组
  enum	enum{A, B}	枚举，TS中新增类型

• number

  • let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;
    

• boolean

  • let isDone: boolean = false;
    

• string

  • let color: string = "blue";
    color = 'red';
    
    let fullName: string = `Bob Bobbington`;
    let age: number = 37;
    let sentence: string = `Hello, my name is ${
              fullName}. I'll be ${
              age + 1} years old next month.`;
    

• 字面量

  • 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

  • let color: 'red' | 'blue' | 'black';
    let num: 1 | 2 | 3 | 4 | 5;
    

• any

  • let d: any = 4;
    d = 'hello';
    d = true;
    

• unknown

  • let notSure: unknown = 4;
    notSure = 'hello';
    

• void

  • let unusable: void = undefined;
    

• never

  • function error(message: string): never {
            
      throw new Error(message);
    }
    

• object（没啥用）

  • let obj: object = {
            };
    

• array

  • let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    

• tuple

  • let x: [string, number];
    x = ["hello", 10]; 
    

• enum

  • enum Color {
            
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
            
      Red = 1,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
            
      Red = 1,
      Green = 2,
      Blue = 4,
    }
    let c: Color = Color.Green;
    

• 类型断言

  • 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

    • 第一种

      • let someValue: unknown = "this is a string";
        let strLength: number = (someValue as string).length;
        

    • 第二种

      • let someValue: unknown = "this is a string";
        let strLength: number = (<string>someValue).length;
        

编译选项

先在根目录下创建一个tsconfig.json文件

{
    
  /* "include" 用来指定哪些ts文件需要被编译 默认：当前路径下所有文件, **\* 路径：** 表示任意目录 * 表示任意文件 */
  "include": [
    "./src/**/*"
  ],
  /* "exclude" 不需要被编译的文件目录 默认值： ["node_modules", "bower_components", "jspm_packages", "./dist"] */
  "exclude": [
    "./src/exclude/**/*"
  ],




  /* 被继承的配置文件 例如："extends": "。/configs/base", */
  // "extends": "",
  /* 指定被编译文件的列表，只有需要编译的文件少时才会用到 */
  // "files": [],
  /* compilerOptions 编译器的选项 */
  "compilerOptions": {
    
    // target 用来指定ts被编译为的ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', ...
    "target": "es2015",
    // module 指定要使用的模块化的规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', ...
    "module": "es2015",
    // lib用来指定项目中要使用的库（一般不用动）
    // 在node项目中可以声明用到的库，在前端中可以声明dom(浏览器中的内置库，但是在node中是不需要的！)
    // 默认就是在浏览器中的运行环境！
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020',
    // 'esnext', 'dom', 'dom.iterable', ...
    "lib": [
      "es6",
      "dom"
    ],
    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",
    // 将代码合并为一个文件
    // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
    "outFile": "./dist/app.js"
    // 是否对js文件进行编译，默认是false
    "allowJs": true,
    // 是否检查js代码是否符合语法规范，默认是false
    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 不生成编译后的文件
    // 仅用TS检查语法
    "noEmit": false,
    // 当有错误时不生成编译后的文件
    "noEmitOnError": true,
    /* 语法检查属性 */
    // 所有严格检查的总开关
    "strict": true,
    // 用来设置编译后的文件是否使用严格模式，默认false
    // 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加`'use strict'`
    "alwaysStrict": true,
    // 不允许隐式的any类型
    "noImplicitAny": true,
    // 不允许不明确类型的this
    "noImplicitThis": true,
    // 严格的检查空值
    "strictNullChecks": true
  }
}