关于javascript进阶，TS的知识点总结

已于 2024-08-07 13:47:06 修改
阅读量384 收藏 6
点赞数 4
文章标签： javascript 开发语言 typescript webpack
于 2024-08-02 08:49:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76633800/article/details/140862291
版权

1.搭建环境

2.选择一个自己喜欢的编程软件

我学习的时候，选择的是vscode，免费、轻便、好用。

3.基本类型

typescript，就是在js的基础之上，对变量进行类型的控制。

// 声明一个变量，指定它的类型为string（先声明在赋值）
let b: string;
b = "11111";
//赋值和声明同时进行的话，可以省略：string
let b='1111'
(ts编译器会自动检测变量类型)

类型：

3.1字面量进行类型声明

// 字面量进行类型声明
let a:10;
a=10;//这里只能设置a的值为10
//联合类型
let d:'xiaotang' | 'xiaoliu';（这里d的值只可以是两个字符串中的一个）
// 任意类型
let tang:any;
tang=1;
tang='11'
tang=true
（相当于关闭了ts语法检测）

  

// unknown 相当于一个安全的any类型

/**

 * 类型断言

 * 变量 as 类型

 * <类型> 变量

 */

let s:unknown;

let e:string;

s='hello'

// e=s 报错，不能将unknown赋值给string

if (typeof s==='string'){

  e=s //不会报错

}

//上面的if语句相当于下面

e=s as string;

e=<string>s;

// 函数类型

/**

 *

 * @param num1 数值后面指定的时参数类型

 * @param num2

 * @returns 阔号后面指定的时返回值类型

 */

function add(num1: number, num2: number): number {

  return num1 + num2;

}

console.log(add(1,3))

//函数表达式

const sub=(num1:number,num2:number):number=>{

return num1-num2

}

console.log(sub(10,7))

//函数表达式二

type subplug =(num1:number,num2:number)=>number

const sort:subplug=(num1,num2)=>{

  return num1*num2

}

//函数无返回值

function fedback(name:string):void{

console.log(name)

}

/**

 * void代表返回值可以为空

 * @param start 后面的问号代表可选参数

 * @param end 可选参数在必选参数后面

 */

function myslice(start:number,end?:number):void{

  console.log('开始索引:'+start,'结束索引:'+end)

}

myslice(1)

myslice(2,3)

枚举（新添加的属性）

 3.2.别名

4.编译选项

 在项目目录中，添加tsconfig.json文件，可以进行tsc命令，一键编译所有ts文件

 更多配置详情----》https://blog.csdn.net/HanYaLi39/article/details/130054192

5.使用webpack打包代码

 1.初始化项目包

npm init -y 生成pack.json文件，进行项目的管理

2.下载包，进行开发依赖的下载

pnpm i -D webpack webpack-cli typescript ts-loader

 

 3.编辑webpack配置文件（webpack.config.js）

// 导入一个路径包

const path = require("path")

// webpack中所有的配置信息都写在module.exports中

module.exports = {

  // 指定入口文件

  entry: "./src/index.ts",

  // 指定打包文件所在目录

  output: {

    // 指定打包文件的目录

    path: path.resolve(__dirname, "dist"),

    // 打包后的文件名

    filename: "bundle.js",

  },    

  // 设置mode

  mode: 'development' ,

  // 指定webpack打包时要使用的模块

  module: {

    // 指定加载规则

    rules: [

      {

        // test指定的是规则生效的文件

        test: /\.ts$/,

        // 要使用的loader

        use:'ts-loader',

        // 要排除的文件

        exclude:/node_modules/

      },

    ],

  },

}

 4.tsconfig.json配置

{

  "compilerOptions": {

    "module": "CommonJS",

    "target": "ES5",

    "strict": true

  }

}

命令别名

 执行命令

 效果：

 

 6.引入各种插件，进行webpack的优化

6.1 html-webpack-plugin

pnpm i -D html-webpack-plugin
//自动生成一个html文件，并且导入ts和css文件

6.2 webpack-dev-serve

pnpm i -D webpack-dev-server
//在项目中加载一个服务器，直接可以在线调试heml页面

 

