bunny笔记|Typescript基础理解与应用

作者: 一只小小小bunny | 来源:发表于2022-04-02 10:29 被阅读0次

bunny笔记|Typescript基础理解与应用
协变与逆变
bunny笔记| JS基础入门到精通[02]
bunny笔记|Typescript实现video组件封装
Redis深度历险笔记
Typescript
Typescript入门之：接口
TypeScript基础入门之装饰器(二)
Typescript 学习笔记六：接口
TypeScript基础入门之模块解析(三)

ts.png

01-ts环境

强类型语言
弱类型语言

动态类型
静态类型

配置环境
新建文件夹，vscode打开文件夹，打开终端
初始化(默认)=>生成一个package.json文件

npm init -y

全局安装typescript （好处：在任意地方都可以用tsc，也可以不全局安装）
如果安装报错怎么办？

npm i typescript -g

查看帮助信息

tsc -h

创建配置项tsc =>生成tsconfig.json文件

tsc --init

新建一个src文件夹目录，再建一个index.ts文件
编译ts文件，编译生成一个js文件

tsc ./src/index.ts

安装webpack打包工具

npm i webpack webpack-cli webpack-dev-server -d

//要区分开发环境和生产环境，两种环境的配置是不同的

安装ts-loader

npm i ts-loader typescript -d

安装html-webpack-plugin

npm i html-webpack-plugin -d

编写模板文件index.html

build一般是生产环境打包后会生成dist文件

npm run build

04-ts类型

Boolean

let a:boolean = false;

Array

let arr:number[]=[1,2]

//函数

let add =(a:number.y:number)=>x+y；
let com:(x:number,y:number) =>number;
com = (a,b) =>a+b;

//对象

let obj:{x:number.y:number}={x:1,y:2}
obj.x=3;

//symbol

let s1:symbol=Symbik();
let s2=Symbol();
console.log(s1===s2);

//undefined

let un:undefined=undefined;

//void 。没有任何返回值（void可以让任意值返回为undifined）

let npReturn=()=>{};

//any

let x

//never 永远不会有返回值或者死循环

let error = ()=>{
    throw new Error('error')
}；

let endLess =()=>{
    while（true）{
        
    }
}

//枚举类型：一组有名字的常量集合，反向映射

//数字枚举

enum Role{
    Reporter,
    Owner,
    Guest
}
console.log(Role.Owner)

//字符串枚举

enmu Answer{
    Success="恭喜成功了"，
    Fail=“抱歉失败了”
    y
}

//异构枚举
//枚举成员

06 ts接口

//接口
interface List{
    id:number,
    name:string
}

//接口
interface Result{
    data:List[]
}

//渲染函数
function render(result:Result){
    result.data.forEach((value)=>{
        console.log(value.id,value.name)
    })
}

//假设从后端接收的数据
let reeult ={
    data:[
    //如果后端传入字段意外的字段 不会报错的
    {id:1,name:'A',sex:'male'},
    {id:2,name:'B'}
    ]
}

//传入的对象满足接口的必要条件就是允许的，多余的字段看可以通过ts的检查
render(result);

//特使
//如果直接传入字面量，ts会对多余的字面量进行检查
render({
     data:[
    {id:1,name:'A',sex:'male'},//sex:'male'异常
    {id:2,name:'B'}
    ]
})

//结果异常的方法
(1)把对象字面量传给一个变量，如上：
(2) 适应断言 render<result>{
   data:[
    {id:1,name:'A',sex:'male'},
    {id:2,name:'B'}
    ]
}
//不建议，react不支持
(3)声明接口使用可选模式，声明变量后加？号

//数字索引
用任意的数字去索引StingArray都会得到一个string

interface StingArray{
    [index:number]:string
}

//字符串索引接口

interface Name{
 //用任意的sting去索引Name只能返回sting
    <!--[x:sting]:sting；-->
 //也可以用任意的数字索引Name
 [x:sting]:any；
 [z:number]:string
}

//对象类型接口三种方式

//(1)
let add:(x:number,y:number)=>number

//（2）
interface add {
    (x:number,y:number):number
}

