少し前に、vue3 と elementPlus の公式 Web サイトで ts 構文をたくさん見ましたが、vue3 に移行するために、ts、pinia、vue3 を組み合わせた構文を学び、今後のプロジェクトで使用できるようにしました。
Ts はシリコンバレーのチュートリアルを見ました。
エピソード 2: 宣言構文。a:number の後に基本型を続けます。(number, string, boolean,) または let c:boolean=true//変数を宣言し、その型を数値として指定します。js と ts を同時に開くとエラーが報告されます。どちらかをオフにしてください。c=false にすると c は自動的に bool 型に変更され、変数の代入と宣言を同時に行うと ts が自動的に変数を検出します。T のその他のアプリケーション シナリオは関数用です。たとえば、関数 sum(a,b){return a+b} が js で sum(123, "456") を呼び出す場合、ウェブストームのプロンプトである a: と b: を追加しないでください。解決策: 関数 sum(a:number,b:number){return a+b}。どれを使っても使わなくても構いません。
関数の戻り値の型 function sum(a:number,b:number):number{return a}。
エピソード 3: ts (拡張 js 型) の型。型宣言にリテラルを使用できます。a:10、a=11 とするとエラーが報告されます。リテラルの一般的な使用法: let b: " Male" | " Female" または let c: boolean | string;
any (任意の型) 変数の型を any に設定することは、変数の ts 型検出をオフにすることと同じです。ts を使用する場合は推奨されません。タイプが指定されていない場合、デフォルトは any です。
Unknown (不明なタイプ)、e: 不明、任意のタイプの値を他の値に割り当てることができる、s: 文字列; d; s=d; d=2 とします。
Unknown は異なります。let e:unknown;e='hello',let s:string;s=e (エラーが報告されます)、unknown はタイプ セーフの any、未知の型の変数を他の変数に直接割り当てることはできません。解決策: if(typeof e===”string”){ S=e;}。型アサーション: s=e としての文字列または s=a void が関数の型の戻り値に使用されます (null 値の未定義)。Never は結果が決して返されないことを意味します。たとえば、 function fn2():never{ throw new Error('Error reports')}エピソード 4: let b:{name:string} などのタイプ オブジェクト。オブジェクトには name 属性のみが含まれている必要があり、値はtype string、オプションのパラメータ let b:{name:string,age?:number} any 属性 let c{name:string,[propName:string]:any} オブジェクトには name 属性が必要ですが、その他の属性は問題ありません。関数属性を定義します let d:(a:number,b:number)=>number,d=function(n1:number,n2:number):number{return n1+n2} Array:let e:number [];e is 数値配列、または let g:Array、任意の型 let g:Array Turple: タプル、固定長配列。h:[文字列,文字列],h=['hello','abc'] とします
列挙型: 列挙、列挙 Gender{男性=0,女性=1},let i:{name:string,gender:Gender};i={name:'swk',gender:Gender. Male}console.log(i .ジェンダー===ジェンダー.男性)、
& 演算子、j:{name:string}&{age:number} に
エイリアスを入力させます: k:1|2|3|4|5;myType=1|2 |3 を入力させます|4|5;let m:myType;
エピソード 5: vscode を使用して、最初に tsc –init を実行して ts 管理パッケージにし、その後 tsc コマンドを使用できるようになります。Tsconfig.json は ts コンパイラの設定ファイルです。含める、** 任意のディレクトリ、* 任意のファイル、含めるファイルを含める、除外するファイルを除外する。拡張は設定ファイルを継承します。ファイル: コンパイルするファイルを制限します。少数のファイルをコンパイルする場合にのみ使用してください。CompilerOptions: コンパイラ オプション、ターゲット: "ES6"、"ESNext" 最新の ES バージョン。Module モジュールは、使用するモジュール仕様を指定します。デフォルトは ES6 です。Lib はライブラリを表し、プロジェクトで使用するライブラリを指定するために使用されます。コードが nodejs で実行されるとき、dom と outDir はコンパイルされた js が配置されるディレクトリを指定するために使用されます。outFile はコードを 1 つのファイルに結合します。実際には、パッケージ化ツールが使用されることはほとんどありません。
第6話：allowJs:true ディレクトリ内のjsファイルをコンパイルするかどうか。checkJs:false は、js コードが文法仕様に準拠しているかどうか (ts 文法仕様に準拠しているかどうか) をチェックします。この２つがセットになっています。RemoveComments:false コメントを削除するかどうか。noEmit:true はコンパイル済みファイルを生成しません。noEmitOnError: エラーが発生した場合にコンパイル済みファイルを生成しません。alwaysStrict:false. js ファイルの最初の行に「use strict」を追加して、strict モードを有効にします。noImplicitAny: true は、暗黙的な any クラスの使用を禁止します。noImplicitThis: true、あいまいな this 型を許可しません。strictNullChecks: true で空の文字列を厳密にチェックします: "strict": false すべての厳密なチェックのマスター スイッチ。
webpack を使用してパッケージ化するのは省略しましたが、vite を使用してパッケージ化するときは、オンラインで情報を確認するだけで済みます。
第 13 話: class Person{ readonly name:string=“Monkey King” static age:number=18 SayHello(){ console.log(“hello”) } } const per=new Person() console.log(per) console Basic .log(Person.age)クラスの使用法、静的プロパティ、および読み取り専用プロパティ。静的と読み取り専用は併用できます。第14話：クラスコンストラクタの基本的な使い方：class Dog{ name:string age:number
constructor(name:string,age:number){ this.name=name this.age=age } bark(){ alert('bark woof woof') } } const Dog=new Dog('小黑',4) const Dog2 =new Dog('小白',8)第 15 話: 継承: (function(){ class Animal{ name:string age: numberconstructor(name:string,age:number){ this.name=name; this . age=age; } sayHello(){ console.log('動物が吠えています') } } class Dog extends Animal{ sayHello(){ console.log('犬が吠えています') } } class Cat extends Animal{
}
})
第 16 話: super キーワードの使い方は Python や Java と変わりません。構文を理解するだけです。継承構文は、デフォルトで親クラスのすべてのメソッドと変数を使用し、それをサブクラスのリソースで上書きします。スーパーは親クラスまたは親クラスのインスタンスを表しますが、印刷できません。主に、スーパーが親を使用するために使用されます。クラスコンストラクター。
(function(){ class Animal{ name:string constructionor(name:string){ this.name=name; } SayHello(){ console.log('動物が吠えています') } } class Dog extends Animal{ age:numberコンストラクター (名前:文字列,年齢:番号){ super(名前) this.age=年齢} SayHello(){ console.log(this.age+"year-old"+this.name+"barking") } } const Dog= new Dog("犬",18) Dog.sayHello() })()
エピソード 17: 抽象クラスの前に abstract を追加します。これは継承のみに使用でき、インスタンスの作成には使用できません。抽象クラス内のメソッド名の前にabstractが付いているものは抽象メソッドであり、サブクラスはそれを実装する必要があります。
エピソード 18: インターフェイスは、クラスの構造を定義し、それに含まれる変数とメソッドを宣言するために使用されます。インターフェイスは繰り返し定義でき、追加されます。インターフェースの基本的な使い方。インターフェイス内のすべてのプロパティに実際の値を含めることはできません。インターフェイスは抽象クラスに似ていますが、インターフェイスのメソッドが抽象メソッドであるのに対し、抽象クラスは実際のメソッドを持つことができるという点が異なります。呼び出すにはインプルメントを使用します。
これらの概念は ts でのみ使用できます。
エピソード 19: 属性に外部からアクセスできるようにクラスにメソッドを追加することによる属性のカプセル化。
class Person{ private _name:string private _age:numberconstructor (name:string,age:number){ this._name=name this._age=age } //名前属性を取得するメソッドを定義getName(){ return this._name } setName (値:文字列){ this._name=value } setAge(年齢:番号){ if(年齢>=0){ this._age=年齢} } }
const per=new Person('孫悟空',18)
属性アクセサ
get name(){ return this._name } set name(name:string){ this._name=name } } const per=new Person('孫悟空' ,18) console.log(per.name) protected 保護された属性は、現在のクラスとそのサブクラスでのみ使用できます。第 20 話: ジェネリックという非常に面倒な書き方ですが、後で使用するときに話しましょう。