6.3 clean-webpack-plugin

在打包时，清除dist目录下的打包文件，重新生成

6.4配置插件

// 导入webpack插件
const CleanWebpackplugin=require('clean-webpack-plugin')
const HtmlWebpackplugin=require('html-webpack-plugin')
///
 plugins:[
  new CleanWebpackplugin(),
  new HtmlWebpackplugin({
    // 设置模板html
    template:"./src/index.html"
  })
 ],
//  用来设置应用模板
resolve:{
  // 哪些文件可以用来当作引用文件
  extensions:['.ts','.js']
}
}

  template:"./src/index.html"，这里在路径下面新建一个模板页面，可以自己随意编辑，然后导入路径，虚拟服务器就基于你的这个页面进行显示。

效果展示：

 

 

6.webpack+babel优化兼容性

6.1安装插件

pnpm i -D @babel/core @babel/preset-env babel-loader core-js

 对babel进行配置

// 导入一个路径包
const path = require("path")
// 导入webpack插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackplugin = require("html-webpack-plugin")
// webpack中所有的配置信息都写在module.exports中
module.exports = {
  // 指定入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后的文件名
    filename: "bundle.js",
    environment:{
      // 告诉webpack使用箭头函数。
      arrowFunction:false
    }
  },
  // 设置mode
  mode: "development",
  // 指定webpack打包时要使用的模块
  module: {
    // 指定加载规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          //配置babel
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              //设置预定义的环境
              presets: [
                [
                  //指定编译环境的插件
                  "@babel/preset-env",
                  //配置信息
                  {
                    //要兼容的目标浏览器
                    targets: {
                      chrome: "88",
                      IE: "11",
                    },
                    // 指定corejs的版本---corejs作用是在浏览器不支持时，调用自身的某一个方法进行补充
                    corejs: "3",
                    // 使用corejs的方式，按需加载usage
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ],

        // 要排除的文件
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackplugin({
      // 设置模板html
      template: "./src/index.html",
    }),
  ],
  //  用来设置应用模板
  resolve: {
    // 哪些文件可以用来当作引用文件
    extensions: [".ts", ".js"],
  },
}

---------------箭头函数被替换---------bundle.js中

修改要打包文件时，打包文件也会出现兼容性

打包文件--const 变成var

 7.面向对象（一切皆对象）

 7.1类（class）

 定义一个类：

初始化一个项目：npm init -y

创建tsconfig.json配置文件：

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES5",
    "strict": true,
    // 输出的js文件存放位置
    "outDir": "./dist"
  },
  // 需要编译的文件
  "include": [
    "./src/**/*"
  ]
}

实例：

// 使用class关键字定义一个类
class Person{
  // 属性
  name:string="孙悟空";
 readonly age:number=500;
  // 方法：
  sayHello(){
    console.log("俺老孙来也！");
    
  };
  // 静态属性，原生person对象可以访问，new的对象不可以访问
  static sex="男"

}

// 生成一个实例对象
const per=new Person()

// 可以直接调用
console.log(per.name);
console.log(per.sayHello);
// 上面关键字--readonly（可读,不可以修改）
  // 静态属性，原生person对象可以访问，new的对象不可以访问
  console.log(Person.sex);

效果：

 7.2构造函数

class Dog{
  name:string;
  age:number;

  // 构造函数--在调用实例对象的时候，立即执行
  constructor(name:string,age:number){
    //this指向调用者，谁调用它指向谁。
    this.age=age;
    this.name=name;

  }

  //方法
  bark(){
    console.log(this);
    
  }
}

const dog=new Dog("小白",4);
const dog2=new Dog("小黑",3);
console.log(dog);
console.log(dog2);

console.log("----------------------------");
//指向dog这个实例
console.log(dog.bark());

7.3继承extends

// 定义父类
class Animal{
  name:string;
  age:number;
  // 构造函数
  constructor(name:string,age:number){
    this.age=age;
    this.name=name;
  }
  // 方法
  sayHello(){
    console.log("动物的叫~");
    
  }
}

/**
 * 定义子类，实现代码复用
 * 用extends关键字，进行父类代码的继承。
 * 在继承的基础上，子类中可以添加可以修改。
 * 在继承后，在子类中覆盖父类中的代码叫做重写
 */
