如何使用 vue + typescript 编写页面 （typescript简单语法篇）

在使用typescript编写项目以前，须要有必定的js【es6】基础知识。在学习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<never>;
// 或者等价于
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.!: 与 ?:

在咱们编写代码的时候，常常会遇到 !: ?:这两个组合符号，它们和 : 有什么不一样？

!: 表示必定存在，?:表示可能不存在 这两种在语法上叫赋值断言

所以：

/* : 能够在任何须要的场合使用 */
 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生命周期函数）