在使用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生命周期函数)

Logo

前往低代码交流专区

更多推荐