BasicKonwlodgeOfTypescript

  1. TS基础知识
    1. 1. 为什么要使用ts
    2. 2. ts基本类型
      1. number,string,boolean
      2. Object,Array,tuple
      3. unknown,never
      4. Enum,union,literal,any
  2. 3. ts的编译以及ts_config的应用
  3. 4.ts的模块语法
  4. 5. oop

TS基础知识

此文章主要用于快速复习ts使用,作者在之前有一段时间的前端开发经历,因此基础概念的涉及可能会少很多

1. 为什么要使用ts

ts本身其实只不过是一种语法的超类而已,但是类比一下就相当于司机的安全带

换句话说,ts实现的是"提前检测"的可能性,用ts检测出的错误不一定会像抛出错误那样影响运行,但是可以帮助开发者检测自己的代码是否存在问题,换句话说,ts可以认为是js上的一种规范

  • ts: 提供during development的错误检查
  • js: 提供runtime的错误检查

2. ts基本类型

ts中的类型大致区分为 * 基本类型:number,string,boolean * 其他类型(乱七八糟的啥都有)

number,string,boolean

这三种类型构成了ts中的基本类型,声明形式即为简单的:

1
const a:number;

Object,Array,tuple

对于object来说,需要对内部的key进行一一的类型声明

1
2
3
4
5
const o:{
key:string
} = {
key:"this is a string"
}
Array和js不太一样,js中允许我们在数组中插入不同的类型,比如[1,"12",true] 但是在ts中,涉及到类型的声明,不允许我们这样做,因为我们需要指明数组内部的元素是什么
1
const arr:string[];
Tuple并不是js中的东西,而是ts添加到js上的,本质上是一个"长度固定,而且任何位置的变量数值都声明的数组"
1
const arr:[string,number];
如图所示的情况应该是比较明显的一种了

unknown,never

unknown是ts中的一种顶级类型,通常用于标记"暂时无法确定类型"的变量,特点是使用该类型变量之前,必须进行判断和断言

1
2
3
4
5
6
7
8
9
let userInput: unknown;

userInput = 5;

// 需要进行类型检查或类型断言
if (typeof userInput === 'string') {
//经过断言以后,才能在内部使用
}

never代表的是一种"绝对不会到达"的情况,通常用于无法返回的代码,以及错误抛出

1
2
3
4
5
6
7
8
9
10
11
//抛出错误
function throwError(message: string): never {
throw new Error(message);
}
//永远不会返回
function infiniteLoop(): never {
while (true) {
// 无限循环,永远不会返回
}
}

Enum,union,literal,any

enum允许创建一组带名字,带数值的常量,底层的js原理其实是一个双向的数组 如果不加默认数值,则会按照0.1.2....,如图所示

1
2
3
4
5
6
7
8
enum Color {
Red,
Green,
Blue,
}

let myColor: Color = Color.Green;
console.log(myColor); // 输出 1,因为 Green 对应的值是 1
enum也允许单独创建数值
1
2
3
4
5
6
enum Color {
Red="dididi",
}

let myColor: Color = Color.red;
console.log(myColor); // 输出 dididi,因为 Green 对应的值是 dididi

union其实就是联合类型

1
const a:number|string=1;
为了配合使用,也经常使用类型别名type来实现
1
type x=number|string

literal身为字面类型,其实用法和union差不多

1
const name:"张三"|"李四";

any则可以代表任何类型,自由度比较高,这里不加解释了

3. ts的编译以及ts_config的应用

一般来说,我们可以使用指令

1
tsc target.ts
来实现将ts代码编译为ts的指令,虽然这个过程中存在tsc-node等等工具实现一键执行,不过接下来会直接使用tsc指令

但是对于一整个项目来说,一个一个编译显然是不现实的

首先将项目初始化为ts项目

1
tsc init

根目录文件下即可出现tsconfig.json文件,该文件即为ts项目的基本控制文件,以下为基本配置

(长期更新)

  • exclude:无需进行编译的文件
  • include:需要编译的文件
  • target:对标的js版本(默认es3)
  • module:使用的语法(默认communJS)
  • lip:核心库
  • rootRir:源文件
  • outDir:编译以后的地址

(长期更新)

布置好tsc以后,就可以直接使用指令tsc,完成整个项目的编译

4.ts的模块语法

ts默认的模块语法为es6,但是也可以在tsconfig.json中修改为communJS

es6的模块化语法

1
2
3
4
5
6
7
//默认只抛出一个东西的时候,使用export default
export default xxx;

//当抛出多个物体的时候,使用export
export a
export b
export c

communJS的语法为

1
module.export=xxx

另外这里需要补充一点,在communJS语法中存在两种导出方式exports和module.exports是不一样的,对于每一个文件来说,导出格式都是一个对象,整个对象可以使用module.exports直接指定,而export是用来指定该对象的属性的

5. oop

在ts中同样实现了关于类,接口,抽象类等等面向对象编程的内容

接口

1
2
3
4
5
6
interface a{
run(a?:any):void;
}

class A implements a {
}

抽象类和类

1
2
3
4
5
6
7
8
9
10
11
12
13
abstract class a{
// 抽象方法
run(a?:any):void;
// 抽象逻辑
walk():void{
//内部逻辑
}
}

class A implements a {

}


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 xranudvilas@gmail.com

💰

×

Help us with donation