// (3)
type Add=((x:number,y:number)=>number;
let add:Add=(a,b) =>a+b
interface Lib{
    ():void;
    version:string;
    doSomething():void;
}

function getLib(){
    let lib:Lib =(()=>{}) as lib;
    lib.version ='1.0';
    lib.doSomething =() =>{};
    return lib;
}
let lib1 = getLib();
liba();
lib1.doSomething();

let lib2 =getLib();

TS的类包过了es6的类

class Dog{
    constructor(name：string){
        this.name=name;
    }
   public name:string ='dog';//公有成员
    run(){}
    private pri(){}//私有成员
    protected pro(){}//受保护状态，只能在子类中调用
    readonly legs:number = 4;//只读状态
    static food:string='bones' //静态声明
}
console.log(Dog.prototype);
//实例
let dog =new Dog('dog');
console.log(dog);
//dog.pri()//私有不能调用
//dog.pro()//不能调用
console.log('Dog.food')
console.log('dog.food')//错误


//继承
class Husk extends Dog{
    constructor(name:sting,color:string){
    super(name);
    this.coloe =color;
    //this.pri（）//私有不能调用
    this.pro();
    
    }
    color:string;
}

//可以被继承
 console.log('Husk.food')

11-抽象类与多态

abstct class Animal{
   //方法的复用
   eat(){
       console.log('eat')
   }
   abstract sleep():void;
    
}

//抽象类不能实例化
//let animal = new Animal();

class Dom extend Animal{
    constructor(name:string){
        super();
        this.name-name;

    }
    name:string;
    run(){}
    sleep(){
       console.log('dog sleep')
        }
}

let dog = new Dog("wangwang")


//多态
class Cat extend Aninal(){
    sleep(){
        console.log('Cat sleep')
    }
}

let cat =new Cat();
let animals:Animal[] =[dog,cat]
animals.forEach(i = >{
    i.sleep();
})

class WorkFlow{
    step1(){
        return this;
    }
    step1(){
        return this;
    }
}
new WorkFlow.step1().step2()

class WorkFlow extends WorkFlow{
    next(){
        return this
    }
}
new MyFlow().next().step1().next().step2();

接口只能类的约束公有成员
接口也不能约束构造函数

泛型接口和泛型函数

01- 函数重载、联合类型
02-泛型：不预先确定的素具类型，具体的类型在使用的时候才能确定用的any类型
好处：函数和类可以轻松地支持多种类型。增强程序的扩展性
不必写多条函数重载，冗长的联合声明，增强代码可读性
灵活控制类型之间的约束

泛型类与泛型约束

class Log<T>{
    rub(vslur:T){
        console.log(value)
        return value
    }
}
let log1 = new log<number>
log1.run(1);
let log2 = new log();
log2.run('1');

interface Length{
    length:number
}

function log<T extend Length>(value:T): T{
    console.log(value,value.length)
    return value
}
log([1])
log('123')
log({length:1})

类型检查机制

作用：辅助开发。提高开发效率
类型断言 as 不能乱用

类型推断(做优化)、兼容性(可选参数和剩余参数（1）参数个数（2）参数类型)、保护
交叉类型(&)与联合类型索引类型

映射类型(非同态）

本质是一种预先定义的泛型接口，通常会结合索引类型获取对象的属性和属性值，从而将一个对象映射成我们想要的结构

interface Obj{
    a:string;
    b:number;
    c:boolean;
}
type ReadonlyObj = Readonly<Obj>
type PartialObj = Partial<Obj>;
type PickObj =Pick<Obj,'a'|'b'>

//第二种表达式
type RecordObj = Record<'x'|'y',Obj>

条件类型
分布式条件类型：是在类型的条件下

type TypeName<T> =
   T extends string ? "string";
   T extends number ? "number";
   ...

工程篇

22-29

ES6与commonJS的模块系统(ES6和node的引入/到处的区别，以及不能混用)

使用命名空间(全局，不可在同一个模块中使用,也没必要)

理解声明合并(ts特有，不同的文件中的同名也可合并)

命名空间函数也可以合并命名和枚举也可以合并

interface A{
    x:bnumber;
    // y:bnumber;
    foo(bar:number):number;//5
    foo(bar:'a':number);//2
} 
interface A{
    y:bnumber;
    foo(bar:string):string;//3
    foo(bar:number[]):number[];//4
    foo(bar:'b'):number;//1
}

//合并
let a:A={
    x:1,
    y:1,
    foo(bar:any){
        return bar
    }
}

编写声明文件

npm i jquery

npm - @type/jquery -D

配置tsconfig

编译工具：ts-loader到Bable

Bable与ts-loader的主要区别：
更适合与Babel。使用Babel的转义和缓存
不需要安装额外的插件，就可以把类型检查放在独立进程中进行

30-39

typeScript官方转向ESlint的原因

TSLint执行规则的方式存在一些结构问题，从而影响性能，而修复问题会破坏先有的规则
ESLint的性能更好，并且社区用户通常拥有ESLint的规则配置(比如针对React和Vue的规则)，而不会拥有TSLint的规则配置

代码检查工具：从TSLint到ESLint
使用Jest进行单元测试

创建项目(react)

安装react
安装react的声明文件

npm i react react-dom 

npm i -D @types/react @types/react-dom

处理安装的脚手架为最新版本
创建一个名为ts-react-app的react项目文件
npm运行

npx create-react-app ts-react-app --typescript

npm start

创建组件
Hello.tsx文件

import React from 'react';
import { Button } from 'antd';

interface Greeting {
    name: string;
    firstName: string;
    lastName: string;
}

const Hello = (props: Greeting) => <Button>Hello {props.name}</Button>

// const Hello: React.FC<Greeting> = ({
//     name,
//     firstName,
//     lastName,
//     children
// }) => <Button>Hello {name}</Button>

Hello.defaultProps = {
    firstName: '',
    lastName: ''
}

export default Hello;

-react的高阶组件(能力强大应用广泛)与Hooks(react的未来)

事件处理和数据请求
setupProxy.js文件

列表渲染与路由
router目录下的index.ts

Redux与类型
redux目录下的rootReducer.ts等

服务器端环境配置

(在nodejs环境中使用ts)
全局安装express
然后用express创建一个项目
将js文件改为ts（入口文件引入也要改）

（1）npm i -g express-generator

（2）express ts-express

（3）cd 进入生成的新的文件 再npm i  再安装ts

列表的CRUD

数据库的操作显示数据库的信息

mysql -u root -p

40-47

导出Excel
1.导出文件

搭建Vue开发环境

在vue中使用ts

npm i vue

npm i -D vue-loader vue-template-compiler css-loader

2.在webpack中修改module的rules配置

组件封装

组件发布

npm login

npm - vue-employee-query@1.0.2

共存策略
1.实现代码迁移不影响原有的代码的基础上新增ts代码编程

宽松策略
1.重命名

npm - shelljs @types/shelljs ts-node -D

新建rename.JS.ts

import * as shelljs from 'shelljs';

shelljs.find('src')
.filter(file => file.match(/\.jsx?$/))
.forEach(file => {
   let newName = file.replace(/\.j(sx?)$/, '.t$1');
   shelljs.mv(file, newName);
});

2.修改规则 tsconfig.json文件

严格策略
1，修改 tsconfig.json文件内配置规则

结束总结

基础篇
类型基本概念
语言特性
类型检查机制

工程篇
工程配置
开发生态演化过程

实战篇
主流框架(react、vue)实践
迁移策略

1.世界充满了不确定性
2.不必关注某一种语言或者工具的兴衰，要看前端发展的趋势
3.大势：JavaScript一直在向语言象线的右上角挣扎
4.关键：学习类型思维，补齐前端短板
5.TypeScript -> 标准？ -> ES标准

ts的优势：
提升代码质量
增强代码可维护性
提升开发效率
重塑类型思维等

成本：
思维转换
对接现有开发生态
项目迁移
接口、声明文件的维护等

bunny笔记|Typescript基础理解与应用
01-ts环境强类型语言弱类型语言动态类型静态类型配置环境新建文件夹，vscode打开文件夹，打开终端初始化...
协变与逆变
必看协变与逆变 | 深入理解 TypeScript TypeScript: Playground
bunny笔记| JS基础入门到精通[02]
上一章：bunny笔记| JS基础入门到精通[01][https://www.jianshu.com/p/1b98...
bunny笔记|Typescript实现video组件封装
实现小米官网视频组件用typescript封装模块了解项目需求要点 webpack的安装和使用(1)创建webp...
Redis深度历险笔记
Redis深度历险笔记基础与应用 Redis基础数据结构 5种基础数据结构：string、list、hash（字...
Typescript
TypeScript（TS）部分 TypeScript学习笔记
Typescript入门之：接口
typescript基本使用笔记安装typescript npm install -g typescript ...
TypeScript基础入门之装饰器(二)
转发 TypeScript基础入门之装饰器(二) 装饰器求值如何应用装饰器应用于类内的各种声明的顺序：对每个实...
Typescript 学习笔记六：接口
目录： Typescript 学习笔记一：介绍、安装、编译 Typescript 学习笔记二：数据类型 Types...
TypeScript基础入门之模块解析(三)
转发 ## TypeScript基础入门之模块解析(三) 继续上文[TypeScript基础入门之模块解析(二)]...