alogy
alogy

typescript_基础

type, interface, 泛型(泛化的类型)

tsc

$ tsc --outDir dirName
$ tsc --outDir dirName compileName # 指定输出输入位置
$ tsc --init # tsconfig.json
$ tsc -w # 动态监视
$ ts-node file # 直接运行ts文件
$ npm bin -g # 查看-g命令目录
$ tsc file -d # 生成.d.ts文件
tsconfig.json

tsconfig.json是编译上下文，其中的compilerOptions字段提供编译选项，可以通过tsc --init生成

Typescript作用：

  • 类型检查（静态类型，强类型）
  • 更好的避免bug
  • 自带文档特性
  • IDE或编辑器良好支持（自动完成提示）

Typescript = JavaScript + type + (some other stuff)

types

变量使用前要定义 
// let/var/const 变量名:变量类型 = 默认值

let test: string = 'test'
变量类型
  • number: 数值类型
  • string: 字符串类型
  • boolean: 布尔类型
  • symbol: 符号类型，标识唯一对象
  • any: 任意类型
  • object: 对象类型(数组Array，元祖[string, number]，类class，接口interface，函数function等)
Boolean
Number
String
Array

Tuple(解构)
Enum(集中对数值方面进行命名)
interface(面向对象)
class(面向对象)

Any
Void
Null
Undeinfed
Never(不可返回，函数中一定会发生异常或无限循环)
any
void

boolean
number
string

null
undefined

string[]          /* or Array */
[string, number]  /* tuple */

string | null | undefined   /* union */

never  /* unreachable */
enum Color {Red, Green, Blue = 4}
let c: Color = Color.Green
类型别名

类型别名常用于联合类型

type Name = string | string[]

type StrOrNum = string | number
// 使用
let sample: StrOrNum
字符串字面量类型

类型别名与字符串字面量类型只能用type关键字定义

type EventNames = 'click' | 'scroll' | 'mousemove'
function handleEvent (ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'click');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'
var,let 区别
  • 限定变量的作用范围
  • 防止变量的重复定义
常量

用处：

  • 系统配置文件路径
  • 数据库连接串
  • 公司名称，电话，邮件地址
  • 画面表示信息（登录失败，系统出错）
const name:type = initial_value

const DATA:number[] = [10, 20, 30]
数组 
let name:type[] = initial_value // 类型 + 方括号
let name: Array = [12, 2, 23] // 数组泛型 Array

let name:type[][] = [ // 二维数组
    [], [], []
]

interface NumberArray { // 用接口表示数组
    [index: number]: number
}
let name: NumberArray = [12, 2, 23]

function sum () { // 类数组 (常见的类数组都有接口定义，如 IArguments, NodeList, HTMLCollection)
    let args: IArguments = arguments;
}
枚举

枚举类型，可以增加代码的可读性。

enum name { name1, name2, name3 }

enum Sex {
    MALE,
    FEMALE,
    UNKNOWN
}
联合类型 
let a: number | null | undefined
内置对象

TS核心库定义文件

let b: Boolean = new Boolean(1)
let e: Error = new Error('Error occurred')
let d: Date = new Date()
let r: RegExp = /[a-z]/
DOM 和 BOM 的内置对象

Document、HTMLElement、Event、NodeList、MouseEvent

let body: HTMLElement = document.body
let allDiv: NodeList = document.querySelectorAll('div')
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

声明类型：
未声明类型默认当作any类型
建议：声明类型成员类型
建议：声明方法/函数的参数类型和返回类型
能明确推导时：局部变量可以不声明类型（局部变量通常不需要明确定义类型，尽可能使用类型推导）
能明确推导时：函数箭头可以不声明类型。（只有可以参数，箭头函数可以不实用括号，但是返回值需要的话，就需要加上括号）

function

function add (a: number, b: number): number {
  return a + b
}

// 返回类型可选
function add (a: number, b: number) { ... }
function run(a: string): string {
    return ''
}
let s = function (a: number): string {}

let t1 = (x, y) => x + y
let t2 = (x, y) => { return x + y }
let t3:(a: number, b: string) => void = function (a: number, b: string): void {}

interface P {
    (a: number, b: string): void
}
let add: P = function (a: number, b: string): void {}

在TS的类型定义中，=>用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
函数重载

