第一次写学习笔记,掘友们，如果文章有哪些错的地方提醒我一下，万分感谢。接下来的日子我会在早上早起的时间去学习TS，有想法的同学我们可以一起学习呀！

掘金文章：参考文章

TS文档：TypeScript

TypeScript入门

一、typescript的定义

TypeScript是一个开源的编程语言，通过在JavaScript（世界上最常用的语言之一）的基础上添加静态类型定义生成，TypeScript可以在您运行代码之前发现错误并提供修复，从而改善您的开发体验，它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

二、JavaScript与typescript的区别

JavaScript	TypeScript
一种脚本语言，用于创建动态网页	JavaScript 的超集用于解决大型项目的代码复杂性
作为一种解释型语言，只能在运行时发现错误	可以在编译期间发现并纠正错误
弱类型，没有静态类型选项	强类型，支持静态和动态类型
可以直接在浏览器中使用	最终被编译成 JavaScript 代码，使浏览器可以理解
不支持模块，泛型或接口	支持模块、泛型和接口

三、typescript安装、验证以及编译

安装

npm i -g typescript
复制代码

验证

tsc -v
复制代码

编译

tsc helloword.ts
复制代码

四、基本类型

Boolean(布尔值)

let isDone:boolean = false;
复制代码

Number(数值)
- 与JavaScript中一样，TypeScript中的所有数字都是浮点数，这些浮点数的获取的类型是number
```
let num:number = 100;
复制代码
```

String(字符串)

let color:string = 'red'//可以用""或者''
color = 'blue';
复制代码

Array（数组）
- 可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：
```
let list:number[] = [1,2,3];
复制代码
```
- 第二种方式是使用数组泛型，Array<元素类型>：
```
let list:Array<number> = [1,2,3]
复制代码
```
Tuple（元组）
- 元组类型表示一个已知元素数量和类型的数组，各元素的类型不必相同，值得注意的是数组中值的类型必须一一对应
```
let x:[string,number];
x=['jack',14];
x=[13,'jack'];//报错，不能将类型string分配给类型number
复制代码
```
- 当我们用索引来访问已知的元素时，会得到正确的类型
```
console.log(x[0].substr(1));
console.log(x[1].substr(1));//类型number 上不存在substr属性
复制代码
```
Enum（枚举）
- enum类型是对JavaScript标准数据类型的一个补充，枚举的作用组织收集一组关联数据的方式，通过枚举类型可以为一组数值赋予友好的名字。
```
enum HTTP_CODE {
    OK=200,
    NOT_FOUND=404,
    METHOD_NOT_ALLOWED
}

console.log(HTTP_CODE.OK,HTTP_CODE.NOT_FOUND,HTTP_CODE.METHOD_NOT_ALLOWED);//200，404，405
// HTTP_CODE.OK = 1//赋值时，会提示该属性只是只读属性
复制代码
```
- 字符串类型枚举
```
enum URLS{
    USER_HOME,
    USER_REGISETER='/user/regiseter',
    USER_LOGIN//如果前一个枚举值类型为字符串，则后续枚举项必须手动赋值，否则系统会提示枚举成员必须具有初始化表达式
}
复制代码
```
- 注意事项
  - 枚举的成员不能具有数值的类型名也就是说key值不能是数字
  - value可以是数字，我们称之为数字类型枚举；也可以是字符串，我们称之为字符串类型枚举，但是不能是其他的值，比如说null、undefined、boolean。如果我们不给第一个枚举成员赋值的话，默认值为0
  - 枚举值可以省略，如果省略，则：
    - 第一个枚举值默认为：0
    - 非第一个枚举值为上一个数字枚举值 + 1
    - 但是前一个枚举值类型为字符串，则后续枚举项必须手动赋值
  - 枚举值为只读（常量），初始化后不可修改
- 枚举的名称
  - 枚举名称可以是大写，也可以是小写，但是一般来说我们推荐使用全大写的命名方式去定义枚举名称（因为我们用全大写的命名方式来
    
    把值标注为常量）

