TypeScript基础篇

83 阅读4分钟

JavaScript 被称作是一种**「动态」** 脚本语言, 缺乏静态强类型

ts的优点

  • 更好的可维护性和可读性
  • 引入了静态类型声明,不需要太多的注释和文档,大部分的函数看类型定义就知道如何使用了
  • 编译节点可以发现因为变量类型导致的错误

ts的困难

  • 类型定义:对于复杂对象来说,要定义多层
  • 第三方库: 如果不是ts写的,需要为三方库编写声明文件
  • 新概念:TypeScript 中引入的类型(Types)、类(Classes)、泛型(Generics)、接口(Interfaces)以及枚举(Enums)

使用ts

//新建一个ts 文件

// index.ts  
function sayHello(name: string): string {  
return`Hello ${name}`;  
}  
  
const me: string = 'axuebin';  
console.log(sayHello(me))

执行 tsc index.ts 编译一下,在同级文件夹下生成了一个新的文件 index.js


function sayHello(name) {  
return"Hello " + name;  
}  
var me = 'axuebin';  
console.log(sayHello(me));

TypeScript 代码在编译后都消失了。因为 TypeScript 只会进行静态检查,如果代码有问题,在编译阶段就会报错。

假如向函数中传入一个number 类型的参数

index.ts:6:22 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

但是,这里要注意的是,即使报错了,tsc 还是会**「将编译进行到底」**,还是会生成一个 index.js 文件:

基础类型和变量声明

JavaScript 中有 7 种数据类型,分别是:

Boolean


const isBetterCode: boolean = new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.
// 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

// new Boolean 返回的是一个对象

// 两个小点
new Boolean('') == false
new Boolean(1) === true

number 数字

number 类型支持十进制、十六进制等,以及 NaN 和 Infinity 等。

const count: number = 1;
const binary: number = 0b1010; // 10
const hex: number = 0xf00d; // 61453
const octal: number = 0o744; // 484
const notNumber: number = NaN; // NaN
const infinityNumber: number = Infinity; // Infinity

string 字符串

使用 string 定义字符串类型的变量,支持常规的单引号和双引号,也支持 ES6 的模板字符串

void 空

可以用 void 来表示任何返回值的函数:

function hello(): void {
	console.log('hello typescript');
}

null 和 undefined 空

undefined 类型的变量只能被赋值为 undefinednull 类型的变量只能被赋值为 null

不过你可以把 undefined 和 null 类型的变量赋给 void 类型的变量

any

any 类型的变量可以被赋予任意类型的值

类型推论

声明变量的时候,如果对变量进行赋值,如果该变量没有明确地指定类型,TypeScript 会推测出一个类型。

let number = 'one'; // 相当于 let number: string = 'one';
number = 1; // Type '1' is not assignable to type 'string'.

array 数组

在 TypeScript 中,数组是通过「类型 + 方括号」来定义:

const me: string[] = ['axuebin', '27']; // 定义一个都是 string 的数组
const counts: number[] = [1, 2, 3, 4]; // 定义一个都是 number 的数组
// error
const me: string[] = ['axuebin', 27]; // Type 'number' is not assignable to type 'string'.
counts.push('5'); // Argument of type '"5"' is not assignable to parameter of type 'number'.

还有一种方式是使用泛型:

const counts: Array<number> = [1, 2, 3, 4]; // 使用泛型定义一个都是 number 的数组

tuple 元组

还有一种特殊的情况,如果我们需要定义一个已知元素和类型的数组,但是各个元素的类型不相同,可以使用 tuple 元组 来定义:

const me: [string, number, boolean] = ['axuebin', 27, true];

当我们想要在这个数组 push 一个新元素时,会提示 (string | number | boolean),这是表示元组额外增加的元素可以是之前定义的类型中的任意一种类型。(string | number | boolean) 称作联合类型

eunm 枚举

枚举是 TS 对 JS 标准数据类型的补充,Java/c 等语言都有枚举数据类型,在 TypeScript 里可以这样定义一个枚举:

enum Animal {
	Cat,
	Dog,
	Mouse,
}
const cat: Animal = Animal.Cat; // 0
const dog: Animal = Animal. Dog; // 1

函数

给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型

function add(x: string, y: string): string{ 
  return "Hello TypeScript"; 
}

可选参数和默认参数

  • TypeScript 里我们可以在参数名旁使用?实现可选参数的功能
  • 如果带默认值的参数出现在必须参数前面,用户必须明确的传入 undefined 值来获得默认值
function buildName2(firstName = "鸣", lastName?: string){
    console.log(firstName + "" + lastName)
}

let res4 = buildName2("人"); // undefined人
let res5 = buildName2(undefined, "人"); // 鸣人

基本用法

class Person{
    name:string; // 这个是对后文this.name类型的定义
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    print(){
        return this.name + this.age;
    }
}

let person:Person = new Person('muyy',23)
console.log(person.print()) // muyy23

继承

class Person{
    public name:string;  // public、private、static 是 typescript 中的类访问修饰符
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    tell(){
        console.log(this.name + this.age);
    }
}

class Student extends Person{
    gender:string;
    constructor(gender:string){
        super("muyy",23);
        this.gender = gender;
    }
    tell(){
        console.log(this.name + this.age + this.gender);
    }
}

var student = new Student("male");
student.tell();  // muyy23male