通过为同一个函数（同名函数）提供多个函数类型定义来实现多种功能的目的。
需多次声明函数头，最后一个函数头是在函数体内实现函数体，但不可以用于外部。

// 重载
function padding(all: number)
function padding(topAndBottom: number, leftAndRight: number)
function padding(top: number, right: number, bottom: number, left: number)
function padding(a: number, b?: number, c?: number, d?: number) {
  if (b === undefined && c === undefined && d === undefined) {
    b = c = d = a
  } else if (c === undefined && d === undefined) {
    c = a
    d = b
  }
  return {
    top: a,
    right: b,
    bottom: c,
    left: d
  }
}

class

静态属性，静态方法 
class Point {
  x: number
  y: number
  static instances = 0
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
}

class Person {
    public name: string
    static age: number
    constructor (name: string) {
        this.name = name
    }
    public run () {
        console.log('run')
    }
    static work () { // 静态方法里没方法调用成员方法
        console.log('work')
    }
}

let p = new Person('s')

声明类成员：
成员变量必须声明了才能使用。（赋值，取值）。
在私有成员需要提前在类中声明。

抽象类，多态

多态：父类定义一个方法不去实现，让继承的子类去实现，每一个子类有不同的表现。

// 多态
class Animal {
    protected name: string
    constructor (name: string) {
        this.name = name
    }
    public eat () {
        console.log(this.name + ' eat')
    }
}

class Dog extends Animal {
    constructor (name: string) {
        super(name)
    }
    public eat () {
       console.log(this.name + ' eat') 
    }
}

class Pig extends Animal {
    constructor (name: string) {
        super(name)
    }
    public eat () {
        console.log(this.name + ' eat')
    }
    public hoho () {
        console.log('hoho')
    }
}

let d = new Dog('dog')
d.eat()

let p = new Pig('pig')
p.hoho()
// 抽象类： 定义一种标准

abstract class Animal {
    abstract eat (): void
    abstract name: string
}

class Dog extends Animal {
    public name = 'dog'
    constructor () {
        super()
    }
    public eat () {}
}

interface

接口运行时的影响为 0

声明空间:
类型声明空间与变量声明空间

类型注解: 不能当作变量来使用，因为它没有定义在变量声明。

class Person {}
type Bas = {}
interface Test {}

变量声明：变量仅在声明空间中使用，不能用作类型注解。

内联 
function printLabel (options: { label: string }) {
  console.log(options.label)
}

// 注意分号
function getUser (): { name: string; age?: number } {
}
显式 
interface LabelOptions {
  label: string
}

function printLabel(options: LabelOptions) { ... }
可选属性 
interface User {
  name: string,
  age?: number
}
只读 
interface User {
  readonly name: string
}
动态key 
{
  [key: string]: Object[]
}

接口是规范的定义。

// 属性类型接口
interface Color {
    firstName: string
    name: string
}

let a: Color = { // 对象约束
    name: 'tan',
    firstName: 'pink'
}
// 函数类型接口
interface encrypt {
    (key: string, val: string): string
}

let md5: encrypt = (key, val): string => {}

const simple: (foo: number) => string = foo => foo.toString()

// 可索引接口，数组的约束
interface UserArr {
    [index: number]: string
}

let arr:UserArr = ['a', 'b']

// 可索引接口，对象的约束
interface UserObj {
    [index: string]: string
}

let obj: UserObj = {
    name: 's'
}

// 类接口约束， 对类的约束， 实现接口类
interface Animate {
    name: string
    eat(e: string): void
}

class Pig implements Animate {
    name: string
    constructor () {}
    eat () {}
}
type与interface

能用interface实现，就用interface, 如果不能就用type

相同点：

  • 都可以描述一个对象或者函数
  • 都允许拓展（extends）: 并且两者并不是相互独立的，interface可以extends type, type 也可以 extends interface 
// interface
interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): void
}

// type
type User = {
    name: string
    age: number
}
type SetUser = {
    (name: string, age: number): void
}

// interface extends interface
interface Name {
    name: string
}
interface User extends Name {
    age: number
}

// type extends type
type Name = {
    name: string
}
type User = Name & { age: number }

// interface extends type
type Name = {
    name: string
}
interface User extends Name {
    age: number
}

// type extends interface
interface Name {
    name: string
}
type User = Name & {
    age: number
}

不同点：

  • type 可以声明基本类型别名，联合类型，元组等类型
  • interface 能够声明合并