Unknown（未知类型）

在编程中，我们可能需要描述编写应用程序时不知道的变量类型，比如说接受API中的所有值，或者接受一些动态内容，那么我们可以把该变量的类型定义成unknown ，该类型能够告诉编译器该变量可以是任何变量

let notKnown:unknown = 4;
notKnown = 'this is a string';
notKnown = false
//不会报错
复制代码

我们可以通过typeof检查一个未知变量的类型

let maybe:unknown;
const aNumber:number = maybe;//不能将类型“unknown”分配给类型“number”,编译器现在知道maybe不是一个number
if(maybe===true){
    const aBoolean:boolean = maybe;//编译器现在知道maybe是一个Boolean
    const aString:string = maybe;//不能将类型“boolean”分配给类型“string”，编译器现在知道maybe不是一个string
}
if(typeof maybe==='string'){
    const aString:string = maybe;//编译器现在知道maybe是一个string
    const aBoolean: boolean = maybe//不能将类型“string”分配给类型“boolean”，编译器现在知道maybe不是一个boolean
}
复制代码

unknow实际属于安全版的 any，但是与 any 不同的是：
- unknow 仅能赋值给 unknow、any
- unknow 没有任何属性和方法

Any（任意类型）
- 在编程的时候，可能有时候我们并不能准确的确定该值的类型是什么或者不需要对该值进行一个类型的检测，我们可以把这个值标注为any类型
```
let a:any;
复制代码
```
Void（无值类型）
- void和any有点相反的，它表示没有任何数据的类型，通常用于标注无返回值函数的返回值类型，函数默认标注类型为： void
```
function warnUser():void{
    console.log('这是一个警告信息');
    const a =10
    return a;//不能将类型“number”分配给类型“void”。
}
复制代码
```
- 值得注意的是：在 strictNullChecks 为 false 的情况下， undefined 和 null 都可以赋值给 void ，但是当 strictNullChecks 为 true 的情况下，只有 undefined 才可以赋值给 void
```
let message:void = undefined;
message = null;//不能将类型“null”分配给类型“void”
复制代码
```

Null and Undefined

当我们标注一个变量为undefined或null的时候，表示该变量不能被修改，因为在null和undefined中这两种类型有且只有一个

let u:undefined = undefined;
u = 1;//不能将“1”分配给类型null
u='string';//不能将“string”分配给类型undefined
let n:null = null
n = 1;//不能将“1”分配给类型null
n="string"//不能将“string”分配给类型null
复制代码

值得注意的是：在 strictNullChecks 为 false 的情况下，由于null 和 undefined 是所有其他类型的子类型，undefined和null可以赋值给number等其他类型，但是这样子可能会造成一些不必要的影响，所以建议在 strictNullChecks 为 true的情况下使用。

//在 strictNullChecks 为 false 的情况下
let num:number;
num = undefined//不会提示错误
//在 strictNullChecks 为 true 的情况下
let num:number;
num = undefined;//不能将类型“undefined”分配给类型“number”
num = null;//不能将类型“null”分配给类型“number”
复制代码

Never
- 当一个函数永远不可能执行return的时候，返回的就是never ，与 void不同， void 是执行了return ，只是没有值， never是不会执行return，比如抛出错误，导致函数终止执行
```
function fn():never{
    throw new Error('程序出错');
    return 'error';//不能将类型“string”分配给类型“never”
}
fn();
复制代码
```

Object

内置对象类型

在 JavaScript 中，有许多的内置对象，比如：Object、Array、Date……，我们可以通过对象的构造函数或者类来进行标注

let obj:Object = {};
let arr:Array<number>= [1,2,3];////前面数组已经涉及到该标注的意思是什么了
let date:Date = new Date();
复制代码

