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

小灰灰 2022-03-16 14:18 375阅读 0赞

在使用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编译结果对照][TS]

[上一章 如何使用 vue + typescript 编写页面 （Vue生命周期函数）][_ vue _ typescript _ _Vue]

[TS]: https://link.juejin.im?target=https%3A%2F%2Fwww.tslang.cn%2Fplay%2Findex.html
[_ vue _ typescript _ _Vue]: https://juejin.im/post/5c6bbcfbf265da2da955ab79