// 基本类型别名
type Name = string

// 联合类型
interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

// 获取一个变量的类型时，使用typeof, 如果不存在，则获取该类型的推论类型
let div = document.createElement('div')
type B = typeof div

interface Person {
  name: string;
  age: number;
  location?: string;
}

const jack: Person = { name: 'jack', age: 100 };
type Jack = typeof jack; // -> Person

function foo(x: number): Array {
  return [x];
}

type F = typeof foo; // -> (x: number) => number[] // 类型推导

// interface 声明合并 // 定义相同的接口，合并成新的接口描述
interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

generics

参数化的类型，一般用来限制集合的内容。
任何出现类型的地方都可以使用
泛 -- 宽泛

作用：解决类，接口，方法的复用性，以及对不特定数据类型的支持（类型校验）

当使用简单的泛型时，泛型常用T, U, V表示。如果在参数里，不止拥有一个泛型，那应该使用更加语义化的名称。例如：Tkey和TValue

// 泛型函数
function getData (value: T): T {
    return value
}


// 泛型类
class Greeter {
  greeting: T
  constructor(message: T) {
    this.greeting = message
  }
}

let greeter = new Greeter('Hello, world')


// 接口泛型
interface Array {
  reverse(): T[]
  sort(compare?: (a:T, b:T) => number): T[]
}

// 接口函数泛型
interface ConfingFn {
    (val1: T, val2: T): T
}
interface ConfingFn {
    (val1: T, val2: T): T
}
类型断言

作用：显式指定变量值的类型。
使用方法：在需要断言的变量前加上

类型断言并不是类型转换，断言成一个联合类型中不存在的类型时不允许的。

let len: number = (input as string).length
let len: number = ( input).length  /* 不能再 JSX 中使用 */
多个类型参数 
function swap(tuple: [T, U]): [U, T] { // 一次定义多个类型参数
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7] // 用来交换输入的元组

other

使用风格
  • 箭头函数代替匿名函数表达式
    x => x + x
    (x, y) => x + y
    (x: T, y: T) => x === y
  • 使用{}把循环体和条件语句括起来
    for (let i = 0; i < 10; i++) {}
    if (x < 10) {}
  • 每一个变量声明语句只声明一个变量。let x = 1; let y = 1; 并不是let x = 1, y = 1
  • 如果函数没有返回值，使用void
  • 需要的时候才把箭头函数的参数括起来。
处理json和字符串 
let person = '{"name": "pink", "age": 22}'

const jsonParse: ((key: string, value: any) => any) | undefined = undefined
let objectConverted = JSON.parse(person, jsonParse)
转换为Number, String

ts中推荐使用Number(), String()

Number('10') // 10
String(10) // '10'
对象属性不存在错误
  1. 能修改该值的类型声明，那么添加上缺损值的属性
  2. 使用// @ts-ignore
  3. 使用类型断言，强制为any类型: (this.props as any).flag
类型不明确的错误

优先使用类型保护。

  1. 使用类型保护(type guards)
  2. 使用类型断言
  3. 使用 // @ts-ignore 注释
声明文件

当使用第三方库时, 需要引用它的声明文件。

约定俗成的声明文件以.d.ts为后缀

AlloyTeam团队 的 TSLint 配置

tslint-config-alloy

npm install --save-dev tslint-config-alloy

安装之后修改

{
    "extends": "tslint-config-alloy",
    "rules": {
        // 这里填入项目需要的个性化配置，比如：
        //
        // 一个缩进必须用两个空格替代
        // "indent": [
        //     true,
        //     "spaces",
        //     2
        // ]
    },
    "linterOptions": {
        "exclude": [
            "**/node_modules/**"
        ]
    }
}
ES6修改成TS
  • 声明类成员，声明类型，变量，函数，类（识别类型的意识）
  • 模块语法
  • 添加TypeScript配置文件tsconfig.json
  • 改写webpack.config.js使.ts编译成.js
    /.js -> /.ts
  • module.exports -> export或者export default
  • require -> import
  • 在类中需要定义私有属性
  • 第三方库@types/xxx
  • 在函数中需要泛型，也需要默认值，需要使用重载
  • 类型定义
  • 自定义类型或使用对象字面量，使用interface
  • 为函数，参数，返回值，类属性添加类型注解，函数中的局部变量通过类型推导。常用:number [], class, interface, boolean, string

