vue+typescriptを使用してページを作成する方法(typescript簡単な文法編)

typescriptを使用してプロジェクトを作成する前に、js【es 6】の基礎知識が必要です.tsを学習する過程で,クラス比jsの違いは,基本的な結合を達成する.開発ではjsエラーを除いた部分がほとんどtsの意味で限定される.
typescript基本内容
1.変数の説明
変数が明らかになったとき、jsと同じですが違います.同じは変数申明記号が同じであり、異なるのは追加タイプ制限が必要である.もしあなたが強いタイプの言語開発者であれば

// js   
var name;
let age;
const eat;
function play(bool){}

// ts   
var name:string;
let age:number;
const eat:Function; //  Function   ， function          ，     
function run(bool:string):void { 
    /*
           ，        ，
                       
    */
}

タイプ宣言では、この変数が任意のタイプの値を受け入れることができることを示す汎用タイプanyがあり、構文器も現在のパラメータがnull/undefinedであることを無視します.推奨:特別な場合を除き、anyをパラメータタイプとして使用しないでください.後で変更するときに不要なエラーが発生します.
1.1その他の状況

//      ，          
//          ，    ，push 。
var classes:[];
//             
var classes:Array;
//      
var classes:never[];

never ts独自の修飾タイプで、現在何もないことを示します.undefined/nullとは異なり、tsはneverの宣言のみ存在し、neverという値は存在しない.

//    
var a:never;
var b = a;
//    a      ，       a。  ，   a        ，         never，  a        。

//   ，       ？
//       
var a:never[] = [];
var b:never = a[0];

//           never ？
var a = { b:never /*Error: “never”     ，          。 */ }

2.classオブジェクト向けクラス

単独js表記はtsと変わらず、マルチ継承

はサポートされていない.

class A {  }
class B extends A { }

//         ，            
class Animal { 
    name:string;
    constructor(name:string){
        this.name = name;
    } 
}
class Dog extends Animal {
    constructor(name:string){ 
        super(name)
    } 
}

jsにはinterfaceはないが、tsの下には、マルチインプリメンテーションインタフェース

をサポートする.

interface A {  }
interface B extends A { }
class C implements A,B { }

interfaceはタイプ限定に使えますか?答えはいいです.TSにとって,タイプ限定とは属性タイプと名前が一致するだけであり,タイプと名前とはあまり関係がない.

interface A { name: string; age: number }
interface B { name: string; age: number }
class C { name!: string; age!: number }
var a: A = new C;
var b: B = new C;
var c: C;
//        ，            
//        Error:         “c”。
a = b = c;

3.申明タイプ可変
jsはvar重複宣言をサポートし、tsには重複宣言をサポートするものがある

/*               。  “a”      “string”，       “number” */
var a:string;
var a:number;

//        ，        ，     
interface A { name: string; age: number }
interface B { name: string; age: number }
class C { name!: string; age!: number }
var a: A;
var a: B;
var a: C;

4.!:と?:コードを書くとき、!: ?:という2つの組み合わせ記号によく遭遇します.:と何が違いますか.!:は必ず存在することを表し、?:は存在しない可能性があることを表す.
したがって、次のようになります.

 /* :              */
 var a:number;
 
 //             
 var a!:number;
 var a?:number;
 
 // ?:            
 var a = { name?:"Pluto" }

付与の断言について:通常classの中で彼らの姿を見ることができます

class a {
    sad!: string;
    //          
    sad!: string = 'so sad';
    
    //       ，   
    age?: number = 2;
    
    bg = { age!: 16 }
}

Vueで最も一般的な肯定的な断言はpropとstoreが導入されたことだ.私たちは彼らがすでに存在していると確信しているからだ.

@Component
export default class MyComponent extends Vue {
    @Prop({ default : "" }) myName !: string;
    @State  mystate !: boolean;
}

Vueで最も一般的な否定的断言は関数パラメータとタイプ定義である.

interface A { 
    name:string
    /*    ，age     ，        */
    age?:number
}

var a:A = { 
    name:"16"
}

function getSome(some?:string){
    /*                               */
    return some||""
}
function getSome(some:string=""){
    return some
}

5.初期値属性の付与
tsでclassで定義された属性に初期値が付与されていない場合、コンパイル後は存在しません.

class A {
    name!:string;
}
new A() .hasOwnProperty("name") // false

詳細オンラインTSコンパイル結果照合
前章では、vue+typescriptを使用してページを作成する方法(Vueライフサイクル関数)