class Cat extends Animal{
  // 覆盖重写
  sayHello(): void {
      console.log("喵喵喵~");
      
  }
  // 添加
  active(){
    console.log(`${this.name}在跳跃！`);
    
  }
}

class Dog04 extends Animal{
sayHello(): void {
    console.log("汪汪汪~");
    
}
}

// 创建实例
const dog1=new Dog04("小白",4);
const cat=new Cat("小刘",3);
console.log(dog1);
console.log(cat.active());

7.4super关键字

// 采用立即执行函数去避免class类名重复
(function(){


// 定义父类
class Animal{
  name:string;
  age:number;
  // 构造函数
  constructor(name:string,age:number){
    this.age=age;
    this.name=name;
  }
  // 方法
  sayHello(){
    console.log("动物的叫~");
    
  }
}

/**
 * 定义子类，实现代码复用
 * 用extends关键字，进行父类代码的继承。
 * 在继承的基础上，子类中可以添加可以修改。
 * 在继承后，在子类中覆盖父类中的代码叫做重写
 * super关键字代指父类
 */
class Cat extends Animal{
  sayHello(){
   super.sayHello()
  }

  // 添加
  active(){
    console.log(`${this.name}在跳跃！`);
    
  }
  constructor(name:string,age:number){
    //在子类中调用构造函数之前必须调用父类构造函数
    super(name,age);  

  }
}









})()

7.5抽象类和方法

// 采用立即执行函数去避免class类名重复
;(function () {
  // 定义父类
  abstract class Animal {
    name: string
    age: number
    // 构造函数
    constructor(name: string, age: number) {
      this.age = age
      this.name = name
    }
    // 方法
    abstract sayHello(): void
  }

  /**
   * 可以在父类前面加上一个abstract,定义成抽象类
   * 这样父类就只能用来继承，不能用来new 实例
   * 在父类中，添加abstract 在方法前面，表示抽象方法，子类继承父类后，必须对他进行重写。
   */
  class Cat extends Animal {
    sayHello(): void {
      console.log("喵喵~")
    }
  }
})()

7.6接口

(function () {
  // 定义一个接口
  /**
   * 相当于type对于类型的定义，接口是对于class类结构的规范。
   * 接口中没有实际值，所有的方法都是抽象的。
   * 没有实际值
   */
  interface myface {
    name: string

    sayHello(): void
  }

  // 接口调用
  class myclass implements myface {
    name: string
    constructor(name: string) {
      this.name = name
    }
    sayHello(): void {
      console.log(" hello ")
    }
  }
})()

7.7属性的封装

;(function () {
  /**
 * public 修饰的属性可以在任何位置访问和修改
 * private 私有属性，只能在当前类的内部进行访问和修改
 * 如果不加以限制，属性可以被任意修改，数据会变得非常不安全。

*/
  class Person {
    // 私有属性
    private _name: string
    private _age: number
    constructor(name: string, age: number) {
      this._name = name
      this._age = age
    }
    // 设置函数进行修改和读取
    //读取
    public get name(): string {
      return this._name
    }

    public get age(): number {
      return this._age
    }
    // 修改

    public set name(v: string) {
      this._name = v
    }

    public set age(v: number) {
      if(v>=0){
        this._age = v
      }
      
    }
  }

  // 创建实例对象
  const person=new Person("小唐",18);

  // 读取
  console.log(person.name,person.age);
  // 修改
  person.age=20;
  
})()

7.8泛型