值得注意的是：我们知道 string 类型和 String 类型并不一样，在 TypeScript 中也是一样的

 let str1:string;
    str1='str1';
    str1 = new String('str1')//不能将类型“String”分配给类型“string”。“string”是基元，但“String”是包装器对象。如可能首选使用“string”


    let str2:String;
    str2=new String('str2');
    str2 = 'strs'//没有提示出错误
    // 通过两者的对比我们可以得知String有的，string不一定有（对象有的，基础类型不一定有）；
复制代码

自定义对象类型

- 大多数情况下，我们需要去自定义一个符合我们需求的对象，我们可以通过字面量标注、接口、构造函数或者类去定符合我们需求的对象。
复制代码

字面量标注

let person:{name:string,age:number} = {
    name:"jack",
    age:18
}//不会提示错误
person.name = 'ben';
person.age = 17;
person.hobby = '打篮球';//类型“{ name: string; age: number; }”上不存在属性“hobby”,因为hobby不是对象person上的属性
复制代码

优点：方便，直接；

缺点：不利于复用以及后期的维护

接口
- 通过interface关键字创建一个接口

  interface Person {
        name: string,
        age: number
    }

    let a: Person = {
        name: 'jack',
        age: 14
    }
    a.name = 'ben';
    a.age = 17;
    a.hobby = '打篮球';//类型“{ name: string; age: number; }”上不存在属性“hobby”。
复制代码

优点：复用性高；

缺点：接口只能作为类型标注使用，不能作为具体值，它只是一种抽象的结构定义，并不是实体，没有具体功能实现

构造函数和类

 class person{
        constructor(public name:string,public age:number){

        }
    }
    let a:person;
    a.name = 'ben';
    a.age = 17;
    a.hobby = '打篮球';//类型Person上不存在属性“hobby”。
复制代码

优点 : 功能相对强大，定义实体的同时也定义了对应的类型

缺点 : 复杂，比如只想约束某个函数接收的参数结构，没有必要去定一个类，使用接口会更加简单,比如

interface Options {
        userName: string,
        passWord: number
    }

    function ajax(options: Options) {

        ajax({
            userName: "jack",
            passWord: 123456
        })

    }
复制代码

五、常见的项目配置

tsconfig.json配置

{
    "compilerOptions": {
        "outDir": "./dist",//指定编译文件输出目录
        "target": "es5",//指定编译的代码版本目标，默认为 ES3
        "watch": true,//在监听模式下运行，当文件发生改变的时候自动编译
        "strictNullChecks": true,//严格的空检查
    },
    "include": ["./src/**/*"]//指定要包含在程序中的文件名或模式的数组。
     // ** : 所有目录（包括子目录） 
    // * : 所有文件，也可以指定类型 *.ts
    //? 匹配任何一个字符（目录分隔符除外）
}
复制代码

编译配置文件
- 我们可以把编译的一些选项保存在一个指定的 json 文件中，默认情况下 tsc 命令运行的时候会自动去加载运行命令所在的目录下的 tsconfig.json 文件

tsc
复制代码

指定加载的配置文件
- 使用 --project 或 -p 指定配置文件目录，会默认加载该目录下的 tsconfig.json 文件
```
tsc -p ./configs
复制代码
```
- 也可以指定某个具体的配置文件

	tsc -p ./configs/ts.json
复制代码

菜鸟级前端从零开始学习TS

第一次写学习笔记,掘友们，如果文章有哪些错的地方提醒我一下，万分感谢。接下来的日子我会在早上早起的时间去学习TS，有想法的同学我们可以一起学习呀！

掘金文章： 参考文章

TS文档：TypeScript

TypeScript入门

一、typescript的定义

二、JavaScript与typescript的区别

三、typescript安装、验证以及编译

四、基本类型

Boolean(布尔值)

Number(数值)

String(字符串)

Array（数组）

Tuple（元组）

Enum（枚举）

Unknown（未知类型）

Any（任意类型）

Void（无值类型）

Null and Undefined

Never

Object

五、常见的项目配置

掘金文章：参考文章