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
5const o:{
key:string
} = {
key:"this is a string"
}1
const arr:string[];
1
const arr:[string,number];
unknown,never
unknown是ts中的一种顶级类型,通常用于标记"暂时无法确定类型"的变量,特点是使用该类型变量之前,必须进行判断和断言 1
2
3
4
5
6
7
8
9let 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
8enum Color {
Red,
Green,
Blue,
}
let myColor: Color = Color.Green;
console.log(myColor); // 输出 1,因为 Green 对应的值是 11
2
3
4
5
6enum Color {
Red="dididi",
}
let myColor: Color = Color.red;
console.log(myColor); // 输出 dididi,因为 Green 对应的值是 dididi
union其实就是联合类型 1
const a:number|string=1;
1
type x=number|string
literal身为字面类型,其实用法和union差不多
1 | const name:"张三"|"李四"; |
any则可以代表任何类型,自由度比较高,这里不加解释了
3. ts的编译以及ts_config的应用
一般来说,我们可以使用指令 1
tsc target.ts
但是对于一整个项目来说,一个一个编译显然是不现实的
首先将项目初始化为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
6interface a{
run(a?:any):void;
}
class A implements a {
}
抽象类和类 1
2
3
4
5
6
7
8
9
10
11
12
13abstract class a{
// 抽象方法
run(a?:any):void;
// 抽象逻辑
walk():void{
//内部逻辑
}
}
class A implements a {
}
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 xranudvilas@gmail.com