(function(){
  /**
   * 在定义函数或则是类的时候，如果遇到类型不明确就可以使用泛型
   * 泛型是编程语言中一种强大的特性，它允许程序员编写更通用、更灵活的代码。泛型的核心思想是使用类型参数来创建可以操作多种类型的函数、类或接口，而不是仅限于特定的数据类型。以下是泛型的详细解释和用法：

### 泛型的概念

泛型提供了一种方式，使得代码能够以类型安全的方式操作多种数据类型。类型参数通常用大写字母（如 `T`、`U`、`V` 等）表示，它们在编译时被具体化，以确保类型安全。

### 泛型的好处

1. **类型安全**：泛型帮助编译器在编译时检查类型错误，而不是在运行时。
2. **代码复用**：泛型允许你编写一次代码，然后用于多种数据类型，无需为每种类型编写重复的代码。
3. **灵活性**：泛型提供了一种方式，使得函数或类可以接受不同类型的输入，同时保持内部逻辑不变。

### 泛型的用法

泛型可以用在函数、类、接口等的声明中。以下是一些示例：

#### 泛型函数

```javascript
function identity<T>(arg: T): T {
  return arg;
}

// 使用
let output = identity<string>("Hello World"); // T 被具体化为 string
console.log(output); // "Hello World"

let num = identity<number>(42); // T 被具体化为 number
console.log(num); // 42
```

#### 泛型类

```javascript
class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T {
    return this.items.pop();
  }
}

// 使用
let numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 2
```

#### 泛型接口

```javascript
interface Pair<T, U> {
  first: T;
  second: U;
}

// 使用
let pair = <Pair<number, string>>{ first: 1, second: "one" };
console.log(pair); // { first: 1, second: "one" }
```

#### 泛型约束

有时你可能需要对泛型参数施加一些限制，比如只允许它被某些特定的类型或具有某些属性的类型所使用。这可以通过使用 `extends` 关键字来实现：

```javascript
function getProperty<T extends { name: string }>(obj: T, key: 'name'): string {
  return obj[key];
}

let person = { name: "Alice", age: 25 };
console.log(getProperty(person, 'name')); // "Alice"
```

在这个例子中，`T` 被约束为至少具有一个 `name` 属性的类型。

### 泛型在JavaScript中的实现

JavaScript 的泛型是通过 TypeScript 引入的，TypeScript 是一个超集于 JavaScript 的语言，它在编译时添加了类型检查。原生 JavaScript (ES5 及之前版本) 并不支持泛型，但现代 JavaScript (ES6+) 通过类型推断提供了一定程度的类型安全。

泛型是 TypeScript 的核心特性之一，它使得 JavaScript 开发者能够编写出更加健壮和可维护的代码。如果你使用的是 TypeScript 或者现代 JavaScript 编译器，你可以利用泛型来提升你的代码质量。

   */
  function fn<T>(a:T):T{
    return a;
  }




})()

8.贪吃蛇--例子ts练习

1.初始化文件-snakes

npm init -y

2.安装插件less和css

pnpm i -D less css less-loader css-loader

 安装postcss打包文件

 pnpm i -D postcss postcss-loader

3.配置文件：

3.1.webpack.config.js

// 导入一个路径包
const path = require("path")
// 导入webpack插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackplugin = require("html-webpack-plugin")
const { brotliCompress } = require("zlib")
// webpack中所有的配置信息都写在module.exports中
module.exports = {
  // 指定入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后的文件名
    filename: "main.js",
    environment: {
      // 告诉webpack使用箭头函数。
      arrowFunction: false,
    },
  },
  // 设置mode
  mode: "development",
  // 指定webpack打包时要使用的模块
  module: {
    // 指定加载规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          //配置babel
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              //设置预定义的环境
              presets: [
                [
                  //指定编译环境的插件
                  "@babel/preset-env",
                  //配置信息
                  {
                    //要兼容的目标浏览器
                    targets: {
                      chrome: "88",
                      ie: "11",
                    },
                    // 指定corejs的版本---corejs作用是在浏览器不支持时，调用自身的某一个方法进行补充
                    corejs: "3",
                    // 使用corejs的方式，按需加载usage
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ],

        // 要排除的文件
        exclude: /node_modules/,
      },
      //添加less配置环境
      {
        test: /\.less$/,
        //从下到上执行
        use: ["style-loader", "css-loader", "less-loader",
          //引入postcss
          {
            loader:"postcss-loader",
            options:{
              postcssOptions:{
               plugins:[
                [
                  "postcss-preset-env",
                  {
                    // 兼容两个最新的浏览器
                    browers:"last 2 versions"
                  }
                ]
               ]
              }
            }

        }],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackplugin({
      // 设置模板html
      template: "./src/index.html",
    }),
  ],
  //  用来设置应用模板
  resolve: {
    // 哪些文件可以用来当作引用文件
    extensions: [".ts", ".js",".less",".css"],
  },
}

3.2 tsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES5",
    "strict": true,
    "noEmitOnError": false
  }
}

