Understand typescript and javascript in the time of a song

foreword

  Recently, in addition to daily work and life, I have gradually started to get in touch with vue3-related knowledge. When it comes to vue3, I have to start to get in touch with typescript. When I first started learning typescript, I didn't like ts very much, because it has a certain learning cost, the amount of code increases, and the complexity of code increases, which makes me very confused. After continuous learning later, I found that the static inspection of ts makes it really important for developers to find errors in advance (especially when I write vue2 projects with js during the day and learn and practice with ts at night).

  Let me show you a piece of advice about ts that I saw on other platforms. I hope it will be helpful for your ts study~

忠告:
不要学习TypeScript, 因为它的学习成本很低
不要学习TypeScript, 因为它能减少团队无效沟通
不要学习TypeScript, 因为它能让你的代码更健壮
不要学习TypeScript, 因为它能帮助你快速掌握其它后端语言
不要学习TypeScript, 因为你会迷恋它

text

  Today we will introduce the unique language of typescript from what is ts, the difference between ts and js, and the new features of ts.

what is ts

Introduction to ts

TypeScript是一种由微软开发的开源、跨平台的编程语言。
1、它是JavaScript的超集，最终会被编译为JavaScript代码。
//超集：TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中，主要提供了类型系统和对 ES6+ 的支持
2、TS和JS之间的关系其实就是Less/Sass和CSS之间的关系
//就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展
//就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS

Features of ts

• From JavaScript, to JavaScript
  TypeScript compiles to clean, concise JavaScript code that runs on any browser, in a Node.js environment, and in any JavaScript engine that supports ECMAScript 3 (or higher)
• Powerful type system
  The type system allows JavaScript developers to use efficient development tools and common operations such as static checking and code refactoring when developing JavaScript applications
• Advanced JavaScript
  TypeScript provides the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, such as asynchronous functions and Decorators, to help build robust components

New features of ts (a brief introduction to three)

type annotation

• Meaning:
  Type annotations are a lightweight way to add constraints to functions or variables. TypeScript provides static code analysis, which can analyze code structure and provided type annotations
• grammar:

(()=>{
    //定义一个函数fn，并传如注解默认为string类型
    function fn(str:string){//:string即为对str的类型注解
        return "你好啊！我是"+str
    }
    let text = "小跳跳"
    console.log(fn(text))
})()

• When will an error occur after using type annotations
    1. When fn does not pass the test parameter, the vscode code explodes as follows:
  
    2. When the passed test parameter is not of string type, the following error will appear:
  
• Summary: TypeScript provides static code analysis, which can analyze code structure and provided type annotations

interface

• The meaning
    is the abstraction (description) of the state (attribute) and behavior (method) of the object, and the interface is a type, a specification, a rule, and a constraint
• grammar:

// 1、定义一个接口，限定或者约束对象中的属性数据，interface是定义接口的关键字
interface Person {
    
    
  firstName: string
  lastName: string
}
//定义一个对象或函数，该对象的类型就是定义的接口
function greeter (person: Person) {
    
    
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}
let user = {
    
    
  firstName: 'Yee',
  lastName: 'Huang'
}
console.log(greeter(user))

• Summary:
  1. The interface cannot be converted to JavaScript. It is only a part of TypeScript
  2. When I first came into contact with the interface, I also felt that the role of the interface is not very big. I feel that it has not changed much from js, but as we continue to learn, we will slowly discover the ts interface (If you want to know more about the interface, please allow me to publish a few articles after sorting out the notes).

kind

• Meaning:
  TypeScript is object-oriented JavaScript. Classes describe the common properties and methods of objects created. TypeScript supports all object-oriented features, such as classes, interfaces, etc.
• grammar:

// 1定义一个类、class class_name { 
    // 类作用域
    //字段
    //构造函数
    //方法
}
//以下实例我们声明了类 Car，包含字段为 engine，构造函数在类实例化后初始化字段 engine
class Car {
    
     
    // 字段 
    engine:string; 
    // 构造函数 
    constructor(engine:string) {
    
     
        this.engine = engine 
    }  
    // 方法 
    disp():void {
    
     
        console.log("发动机为 :   "+this.engine) 
    } 
}
//2、创建实例化对象
//var object_name = new class_name([ arguments ])

// 创建一个对象
var obj = new Car("XXSY1")
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
// 访问方法
obj.disp()

• Summary:
  Re-run the ts file, you will see that the class in TypeScript is just a syntactic sugar, which is essentially the implementation of JavaScript functions

Interview questions about this part of ts

1. What is Typescript?

-TypeScript是一种由微软开发和维护的免费开源编程语言。它是一个强类型的JavaScript超集，可编译为纯JavaScript
-TypeScript可以在任何浏览器、主机和操作系统上执行。TypeScript不是直接在浏览器上运行的。它需要一个编译器来编译和生成JavaScript文件。TypeScript是带有一些附加特性的ES6 JavaScript版本。

2. Why more and more enterprises choose to use TypeScript?

 - TypeScript 更具表现力，这意味着它的语法混乱更少。
 - 由于高级调试器专注于在编译时之前捕获逻辑错误，因此调试很容易。
 - 静态类型使 TypeScript 比 JavaScript 的动态类型更易于阅读和结构化。
 - 由于通用的转译，它可以跨平台使用，在客户端和服务器端项目中。

3. What are the main features of TypeScript?

-跨平台：TypeScript编译器可以安装在任何操作系统上，例如Windows，MacOS和Linux。
-面向对象的语言：TypeScript提供了诸如类，接口和模块之类的功能。 因此，它可以为客户端和服务器端开发编写面向对象的代码。
-静态类型检查：TypeScript使用静态类型，并在编译时帮助进行类型检查。 因此，您无需运行脚本即可在编写代码时发现错误。
-可选的静态键入：如果您使用的是JavaScript动态键入，TypeScript还允许可选的静态键入。
-DOM操作：可以使用TypeScript来操作DOM以添加或删除元素。
-ES6功能：TypeScript包括计划的ECMAScript 2015（ES6，7）的大多数功能，例如类，接口，箭头功能等。

4. What is the difference between TypeScript and JavaScript?

typescript	javascript
object-oriented language	scripting language
static type	no static typing
support module	module not supported
Support for optional parameters	Optional parameters are not supported

5. What are the disadvantages of using TypeScript?

-TypeScript需要很长时间来编译代码。
-它不支持抽象类。
-如果我们在浏览器中运行TypeScript应用程序，则需要执行编译步骤才能将TypeScript转换为JavaScript。
-网络开发人员使用JavaScript已有数十年了，TypeScript并没有带来任何新的东西。
-要使用任何第三方库，定义文件是必须的。
-类型定义文件的质量是一个问题。

6. What are the components of TypeScript?

-语言，它由语法，关键字和类型注释组成。
-TypeScript编译器，编译器（tsc）将用TypeScript编写的指令转换为等效的JavaScript。
-TypeScript语言服务，语言服务在核心编译器管道（类似于编辑器的应用程序）周围暴露了一个附加层。 语言服务支持一组常见的典型编辑器操作。

  The above is my ts sharing in this issue. If you have more content about ts, please continue to pay attention~