更改构建脚本:

module: {
    rules: [
        {
            test: /\.ts/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                },
                'ts-loader'
            ]
            exclued: /node_modules/
        }
    ]
}

在函数中需要泛型，也需要默认值:

class MarixToolkit {
    mackRow(): number[];
    mackRow(v: T): T[];
    mackRow(v: any = 0): any[] {
        return new Array(9)
    }
}

自定义类型或使用对象字面量，使用interface:

interface IBoxCoord {
    boxIndex: number
    cellIndex: number
}

总结：封装，继承，模块，方法，重载，接口

封装
  • 使用class关键词来声明类
  • 使用constructor关键字来声明构造函数
  • 使用private, protected关键字来控制访问权限
  • 可以使用get/set来实现私有成员访问器
  • 支持静态属性static 
class Person {
    privated _Name: string
    privated _Sex: boolean
    constructor (Name: string, Sex: boolean) {
        this._Name = Name
        this._Sex = Sex
    }
    get Name () {
        return this._Name
    }
    set Name (Name: string) {
        this._Name = Name
    }
    get Sex () {
        return this._Sex
    }
    set Sex (Sex: boolean) {
        this._Sex = Sex
    }
    static SayHello (person: Person) {
        return 'hello world'
    }
}

let p = new Person('t', true)

Person.SayHello(p)
继承
  • 使用extends关键字完成继承
  • 使用super关键字来访问父类
class Person {
    privated _Name: string
    privated _Sex: boolean
    constructor (Name: string, Sex: boolean) {
        this._Name = Name
        this._Sex = Sex
    }
}

class Student extends Person {
    private _Grade: string
    get _Grade () {
        return _Grade
    }
    set _Grade (grade: string) {
        return this._Grade = grade
    }
    constructor (Name: string, Sex: boolean) {
        super(Name, Sex)
    }
}

let p = new Person('s', true)

let s = new Student('t', false)
模块
  • 模块的概念等同于命名空间
  • 使用module关键字来声明模块
  • 在模块中默认成员都是私有的
  • 在模块中使用export关键字声明共有资源
  • 模块支持跨文件分隔
  • 在Node.js/Require.js中使用require关键字导入模块
  • 可以使用import关键字来声明模块的别名

定义：

module com.test {
    export class Person {
        privated _Name: string
        privated _Sex: boolean
        constructor (Name: string, Sex: boolean) {
            this._Name = Name
            this._Sex = Sex
        }
        get Name () {
            return this._Name
        }
        set Name (Name: string) {
            this._Name = Name
        }
        get Sex () {
            return this._Sex
        }
        set Sex (Sex: boolean) {
            this._Sex = Sex
        }
        static SayHello (person: Person) {
            return 'hello world'
        }
    }    
}

使用：

import test = com.test // 目录
方法
  • 方法是JavaScript中一个特殊的对象
  • 方法分为命名方法和匿名方法
  • 方法类型
  • 方法推断类型
  • 方法参数可以定义默认值
  • 方法参数可以使用...去定义可变参数组
function add (n1, n2) {
    return n1 + n2
}

let add1 = function (n1, n2) { // 数据类型存在
    return n1 + n2
}

let sum = function (n1: number, n2: number): number {
    return n1 + n2
}

let sum1: (num1: number, num2: number) => number = function (num1: number, num2: number): number {
    return num1 + num2
}

let sum2: (num1: number, num2: number) => number = function (x, y) {
    return x + y
}

function sum3 (n1: number = 5, n2: number = 10, ...num2: Array) {
    return n1 + n2
}
重载

JavaScript中本身不支持重载。

在TypeScript中使用重载的方法：

  1. 先声明出所有的方法重载的定义，不包含方法实现。
  2. 再声明出一个参数为Any类型的重载方法。
  3. 实现Any类型的方法，并通过参数类型不同来去实现重载。

使用了泛型下也需要默认值：

class MarixToolkit {
    mackRow(): number[] // 定义
    mackRow(v: T): T[] // 定义
    mackRow(v: any = 0): any[] { // 实现
        return new Array(9)
    }
}
接口

在接口中可以包含属性，方法。
使用interface关键字定义接口。
属性可以使用?标示允许为空类型。
TypeScript支持隐式接口
接口可以标示为方法类型
接口可以多继承
可以使用<接口类型>{}来去隐式声明匿名对象实现接口

