歌の時間に typescript と javascript を理解する

序文

最近、日常の仕事や生活に加えて、徐々に vue3 関連の知識に触れるようになりました。vue3になると、まずはtypescriptに触れないといけないのですが、typescriptを学び始めた頃は、tsは学習コストがかかるし、コード量が増えて複雑になるので、あまり好きではありませんでした。コードの数が増えるので、とても混乱します。後で継続的に学習した後、ts の静的検査により、開発者が事前にエラーを見つけることが非常に重要になることがわかりました (特に、日中に js を使用して vue2 プロジェクトを作成し、夜に ts を使用して学習および練習する場合)。
ここに画像の説明を挿入
他のプラットフォームで見た ts についてのアドバイスを紹介します。ts勉強の参考になれば幸いです～

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

文章

本日は、tsとは何かからtypescriptという独自の言語、tsとjsの違い、tsの新機能について紹介します。
ここに画像の説明を挿入

tsは何ですか

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

tsの特徴

JavaScript から JavaScript へ
TypeScript は、任意のブラウザー、Node.js 環境、および ECMAScript 3 (またはそれ以降) をサポートする任意の JavaScript エンジンで実行されるクリーンで簡潔な JavaScript コードにコンパイルされます。
強力な型システム
型システムにより、JavaScript 開発者は効率的な開発ツールと、JavaScript アプリケーションの開発時に静的チェックやコードリファクタリングなどの一般的な操作を使用できます。
高度な JavaScript
TypeScript は、ECMAScript 2015 の機能や、非同期関数やデコレーターなどの将来の提案を含む最新の進化する JavaScript 機能を提供し、堅牢なコンポーネントの構築を支援します。

ts の新機能 (3 つの簡単な紹介)

タイプ注釈

意味:
型注釈は、関数または変数に制約を追加する軽量な方法です. TypeScript は、コード構造と提供された型注釈を分析できる静的コード分析を提供します
文法：

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

型注釈を使用した後にエラーが発生するのはいつですか
1. fn がテストパラメーターを渡さない場合、vscode コードは次のように爆発します。

2. 渡されたテストパラメーターが文字列型でない場合、次のエラーが表示されます。
概要: TypeScript は、コード構造と提供された型注釈を分析できる静的コード分析を提供します。

インターフェース

意味
はオブジェクトの状態（属性）と振る舞い（メソッド）の抽象化（記述）であり、インタフェースは型、仕様、規則、制約です
文法：

// 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))

概要:
1. インターフェースを JavaScript に変換できません。TypeScript 2のほんの一部です.
インターフェースに初めて触れたときも、インターフェースの役割はそれほど大きくないと感じました.jsからあまり変わっていないように感じます. 、ゆっくりと ts インターフェイスを発見します (インターフェイスについて詳しく知りたい場合は、メモを整理した後にいくつかの記事を公開することを許可してください)。

親切

意味:
TypeScript はオブジェクト指向の JavaScript です. クラスは、作成されたオブジェクトの共通のプロパティとメソッドを記述します. TypeScript は、クラス、インターフェイスなど、すべてのオブジェクト指向の機能をサポートします.
文法：

// 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()

概要:
ts ファイルを再実行すると、TypeScript のクラスが単なるシンタックスシュガーであり、本質的に JavaScript 関数の実装であることがわかります。

ts のこの部分に関するインタビューの質問

1. タイプスクリプトとは?

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

2. TypeScript の使用を選択する企業がますます増えているのはなぜですか?

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

3. TypeScript の主な機能は何ですか?

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

4. TypeScript と JavaScript の違いは何ですか?

タイプスクリプト	JavaScript
オブジェクト指向言語	スクリプト言語
静的タイプ	静的型付けなし
サポートモジュール	モジュールはサポートされていません
オプションのパラメータのサポート	オプションのパラメーターはサポートされていません

5. TypeScript を使用するデメリットは何ですか?

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

6. TypeScript のコンポーネントは何ですか?

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

上記は今号で共有している ts です. ts についてさらにコンテンツがある場合は、引き続き注意してください~
ここに画像の説明を挿入