美文网首页
TypeScript 基础语法

TypeScript 基础语法

作者: 四月天__ | 来源:发表于2019-07-18 11:28 被阅读0次

1、voidundefinednull

void的区别是,undefinednull是所有类型的子类型。也就是说 undefined类型的变量,可以赋值给 number类型的变量也可以赋值给String类型的变量

voidJavaScript里是没有的,在TSvoid 表示没有任何返回值的函数

function alertName(): void {
    alert('My name is Tom');
}

注意: 是不可以赋值给 numberstring 类型的变量的。

// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
// 报错
let u: void;
let num: number = u;

// index.ts(2,5): error TS2322: Type 'void' is not assignable to type 'number'.

2、任意值 any

如果是一个普通类型,在赋值过程中改变类型是不被允许的:

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is 
// not assignable to type 'string'.

但如果是 any类型,则允许被赋值为任意类型。

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

注:变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型

3、类

3.1、类的声明
3.2、构造函数 constructor

构造函数是类的特殊方法,只有在类被实例化的时候调用,而且只被调用一次。

class Person{
    name;
    constructor(name:string) {
        console.log("haha");
    }
    eat() {
        console.log("i am eating");
    }
}

var p1 = new Person("batman");
p1.eat();

var p2 = new Person("superman");
p2.eat();

下面是简写方法,非常常用:注意简写时候constructor必须声明访问控制符。

class Person{
    constructor(public name:string) {
    }
    eat() {
        console.log(this.name);
    }
}

var p1 = new Person("batman");
p1.eat();

var p2 = new Person("superman");
p2.eat();

在构造函数时必须明确指定访问控制符。 constructor(public name:string)constructor(name:string)是不一样的。

3.3、类的继承

两个关键字:
extends:用来声明类的继承关系
super:调用父类的构造函数或者方法
super的作用:
         1、调用父类的构造函数(必须调用)
         2、调用父类的其他函数(非必须)

注:子类在继承父类的时候,如果父类有构造函数并且子类也声明构造函数的时候,子类的构造函数必须调用父类的构造函数并且父类的参数也是比传的。使用super()来调用父类构造函数。
class Employee extends Person {
  constructor(public name: string) {
    // super(name)
  }
}

下面是报错信息


2175CC73-8B26-48F9-B362-28A063019042.png

4、接口

两个关键字:
interface声明接口
implements实现接口

4.1 interface 用法:声明

4.1.1 使用接口作为方法的参数的类型声明

interface IPerson {
  name: string;
  age: number;
}

class Person {
  constructor(public config: IPerson) {
    console.log('My name is ' + config.name + ' age is ' + config.age)
  }
}

let p1 = new Person({ name: 'siyuetian', age: 22 });

4.1.2 用接口声明方法

注: 所有声明实现这个接口的类必须实现这个方法。
interface  Animal {
  eat();
}

class Sheep implements Animal {
  // 所有声明实现这个接口的类必须实现接口声明的方法。
  eat() {
    console.log('I eat grass');
  }
}

5、注解annotation

6、类型定义文件

如何在ts中用jquery?

类型定义文件(*.d.ts):帮助开发者在TypeScript中使用已有的JavaScript的工具包,如:JQuery.

实际上就是一个TypeScript模块,把你要使用的avaScript的工具包里面的工具以TypeScript的类或者是模块的方式暴露出来供你在你的模块里去import。

ts中使用jquery:

jquery的类型定义文件就是jquery.d.ts拷贝到目录下即可。

或者通过 npm install --save @types/jquery 来安装类型定义文件。

工具:Typings 专门用来安装类型定义文件的。

7、解构

7.1 对象解构,就是一般的ES6解构
7.2 嵌套解构和重命名

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2:400
        }
    }
}
//解构的时候还可以重命名变量值
var { code: codeX, price:{price2} } = getStock();
console.log(codeX);//重命名
console.log(price2);//嵌套的值 析构里再写个析构

8、函数
https://github.com/xcatliu/typescript-tutorial/blob/master/basics/type-of-function.md

参考:https://www.cnblogs.com/starof/p/6963377.html
https://ts.xcatliu.com/advanced/class-and-interfaces

相关文章

  • TypeScript 基础语法

    1、void 与 undefined和 null 与 void的区别是,undefined 和 null是所有类...

  • TypeScript 基础语法

    TypeScript 程序由以下几个部分组成: 模块 函数 变量 语句和表达式 注释 使用以下 TypeScrip...

  • 《TypeScript》 - 基础语法

    TypeScript 程序由以下几个部分组成: 模块 函数 变量 语句和表达式 注释 tsc 常用编译参数如下表所...

  • TypeScript 基础语法

    TypeScript 的注释 首先我们来看一下注释,注释其实就是对代码的解释和说明,目的是让人们能够更加轻松地了解...

  • TypeScript 基础语法

    TypeScript 的注释 首先我们来看一下注释,注释其实就是对代码的解释和说明,目的是让人们能够更加轻松地了解...

  • TypeSctipt语法和类型基础

    TypeScript基础语法 TypeScript程序由以下部分组成: 模块 函数 变量 语句和表达式 注释 ts...

  • TypeScript基础语法篇

    TypeScript教程 参考,阮一峰:https://ts.xcatliu.com/basics/type-of...

  • 学习 typescript 基础语法

    typescript 安装 npm install -g typescript 编译 tsc 文件名 TypeSc...

  • TypeScript 基础语法入门

    Vue3 基本全部使用 TypeScript 来进行重写,尽管你可能觉得要学的东西越来越多了,但是作为程序员,如果...

  • TypeScript 进阶语法

    本文接 TypeScript 基础语法入门[https://www.jianshu.com/p/8fe11ebb7...

网友评论

      本文标题:TypeScript 基础语法

      本文链接:https://www.haomeiwen.com/subject/levklctx.html