3.3不想安装插件的，直接pnpm i 一键安装

前提是你创建了这个文件--package.json

{
  "name": "snack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack serve --open http://localhost:8080/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.38.0",
    "css": "^3.0.0",
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.0",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "postcss": "^8.4.41",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.0.0",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

目录：

 4.贪吃蛇less文件

//重置
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 主窗口的样式
#main{
  height: 800px;
  width:600px;
  background-color: #bfa;
  margin: 150px auto;
  border: 10px solid #000;
  border-radius: 13px;
  position: relative;
}
/**
主游戏界面
*/ 
#body{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #bcde97;
border: 2px solid #000;
height: 650px;
width: 550px;
/**
蛇
*/
  .snake{
    &>div{
      width: 10px;
      height: 10px;
      background-color: #000;
      border: 1px solid #565252;
      position: absolute;
    }
  }
  &>#food{
    width: 10px;
    height: 10px;
    position: absolute;
    left: 40px;
    top: 100px;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    &>div{
      width: 4px;
      height: 4px;
      transform: rotate(45deg);
      background-color: #000;
    }
  }
}
#footer{
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  height: 100px;
  width: 100%;
span{
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
font-weight: bolder;
  }
}

5.贪吃蛇ts文件

 

别催小唐敲代码
关注
JavaScript（JS）、ECMAScript（ES）和TypeScript（TS）
u013558123的博客
07-09 1060
JavaScript、ECMAScript和TypeScript是现代Web开发中不可或缺的技术。它们各自具有独特的特点和优势，相互补充，共同推动着Web开发的发展。了解它们的概念、特点、应用场景和发展历程，有助于我们更好地掌握和使用这些技术，提高开发效率，实现更高质量和更可靠的Web应用。
JavaScript进阶7之TypeScript
qq_34306228的博客
04-11 678
d.ts是所有类型的集合，全称是：declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容，参数不同，则场景不同，考虑到的情况也不一样。以上两种写法，一般都用第一种写法，比较规范，考虑到代码扩展性等。引入的是文件的类型，导出的时候也是按照文件模块/类型引用。关于ts配置项，tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块，是全局直接用。
前端JavaScript篇之js/ts如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型？使用TypeScript实现一个判断传入参数是否是数组类型的方法
星辰迷上大海的博客
01-27 691
在 JavaScript 中，定义一个数组，其元素可能是字符串类型，也可能是数值类型，可以简单地将不同类型的值放入同一个数组中。
Js和Ts学习总结
qq_51574704的博客
07-09 1474
Js和Ts学习记录
【前端面试3+1】22 JS和TS的区别、TS接口是什么、ts中类和接口的区别、【移除元素】
最新发布
qq_61798306的博客
08-27 811
本文包含：JS和TS的区别、TS接口是什么、ts中类和接口的区别、算法【移除元素】
js的进阶Ts
issa的博客
10-28 979
这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。类也是可以继承的，和java都是extend关键字，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。ts语言是对js的补充，使得js的可用性提高，同时也支持es6的语法，ts可以通过相应的编译器去变成我们可使用的js文件，不会引起一些错误。ts的使用需要node.js的支持，通过node的虚拟服务器去运行，首先要安装npm，没有的化就在终端。
javascript（JS / TS）攻克数据结构 --- 二周计划 JS/TS实现 （已完结）
秋天，黄叶坠地，凉风有信。
02-24 538
力扣 – 数据结构二周计划 第一天 – 数组 1、 存在重复元素 /* 解题思路：创建一个对象，用来存储是否有重复元素，若有重复元素则直接返回true，否则返回false */ function containsDuplicate(nums: number[]): boolean { let hash:object = {} for(let i =0;i<nums.length;i++){ if(!hash[nums[i]]){ hash[
JS与TS的区别
嘿嘿~
02-26 1453
在开始讲解前，先简单的介绍一些什么是TS：TS(TypeScript)是JS(JavaScript)类型的超集，主要提供了类型系统和对JS新标准的支持。简单理解TS就是JS的进化版本；JS比TS早出生17年；JS是一种动态脚本语言，适用于开发网页前端；TS是JS的加强版，引入了静态类型检查，并可以编译为普通JS。
Vue3 知识点总结
weixin_40011280的博客
03-21 1683
当数据更改时，将重新编译成虚拟DOM树，然后对前后两棵树进行比对（diff算法），仅将差异部分反映到真实DOM，这样既可最小程度的改动真实DOM，提升页面效率。知识点：Axios、Vuex、Stylus、插件、Vue Router、异步组件、递归组件、公用组件；{{content}} : 获取 vue里面data 里面的数据值，属双向绑定。实战项目：环境搭建、Git、数据模拟、本地开发；$就是个命名，帮你区分vue应用自身的属性，而不是你自己定义的属性。将生成的真实DOM树，放置到某个元素位置，称之为。
进阶vue面试题总结
bb_xiaxia1998的博客
10-19 737
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;（1）自定义指令基本内容钩子函数：指令定义对象提供钩子函数。
Mastering JavaScript Functional Programming, Second Edition.pdf
07-15
#### 知识点概述 本书《Mastering JavaScript Functional Programming, Second Edition》旨在帮助读者深入理解并熟练运用JavaScript中的函数式编程（FP）概念和技术。通过这本书，读者可以学习如何利用JavaScript...
关于前端的学习路线总结,用于梳理自己的学习路线
06-25
### 第三点五个阶段：知识深化与巩固 在这个阶段，你应该回顾和巩固前面所学，建立自己的知识库。不断总结和输出，深化理解。 ### 第四阶段：提升与实战 在这一阶段，你需要深入研究前端技术的细节和差异，如CSS...
TS真的比JS更好吗？
m0_68271787的博客
07-13 1875
在讨论TypeScript（TS）是否比JavaScript（JS）更好时，我们需要明确“更好”这一概念的上下文和衡量标准。TypeScript和JavaScript在多个方面有着明显的区别，但它们并不是简单的“好”与“不好”的关系，而是服务于不同的需求和场景。
2024年前端面试题JS+TS篇
xiaoliyo_的博客
04-28 1556
我希望我的解释和答案都是通俗易懂的
JS和TS的区别
chengxuyuan3629的博客
10-16 1万+
Ts与Js基础区别
TS和JS的区别
hhhxyyyzz的博客
02-23 8431
枚举代表的是一系列特定类型的对象 这是从别的编程语言派生出来的概念，所以我们不能用 js 的概念强加到它上面，其实枚举最好理解的就是一系列确定的常量。第三种情况：设置返回值类型为void，void:用来表示空，以函数为例，就表示没有返回值的函数,或者说 返回值为空 ，如果想要一点返回值都没有，设置返回值类型为never（永远不会返回结果）ts增加了重写，子类覆盖了父类中的属性或者是方法叫做重写 子类和父类同名的方法和属性，在子类中重新声明的时候，就覆盖了父类原本的内容））来控制类的成员的访问范围。
TypeScript 与 JavaScript 的区别（TypeScript万字基础入门，了解TS，看这一篇就够了）
高大志leo的博客
11-02 5083
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。 TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括： 类型批注和编译时类型检查 类型推断 类型擦除 接口 枚举 Mixin 泛型编程 名字空间
TS简单介绍以及用法
热门推荐
tinglis的博客
09-28 1万+
TS是TypeScript的缩写，是JavaScript的超集 （JS有的TS都有），也可以说TS是 type + js，加了一个类型。let a = 0为什么需要给JS添加type呢？因为js的类型系统存在“先天缺陷”，JS代码中绝大部分的错误都是类型错误，那么就会存在一个问题，那就是找bug、改bug的时间增加，严重影响了开发效率。从编程语言的动静来区分；TS属于静态类型的编程语言，JS属于动态的编程语言。动态编程语言：执行期间做类型检查静态编程语言：编译期间做类型检查更早发现代码中的错误，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值