初探TypeScript 基础篇

前言

因为本身目前在学习typescript;想着边学习变作笔记，日后也能够翻出来看看，也分享出来给像我同样的初学者一块儿学习。望各位大佬指教。

简介

什么是TypeScript

TypeScript是Javascript的类型的超级，它能够编辑成Javascript，编译出来的代码能够运行在任何浏览器上，TypeScript编译工具能够运行在任何服务器和系统上，而且它是开源的。
复制代码

为何要选择TypeScript

1. TypeScript增长了代码的可读性和可维护性
    能够在编辑的夹断就发现大部分错误，比在运行程序的时候发现错误更加直观；
    加强了编辑器和IDE的功能，包括代码补全、接口提示等等
2. 拥有活跃的社区
    大部分第三方库都有提供TypeScript的类型定义文件
复制代码

安装TypeScript

TypeScript 的命令行工具安装方法以下：

npm i -g typescript

以上命令会在全局环境下安装 tsc 命令，安装之后咱们就能够在任何终端执行tsc命令了。咱们能够简单的建立一个文件 hello.tsc 咱们能够经过命令到当前文件所在目录，执行命令

tsc hello.tsc

编辑前代码 hello.tsc

function sayHello(person: string) {
    return `Hello,${person}`;
}
let user = 'Mark';
console.log(sayHello(user));
复制代码

执行tsc hello.tsc后咱们会看到同级目录下面会自动生成一个hello.js

function sayHello(person) {
    return `Hello,${person}`;
}
let user = 'Mark';
console.log(sayHello(user));
复制代码

加入咱们在sayHello方法中传入的是一个非string类型的参数 会发生什么呢

function sayHello(person: string) {
    return `Hello,${person}`;
}
let user = 10010;
console.log(sayHello(user));
复制代码

编辑器中会提示错误，编译的时候也会出错：Argument of type 'number' is not assignable to parameter of type 'string'. 此时你会发现 TypeScript 编译的时候即便报错了，仍是会生成编译结果，咱们仍然可使用这个编译以后的文件。

基础

上面简单的介绍了下TypeScript的安装及简单的hello实例，下面会介绍TypeScript 中的经常使用类型和一些基本概念，这样能够对TypeScript有个初步的了解；

原始数据类型

原始数据类型只要包括：boolean number string null undefined 以及es6中新的类型Symbol； 下面咱们介绍：boolean number string null undefined在TypeScript中的使用

boolean

boolean是最基础的数据类型，在TypeScript 使用boolean定义布尔值类型；

let isSay: boolean = false; //编译经过
    // 咱们在看下面一个 假如咱们使用构造函数建立一个布尔值是否会编译用过呢？？？？
    let createBoolean: boolean = new Boolean(8); // Type 'Boolean' is not assignable to type 'boolean'.
    // 因此使用构造函数 Boolean 创造的对象不是布尔值：
复制代码

number

使用number定义数值类型：

let age: number = 25 // 编译经过
    // 一样若是咱们age变量赋值的为非number 编译就会报错
复制代码

string

使用string定义数值类型：

let name: string = 'mark' // 编译经过
    // 一样若是咱们name变量赋值的为非string 编译就会报错
复制代码

空值

在JavaScript中是没有空值（Void）的概念，可是在 TypeScript 中，能够用 void 表示没有任何返回值的函数：

function sayHello(): void{
        console.log('我没有任何返回值')；
    }
复制代码

null & undefined

在 TypeScript 中，可使用 null 和 undefined 来定义这两个原始数据类型：

let m: undefined = undefined;
    let n: null = null;
复制代码

注意： 由于undefined 和 null 是全部类型的子类型，因此null undefined能够赋值给其余类型

let m: undefined = undefined;
    let age: number = m;
    // 编辑经过
复制代码

任意值

任意值（any）用来表示容许赋值为任意类型。

什么是任意值类型

上面咱们说到，若是是一个普通类型，在赋值的过程当中改变类型是不容许的 可是若是是any类型，那么容许被赋值为任意类型。

let age: number = 1; // 普通类型只能赋值number
    age = 'one'; // 报错
    let anyAge: any = 'one'; 
    anyAge = 1; // 编辑经过
复制代码

类型推论

若是没有明确的指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型。 例如：

let age = 1;
    age = 'one';
    //TypeScript 会在没有明确的指定类型的时候推测出一个类型 
    等价于
    let age: number = 1;
    age = 'one';
复制代码

联合类型

联合类型？

联合类型表示取值能够为多种类型中的一种。

let age: string | number;
    age = 1;
    age = 'one';
    // 以上编译是经过的;
    // 若是age是boolean呢
    age = false; // 编译报错
复制代码

经过以上代码 能够获得一个结论：let age: string | number时，age的类型只能是string or number ，不能是其余类型。

访问联合类型的属性和方法

当 TypeScript 不肯定一个联合类型的变量究竟是哪一个类型的时候，咱们只能访问此联合类型的全部类型里共有的属性或方法：

let age: string | number;
    age = 1;
    console.log( age.length ); // 编译时报错
    age = 'one';
    console.log( age.length ); // 3
复制代码

对象的类型

对象的类型在 TypeScript 中咱们使用接口来定义-- interfaces

interface Person {
    name: string;
    age: number;
}
let user: Person = {
    name: 'mark',
    age: 1,
}
// 假如咱们
let user1: Person = {
    name: 'mark',
}
// or
let user2: Person = {
    name: 'mark',
    age: 1,
    work: 'web',
}
// 编辑报错
复制代码

定义得变量比接口少了一些属性和多了一些属性都是不容许的，编译都会报错，因此在赋值的时候，变量的形状必须和接口保持一致。

假如咱们想不要彻底匹配一个形状 能够随意添加和减小怎么办呢？这个时候能够用到可选属性和任意属性 可选属性：该属性能够不存在 任意属性： 该属性能够是任意类型，可是要注意： 一旦定义了任意属性，那么肯定属性和可选属性的类型必须是它的类型的子集。

insterface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let user: Person = {
    name: 'mark',
    age: 1,
    work: 'web'
};
// 若是任意类型定义为string 那么 上面代码会报错。
insterface Person {
    name: string;
    age?: number;
    [propName: string]: string; //error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'
}

复制代码

咱们在日常工做中常常会但愿有些字段只能在建立的时候被赋值，好比数据中的id； 在TypeScript中如何定义只读属性呢？

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let user: Person = {
    id: 1,
    name: 'mar;',
    work: 'web'
};
user.id = 2;
// 报错 Cannot assign to 'id' because it is a constant or a read-only property.
复制代码

数组的类型

数组类型的表示方法：

类型+[] 表示法

let ages: number[] = [1,2,3,4,5];
let ages1: number[] = [1, 2, 3, '4']; // 报错
ages.push('2'); // 报错
复制代码

数组泛型 Array<类型>

let ages: Array<number> = [1, 2, 3];
复制代码

用接口表示数组

interface NumberArray {
    [index: number]: number;
}
let ages: NumberArray = [1, 1, 2, 3, 5];
复制代码

函数的类型

一个函数有输入和输出，要在 TypeScript 中对其进行约束，须要把输入和输出都考虑到，其中函数声明的类型定义较简单：

function sum(x: number, y: number): number {
    return x + y;
}
// es6 => 用来表示函数的定义，左边是输入类型，须要用括号括起来，右边是输出类型
let sum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

复制代码

一样 跟其余类型同样 输入多余的（或者少于要求的）参数，是不被容许的：

总结

以上是对TypeScript基础的一个学习。也是本身学习的一个笔记。奈何水平有限，望各位大佬指出问题，谢谢！