interface Count {
    (num1: number, num2: number): number
}

let add: Count = function (a, b) {
    return a + b
}
interface Count {
    num1: number
    num2: number
}

let _count = {}

_count.num1 = 10
_count.num2 = 100

你可能感兴趣的:(typescript)

  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
  • 终于搞懂TS中的泛型啦! | typescript 入门指南 04 程序员王天 TypeScript实践指南前端javascripttypescript
    大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type
  • TypeScript 快速入门 echozzi 1024程序员节
    一、TypeScript是什么TypeScript是一种由微软开发的自由和开源的编程语言。于2012年推出。TypeScript是JavaScript的一个超集。为JavaScript添加了类型系统。TypeScript与JavaScript的区别TypeScriptJavaScriptJavaScript的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页可以在编译期间发现并纠正错误
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • Vue3+TypeScript频谱跳动算法（附vue2+JavaScript） I like Code? javascripttypescript算法
    以下为Vue3+TypeScript频谱跳动算法只需要调用下列方法即可实现，并且设置定时器。（最好每次先清楚，否则可能耗内存）if(updateInterval.value){clearInterval(updateInterval.value);}constupdateInterval=ref(undefined);generateDataSets();updateInterval.value=
  • 重磅算法：通信设备虚拟仿真-波形根据频率、带宽变化算法（Vue3+typescript）结尾附vue2+JavaScript I like Code? javascript算法typescript
    以下为Vue3+typescriptconstpointSpacing=ref(0);constupdateInterval=ref(undefined);//更新图表数据的函数constUpdateChartTest=(centerFrequnency:number,bandwidth:number,baseFreq=800,baseBW=100)=>{if(updateInterval.val
  • React 开发者完全指南：React.FC（）、函数组件 和更多 夏目艾拉 react.jsjavascripttypescript前端react前端框架
    前言React.FC是一个TypeScript类型，用于React函数组件。FC代表FunctionalComponent（函数组件）。这个类型的使用有助于在TypeScript项目中编写类型安全的React组件。使用React.FC为组件定义类型就可以享受到TypeScript提供的类型检查和自动补全等特性，让开发过程更加高效和减少错误。为了了解React.FC，我们还需要先知道函数组件是什么。
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • 嵌入式鸿蒙系统开发语言与开发方法分析 嵌入式开发星球 鸿蒙万物互联人工智能之卓越harmonyos开发语言华为
    大家好，今天主要给大家分享一下，HarmonyOS系统的主力开发语言ArkTS语言开发方法，它是基于TypeScript(简称TS)语言扩展而来。第一：ArkTS语言基本特性目的：声明式UI，让开发者以更简洁，更自然的方式开发高性能应用。声明式UI基本特性：基本UI描述:ArkTS定义了各种装饰器、自定义组件、UI描述机制，再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发
  • 快速使用react 全局状态管理工具--redux 蓝胖子不是胖子 Reactreact.js前端前端框架
    reduxRedux是JavaScript应用中管理应用状态的工具，特别适用于复杂的、需要共享状态的中大型应用。Redux的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树（statetree）中，状态只能通过触发特定的action来更新。官方文档https://cn.redux.js.org/tutorials/typescript-quick-start如果对react不了解可以看我
  • TypeScript---类型批注 Anglie
    TS通过类型批注提供静态类型，方便在编译时启动类型检查，这不是必须的，甚至可以被忽略，去使用js常规的动态类型。基本类型的批注是number,bool,string,弱类型或动态类型的结构可以是任意类型。将类型批注导出到一个单独的文件，方便使用类型已经被编译成为js的ts脚本的类型信息可用。批注可以为一个现有的js库声明。就像已经为node.js和jquery.js所做的那样。当没有给出类型时，T
  • Vue3+TypeScript从入门到精通系列之：类多态 快乐骑行^_^ 日常分享专栏typescriptVue3类多态
    Vue3+TypeScript从入门到精通系列之：类多态一、TypeScript类多态代码二、TypeScript的类多态转化为JS代码三、查看js输出一、TypeScript类多态代码(()=>{//多态：父类型的引用指向了子类型的对象，不同类型的对象针对相同的方法，产生了不同的行为//定义一个父类classAnimal{name:stringconstructor(name:string){t
  • Vue 生命周期与 TypeScript：深入理解组件生命周期 shiming8879 typescriptvue.js前端
    Vue生命周期与TypeScript：深入理解组件生命周期引言Vue.js作为一种流行的前端框架，其组件生命周期是开发过程中不可或缺的一部分。理解并正确利用Vue的生命周期，可以帮助开发者构建更加健壮和可维护的应用。而当TypeScript与Vue结合使用时，这种优势得到了进一步的增强。TypeScript作为一种强类型语言，提供了类型检查和代码清晰性，使得Vue组件的生命周期管理变得更加高效和可
  • Vue3异步请求的最佳实践：async/await 与 Promise.then()，Vue3请求接口数据，以及TypeScript中的泛型和任意类型（Vue3请求API，TS中的T 和 any） 北城笑笑 VueJS前端vue.js
    前言在Vue3开发中，异步请求是非常常见的操作，特别是在与后端API交互时。虽然Vue.js自带了一些对异步数据的处理方式，但合理使用异步操作是确保应用顺畅运行的关键。这里我分享一下Vue3异步请求的最佳实践，并探讨async/await和Promise.then()两种处理异步操作的方式，简单记录一下1.请求接口的实现这里，我们使用一个请求接口callAskRecordList，它会从/gpt/
  • Github 2024-09-08 php开源项目日报 Top10 老孙正经胡说 githubphp开源Github趋势分析开源项目PythonGolang
    根据GithubTrendings的统计，今日(2024-09-08统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量PHP项目10TypeScript项目1JavaScript项目1Laravel:以优雅语法简化Web开发创建周期：4028天开发语言：PHP协议类型：MITLicenseStar数量：30824个Fork数量：10526次关注人数：30824人贡献
  • 前端引入ffmepg 对视频画矩形贴图 全赣州最老实的男人guoy 前端音视频ffmpegvue
    业务场景：和后端联调中视频监控需要把人员位置框出，返回的后端只给视频和框选位置先上效果图成功给视频添加了两个框demo技术框架vue3+vite+typeScript引入ffmepgnpmi@ffmpeg/ffmpeg2.项目中引入import{createFFmpeg,fetchFile}from'@ffmpeg/ffmpeg/dist/ffmpeg.min.js'3.可能会出现的报错Share
  • Github 2024-08-10开源项目日报 Top10 老孙正经胡说 github开源Github趋势分析开源项目PythonGolang
    根据GithubTrendings的统计，今日(2024-08-10统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目4JavaScript项目2TypeScript项目2C#项目1Dockerfile项目1RichTextFormat项目1Swift项目1JupyterNotebook项目1Node.js最佳实践创建周期：2521天开发语言：Doc
  • Github 2024-05-24 开源项目日报 Top10 老孙正经胡说 github开源Github趋势分析开源项目PythonGolang
    根据GithubTrendings的统计，今日(2024-05-24统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目3非开发语言项目2TypeScript项目2JavaScript项目1Kotlin项目1C#项目1C++项目1Shell项目1MicrosoftPowerToys:最大化Windows系统生产力的开源实用工具创建周期：1720天开发语
  • 基于 React & TypeScript & Webpack 的微前端应用模板 weixin_33806300 前端webpackjavascriptViewUI
    m-fe/react-ts-webpack在Web开发导论/微前端与大前端一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。如康威定律(Conway’sLaw)所言，设计系统的组织，其产生的设计和架构等价于组织间
  • typescript 使用对象或数组的值或键创建联合类型 玄晓乌屋 typescript随记typescript
    前言实际开发中我需要用到太多的键值对，并且有相当一部分情况下，键名是一个联合，而且还是某个数组的联合，然而早期TS对这样的联合实现并不是很理想。这几天又翻了翻StackOverflow，发现很多新答案，对此整理一下。后面的内容最主要的是针对TS增加了字面量常量上下文表达式(Constcontextsforliteralexpressions)而展开的，所以需了解下它，为了简化，后面简称为常量字面量
  • C#简介简介和基础（一） Bean.a c#开发语言
    一、C#简介1、C#简介一、特点：1、通用性语言2、类型安全3、面向对象二、目标：1、生产力2、简洁性3、表达力4、高性能三、创作者：AndersHejlsberg·TurboPascal的创作者·Delph的主设计师·Typescript的创作者·C#是平台中立的，与平台无关2、面向对象一、封装：为对象（object）创造一个边界，来把外部的一些行为和内部的实现细节给分开。通常对外部的行为就是p
  • 力扣前端leetcode 2624.蜗牛排序 TypeScript（详细分析）TS sjsjs11 javascripttypescript力扣前端
    文章目录前言一、题目二、方法分析前言力扣题目2624.蜗牛排序语言TypeScript如内容有不对的地方，恳请指出提示：以下是本篇文章正文内容，下面案例可供参考一、题目请你编写一段代码为所有数组实现snail(rowsCount，colsCount)方法，该方法将1D数组转换为以蜗牛排序的模式的2D数组。无效的输入值应该输出一个空数组。当rowsCount*colsCount!==nums.len
  • CSS Vue3深度选择器 不叫虎子 CSScss前端html
    技术栈：Vue3TypeScriptViteVant1.在template中的布局2.当我们在style标签中需要改变vant组件的样式时，需要使用到深度选择器背景：scope样式私有化，避免样式冲突原理：在css中使用过选择器的选择过元素(组件下)元素生成添加一个属性=>data-v-hash值webpack或vite打包时自动生成添加3.深度作用选中符语法：原理就是提高选择器的权重，权重不够再
  • 基于Vue3.X + Typescript实现的在线PPT制作工具，开源！ 徐小夕@趣谈前端 typescriptjavascript前端ecmascript开发语言
    嗨，大家好，我是徐小夕。之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：H5-Dooring（页面可视化搭建平台）V6.Dooring（可视化大屏搭建平台）橙子6试卷（表单搭建引擎）Nocode/WEP文档知识引擎最近在研究办公三件套（WPS），打算做个纯WEB版本的，偶然在github上发现了一款非常有意思的开源项目，它模仿了Office的PPT制作模
  • Vue3项目引入.ts文件报错：An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘ fishmemory7sec 项目经验vue.js
    Animportpathcanonlyendwitha‘.ts’extensionwhen‘allowImportingTsExtensions’isenabled.ts-plugin(5097)这个错误消息表明在TypeScript项目中，当allowImportingTsExtensions未启用时，导入路径不能以.ts扩展名结尾。解决方案启用allowImportingTsExtension
  • TypeScript 编译选项 compilerOptions 全部配置项 fishmemory7sec TypeScripttypescript
    projectsincremental是否启用增量编译。默认值是false。当incremental设置为true，TypeScript编译器会记住上次编译的结果，并只重新编译那些发生了变化的文件。composite是否启用项目组合（ProjectComposition）功能。默认值是false。tsBuildInfoFile用于指定TypeScript编译器生成的构建信息文件的路径。默认值是''
  • 在React中使用TypeScript和Material-UI v5时，要为单个.tsx文件创建一个局部作用域的.scss文件如何做? 另外主题如何获取呢? 汝&戏 Material-UIv5Material-UIReactreact.jstypescriptui
    创建一个局部作用域的.scss文件如何做?在React中使用TypeScript和Material-UIv5时，要为单个.tsx文件创建一个局部作用域的.scss文件，你可以采用以下步骤：创建SCSS文件：在你的.tsx文件旁边，创建一个新的.scss文件。例如，如果你的组件是MyComponent.tsx，则你的SCSS文件应该命名为MyComponent.module.scss。编写样式：在M
  • 鸿蒙 ArkTS声明式 UI 语法 读心悦 鸿蒙基础harmonyosui华为
    鸿蒙（HarmonyOS）的ArkTS（ArkUI的TypeScript扩展）确实支持声明式UI语法，这种语法允许开发者以声明的方式描述UI组件的结构、样式和行为，而不是直接操作DOM或类似的结构。然而，需要注意的是，ArkTS和ArkUI的声明式UI语法是特定于鸿蒙系统的，与Web开发中使用的React、Vue等框架的语法有所不同。在ArkTS中，开发者会定义各种UI组件，这些组件可以是鸿蒙系统
  • web3.0中使用的前端开发 alankuo 人工智能人工智能
    在Web3.0中，前端开发有一些新的特点和技术应用：一、技术栈1.编程语言：-JavaScript/TypeScript：仍然是主流的前端开发语言。用于构建交互式用户界面和与区块链节点进行交互。例如，使用TypeScript可以提供更好的类型安全和代码可读性，在处理复杂的Web3应用逻辑时非常有帮助。-Solidity：虽然主要用于智能合约开发，但前端开发人员也需要了解一些Solidity知识，以
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他