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
  }
}

抽象类

抽象类是被其他类所继承的类，它只是被其他类所继承不能使用创建实例

// 抽象类
abstract class Animal{
	//抽象方法
  abstract run(): void;
  bark(){
      console.log('动物在叫~');
  }
}

class Dog extends Animals{
  run(){
      console.log('狗在跑~');
  }
}

接口（也可以称为规范）

接口主要负责定义一个类的结构，接口可以限制一个对象的接口：对象必须包含接口中定义的所有属性和方法时匹配的接口；

interface Person{
   name: string;
   sayHello():void;
}

class Student implements Person{
	name:string
   constructor(public name: string) {
   		this.name = name
   }

   sayHello() {
       console.log('大家好，我是'+this.name);
   }
}

属性的封装

默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

  • 静态属性（static）：
    声明为static的属性或方法不再属于实例，而是属于类的属性；
  • 只读属性（readonly）：
    如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
  • TS中属性具有三种修饰符：
    public（默认值），可以在类、子类和对象中修改
    protected ，可以在类、子类中修改
    private ，可以在类中修改

泛型

定义一个函数或类时，某些情况下无法确定其中要使用的类型（返回值、参数、属性的具体类型不能确定）；

泛型函数

创建泛型函数
function test<T>(arg: T): T{
    return arg;
}
使用泛型函数

方式一（直接使用）：

test(10)

使用 TS 自动使用时，可以直接传递参数，有时可以编译器无法自动推断时间，但还需要使用下面的方式
方式二（指定类型）：

test<number>(10)
函数中声明多个泛型
function test<T, K>(a: T, b: K): K{
  return b;
}

test<number, string>(10, "hello");

泛型类

class MyClass<T>{
  prop: T;

  constructor(prop: T){
      this.prop = prop;
  }
}

泛型继承

interface MyInter{
  length: number;
}

function test<T extends MyInter>(arg: T): number{
  return arg.length;
}

使用T扩展MyInter表示泛型T必须是MyInter的子类，触发非要使用接口类和抽象类同样适用；