如何使用 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生命周期函数）

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