TypeScript 详解
一.TS基础概念
1.什么是TS
a.对比原理
它是 JS 的一个超集，在原有的语法基础上，添加了可选静态类型和基于类的面相对象编程
-
面相项目：
TS - 面相解决大型项目中，架构以及代码，共建等复杂维护场景
JS - 用于面相简单页面场景，脚本化语言 -
自主检测：
TS - 编译期间，主动发现并且纠正错误
JS - 运行时报错 -
类型检测：
TS - 弱类型，支持动态，静态的类型检测
JS - 弱类型，无类型选项检测 -
运行流程
TS - 依赖编译
=>.ts —> .js —> 浏览器
b.安装运行
npm install -g typescript
tsc -v
2.TS的基础类型与写法
- boolean | string | number | array | null | undefined
//es
let isEnabled = true
let classs = 'baidu'
let classNum = 2
let u = undefined
let n = null
let classArr = ['basic']
//ts
let isEnabled:boolean = true
let classs:string = 'baidu'
let classNum:number = 2
let u:undefined = undefined
let n:null = null
let classArr:Array<string> = ['basic']
- tuple - 元祖
let tupleType: [string, boolean]
tupleType = ['baidu', true]
- enum - 枚举
//数字类枚举 - 可无赋值，默认从零开始，依次递增
enum Score {
BAD, //0
NG, //1
GOOD, //2
PERFECT //3
}
let score: Score = Score.BAD
//字符串类型枚举
enum Score {
BAD = 'BAD',
NG = 'NG',
GOOD = 'GOOD',
PERFECT = 'PERFECT'
}
//反向映射
enum Score {
BAD, //0
NG, //1
GOOD,
PERFECT
}
let scoName = Score[0] //BAD
let scoVal = Score['BAD'] //0
//异构
enum Enum {
A, // 0
B, // 1
C = 'C', // C
D = 'D' // D
E = 6, // 6
F, // 7
}
- any | unknown | void
// any - 绕过所有类型检查 => 类型检查和编译筛查全部失效
let anyValue: any = 'anyValue'
anyValue = false
anyValue = 123
let value1:number = anyValue
// unknown - 仅仅是绕过赋值检查 => 禁止更改传递
let unknownValue:unknown
unknownValue = true
unknownValue = 123
unknownValue = 'unknownValue'
let value1:unknown = unknownValue //OK
let value1:boolean = unknownValue //NOK
let value3:any = unknownValue //OK
// void - 声明函数返回值为空
function voidFunction():void{
console.log("no return")
}
//never - 用不返回
function error(msg: string):never {
throw new Error(msg)
}
- Object | object | { } - 对象
interface Object {
constructor :Function;
toString():string;
hasOwnProperty(v: PropertyKey): boolean;
}
interface ObjectConstructor {
new(value?: any): Object;
}
//Object 包含原始类型
function course(courseName: Object){
// ...
}
course('baidu') //ok
//object
function course(courseName: object){
// ...
}
course('baidu') //error
// {} - 描述一个没有成员的对象
const obj = {}
obj.prop = 'baidu' // Error
二.接口 - interface
- 对行为的抽象，具体行为由类来实现
interface Class {
name: string;
time: number;
}
let baidu: Class = {
name: 'ts',
time: 18
}
//只读 & 任意
interface Class {
readonly name: string;
time: number;
[propName: string]: any;
}
三.交叉类型 - &
interface A { x: D }
interface B { x: E }
interface C { x: F }
interface D { d: boolean }
interface E { d: string }
interface F { d: number }
type ABC = A & B & C
let abc: ABC = {
x: {
d: false,
e: 'class',
f: 5
}
}
//合并冲突
interface A {
c: string;
d: string;
}
interface B {
c: number;
e: string;
}
type AB = A & B;
let ab: AB = {
d: 'baidu',
e: 'baidu'
}
//合并 => c: never
四. 断言 - 类型的中间执行时声明，转换（过程中和编译器的交流）
//尖括号形式
let anyValue: any = 'baidu';
let anyLength: number = (<string>anyValue).length; //阶段性类型
// as声明
let anyValue: any = 'baidu';
let anyLength: number = (anyValue as string).length;
五.类型守卫 - 保障在语法规定范围做进一步确认业务逻辑
interface Teacher {
name: string;
courses: string[];
}
interface Student {
name: string;
startTime: Date;
}
type Class = Teacher | Student;
// in - 定义属性场景下内容确定
function startCourse(cls: Class){
if('courses' in cls){
//
}
if('startTime' in cls){
//
}
}
// typeof | instanceof - 类型分类场景下的身份确认
function class(name: string, score: string | number){
if(typeof score === 'number'){
//
}
if(typeof score === 'string'){
//
}
}
六. TS 进阶
1.泛型
- 让模块可以支持多种类型的数据 - 让类型和值一样，可以被传递赋值
function startClass<T, U>(name: T, score: U): U{
return name + score
}
function startClass<T, U>(name: T, score: U): String {
return `${name}${score}`
}
function startClass<T, U>(name: T, score: U): String {
return (name + String(score)) as any as T
}
2. 装饰器
{
"compilerOptions": {
"experimentalDecorators":true
}
}
function baidu(target: Function): void{
target.prototype.startClass = function ():void {
//拓展方法
}
}
@baidu
class Class {
constructor (){
//业务逻辑
}
}
//属性装饰器 | 方法
function nameWrapper(target: any, key: string){
//属性加工
}
TS的原理
编译 => 运行
