TypeScript基础整理_ts中的接口大写还是小写-CSDN博客

本文链接：https://blog.csdn.net/tby_pr/article/details/121739966

TypeScript 由微软开发的自由和开源的编程语言,它可以在任何任何操作系统上运行。TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改

2.1、开发环境

typescript目录浏览器还不能支持，需要把编写好的ts编译转为js，编译的环境为nodejs环境。

下载nodejs nvm
切换npm镜像源 nrm
使用npm全局安装typescript

npm i -g typescript

// 检查是否安装成功查看到版本，表示安装成功

tsc -v / 局部安装 npx tsc -v

创建一个以.ts扩展名文件

使用tsc命令对ts文件进行编译

// 使用命令行工具，进入到对应的文件目录中，执行如下命令

tsc app.ts

三、基本类型

类型声明

类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量（参数、形参）的类型，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错，类型声明给变量设置了类型，使得变量只能存储某种类型的值。

ts中的类型名称一定小写

自动类型(类型推论)耗性能

当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型，工作中建议还是手动指明变量类型，尽量少的去让TS自动判断类型。

3.1、布尔值

let isDone: boolean = false;

3.2、数字

let decLiteral: number = 6; // 十进制

let hexLiteral: number = 0xf00d; // 十六进制

let binaryLiteral: number = 0b1010; // 二进制

let octalLiteral: number = 0o744; // 八进制

3.3、字符串

let name: string = "bob"

let username:string = `aaabbbccc`

3.4、any和 unknown

any任意类型, 类型安全的any类型

let app:any = 66

let app:unknown = 66

3.5、void

它表示没有任何类型, 声明一个void类型的变量没有什么大用，

因为你只能为它赋予undefined和null,

一般多用于函数返回值指定

let unusable: void = undefined;
function warnUser(): void {
    console.log("This is my warning message");
}

3.6、null 和 undefined

undefined和null两者各自有自己的类型分别叫做undefined和null。和 void相似，它们的本身的类型用处不是很大

let u: undefined = undefined;

let n: null = null;

3.7、never

never类型表示的是那些永不存在的值的类型

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

在ts里有类型检查,所以永远都达不到else

3.8、字面量

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

let color: 'red' | 'blue' | 'green';
let num: 1 | 2 | 3;

3.9、枚举(enum) // 用的比较多

使用枚举类型可以为一组数值赋予友好的名字

3.10、object

let obj: object = {}
let obj:{id:number,name?:string}  // ?可选
// id是必须要有的，后面可以任意key，key为字符串，值为任意类型
let obj:{id:number,[props:string]:any}
// 给函数参数定义类型和返回值定义类型
type fnType = {(a:number,b:number):number }
const fn:fnType = (a:number,b:number):number=>a+b

3.11、array

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

不确定长度想随便写用any

3.12、元组(tuple) // 不怎么用

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string和number类型的元组。

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

3.13、自定义类型 // ts中用的最多的

3.14、联合类型 // 用的挺多的

给变量指定多个类型

3.15、类型断言

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

这种写法不常用,工作不会这样写

四、ts编译配置

网址：编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集

tsc编译是可以通过tsconfig.json来进行自定义配置。

tsc --init 它会自动生成一个tsconfig.json文件

在项目根目录下面创建名称为tsconfig.json文件

配置常用的配置选项

{
    // 用来指定哪些ts文件需要被编译
    // src目录下面的任意目录和任意文件
    "include":[
      "./src/**/*"
    ],   
    // 编译器的选项
    "compilerOptions":{
      // 用户指定ts被编译为es的版本 默认为转为es3 esnext最新版本
      "target":"es5",
      // 指定要使用的模块化规范
      "module":"es6",
      // 用户来指定编译后文件所在的目录
      "outDir":"./dist",
      // 是否对js文件进行编译，默认是false
      "allowJs": true,
      // 是否检查js代码，是否符合语法规范，默认false
      "checkJs": true,
      // 当有错误时不生成编译后的文件 true有错就不生成
      "noEmitOnError":true,
      // ------------------------------------------------
      
      // 开启严格检查
      "strict": true
    }
}

配置好配置文件后，就可以执行

// 实时编译，只要文件有修改就会自动进行编译，不在需要修改后手动执行

tsc -w

五、Typescript类

TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如类、接口等。

TS中属性具有三种修饰符

public（默认值），可以在本类、子类和对象实例中读取和修改

protected ，可以在本类、子类中读取和修改

private ，可以在本类中读取和修改

class 类名 {
属性名: 类型;
// 静态属性
static 属性名:类型;
// 只读属性
readonly 属性名:类型 = 值;

    // 构造方法
    constructor(参数: 类型){
        this.属性名 = 参数;
    }
    // 实例方法
    方法名(){
        ....
    }
}

5.5、接口

接口主要负责定义一个类的结构，类要实现此接口后，对类只有包含接口中定义的所有属性和方法时才能定义成功。接口他可以称为规范。

类接口

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

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

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

函数接口

// 定义接口
interface searchInterface {
  (kw: string, page?: number): string[]
}

// 使用
const searchFn: searchInterface = (kw:string):string[] => ['aaa', 'bbb']