TypeScript课程笔记

bszbhbds
75 阅读4分钟

TS（TypeScript）

1.为什么要学习TS

01_TSvsJS

TSJS
JavaScript的超集，用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋予成不同类型

不仅仅是一种语言，而且是开发生产力的工具

TypeScript Playground: Ts到Js的在线编译 www.typescriptlang.org/

Awesome Typescript:TS开源教程及应用 github.com/dzharii/awe…

2.TS的基础

02_1.基础类型

1、boolean、number（包括正数、浮点数、负数等等）、string

2、枚举enum(TS特有)

enum Fruit{
apple,//0
organge,//1
banana,//2
}
//数值枚举，自动递增
enum Fruit2{
apple2 =1,//1
orange2,//2
banana2 =100,//100
watermelon2,//101
​
}

var Fruit;
(function (Fruit) {
    Fruit[Fruit["apple"] = 0] = "apple";
    Fruit[Fruit["organge"] = 1] = "organge";
    Fruit[Fruit["banana"] = 2] = "banana";
})(Fruit || (Fruit = {}));
var Fruit2;
(function (Fruit2) {
    Fruit2[Fruit2["apple2"] = 1] = "apple2";
    Fruit2[Fruit2["orange2"] = 2] = "orange2";
    Fruit2[Fruit2["banana2"] = 100] = "banana2";
    Fruit2[Fruit2["watermelon2"] = 101] = "watermelon2";
})(Fruit2 || (Fruit2 = {}));
​

3、any、unknown、void

any：可赋值与反向赋值

unknown：any的替代，仅允许被赋值，不能直接赋值给其他变量

4、never

永远不存在值的类型(防御性编程使用)

function test(x:string|number):boolean{
    if (typeof x==='string'){
        return true;
    }else if(typeof x==='number'){
        return false;
    }
    return throwError('参数格式不对')
}
​
function throwError(message:string):never{
    throw new Error(message)
}

5、数组类型[]

6、元组类型tuple(特殊数组)

显示标注数组中每个元素的类型

02_2、TS函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数

输出参数：输出可以自动化推断、没有返回值时，默认是void类型

函数重载：名称相同但是参数不同、可以通过重载支持多种类型

function add(x:number[]):number
function add(x:string[]):string
function add(x:any[]):any{
if(typeof x[0] ==='string'){
return x.join()
}
if(typeof x[0] ==='number'){
return x.reduce((acc.cur)=> acc+cur)
}
}

02_3、interface

定义：接口是为了定义对象类型

特点：

  • 可选属性：？
  • 只读属性：readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结：接口非常灵活 duck typing

interface Person{
name:string
age:number
}
​
const p1:Person = {
name:'10';
age:18
}
p1.

interface RandomKey{
[propName:string]:string
}
​
const obj:RanmdomKey = {
a:'hello'
b:'world'
c:'typescript'
}

02_4、类

定义：写法和JS差不多、增加了一些定义

特点：

  • 增加了public、private、protected

  • 抽象类

    • 只能被继承、不能被实例化
    • 作为基类、抽象方法必须被子类实现

  • interface约束类、使用implements关键字

3.TS进阶

03_1、高级类型

1.联合类型 |

let num:number |string
num = 8
num ='eight'

2.交叉类型&

interface Person{
name:string
age:name
}
type Stduent =Person & {grade:number}
​
const stu:Student
stu.

3.断言类型

推荐用as

function getlength(arg: number| string):number{
    const str=arg as.string
    if(str.length){
        return str.length
    }else{
        const number =arg as number
        return number.tostring().length
    }
}

4.类型别名(type VS interface)

  • 定义：给类型起个别名

  • 相同点

    1. 都可以定义对象或函数
    2. 都允许继承

  • 差异点

    1. interface是TS用来定义对象，type是用来定义别名的
    2. type可以定义基本类型、interface不行
    3. interface可以重复声明、type不可以

组合和交叉类型用type，接口和implement用interface

屏幕截图 2023-05-09 232029.png

03_2、泛型

应用场景

//定义一个print函数，这个函数的功能是把传入的参数打印出来。再返回这个参数。
function print(arg:string):string{
console.log(arg)
return arg
}//传入类型是string=，返回类型也是string
​
function print(arg:string | number):string | number{
console.log(arg)
return arg
}//传入类型是number和string。传入也是
​
function print(arg:any):any{
console.log(arg)
return arg
}//传入和打印任意类型
​
function print<T>(arg:T)T{
console.log（arg)
return arg
}//泛型
​

基本定义

  1. 泛型的语法是<>里面写类型参数，一般用T表示

  2. 使用时有两种指定类型：

    1. 定义要使用的类型
    2. 通过TS类型推断，自动推导类型

  3. 泛型的作用是临时占位，之后通过传来的类型进行推导

基础操作符

  • typeof获取类型
interface Person{
name:string
age:number
}
const sem: Person = {name:"xxx".age:30}
​
type Sem =Person
type Sem =typeof sem://type Sem = Person
  • keyof获取所有键
interface Person{
name:string;
age:number;
}
type K1=keyof Person;//"name"|"age"
type K2=keyof Person[];//"length"|"toString"|"pop"|"push"|"concat"|"join"
  • in遍历枚举类型
type Keys ="a"|"b"|"c"
​
type Obj = {
[p in Keys]:any
}//->{a:any,b:any.c:any}
  • T[K]索引访问
interface IPerson{
name；string;
age:number;
}
let type1: IPerson ['name']//string
let type2: IPerson ['age']//number
  • extends:泛型约束
interface Lengthwise{
length:number
}
function loggingIdentity<T extends Lengthwise>(arg:T): T {
return arg;
}
​
loggingIdentity({value:3})
loggingIdentity({length:5})

常用工具类型

  • Partial<T>:将类型属性变为可选
type Partial<T> = {
[P in keyof T]?: T[P]
};
  • Required<T> :将类型属性变为必选
type Required <T>= {
[P in keyof T]-?:T[P]
};
  • Readonly<T>：将类型属性变为只读
type Reanonly <T> = {
reanonly [P in keyof T]:T[P]
};
  • Pick、Record

4.TS实战

04_1、声明文件

  • declare：三方库需要类型声明文件
  • .d.ts：声明文件定义
  • @type:三方库TS类型包
  • tsconfig.json:定义TS的配置

04_2、泛型约束后端接口类型

屏幕截图 2023-05-09 231735.png

avatar
文章
阅读
粉丝