Typescript基础及结合React实践|博客系列

# 第一部分 Typescript基础

# 一、typescript 安装

npm i typescript -g

@前端进阶之旅: 代码已经复制到剪贴板

全局安装完成后，我们新建一个hello.ts的ts文件

// hello.ts内容
let a = "poet"

@前端进阶之旅: 代码已经复制到剪贴板

接下来我们在命令行输入tsc hello.ts来编译这个ts文件，然后会在同级目录生成一个编译好了的hello.js文件

// hello.js内容
var = "poet"

@前端进阶之旅: 代码已经复制到剪贴板

那么我们每次都要输tsc hello.ts命令来编译，这样很麻烦，能否让它自动编译？答案是可以的，使用vscode来开发，需要配置一下vscode就可以。

首先我们在命令行执行tsc --init来生成配置文件，然后我们在目录下看到生成了一个tsconfig.json文件

这个json文件里有很多选项

target是选择编译到什么语法
module则是模块类型
outDir则是输出目录，可以指定这个参数到指定目录

更多细节 https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html

接下来我们需要开启监控了，在vscode任务栏中

Typescript在线编辑器

建议使用在线编辑器练习 http://www.typescriptlang.org/play/index.html

# 二、数据类型

js是弱类型语言，强弱类语言有什么区别呢？typescript最大的优点就是类型检查，可以帮你检查你定义的类型和赋值的类型。

# 2.1 布尔类型boolean

// 在js中，定义isFlag为true，为布尔类型boolean
let isFlag = true;
// 但是我们也可以重新给它赋值为字符串
isFlag = "hello swr";

// 在ts中，定义isFlag为true，为布尔类型boolean
// 在变量名后加冒号和类型，如  :boolean
let isFlag:boolean = true
// 重新赋值到字符串类型会报错
isFlag = "hello swr" 

// 在java中，一般是这样定义，要写变量名也要写类型名
// int a = 10; 
// string name = "poetries"

@前端进阶之旅: 代码已经复制到剪贴板

# 2.2 数字类型number

let age:number = 28;
age = 29;

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 字符串类型string

let name:string = "poetries"
name = "iamswr"

@前端进阶之旅: 代码已经复制到剪贴板

以上boolean、number、string类型有个共性，就是可以通过typeof来获取到是什么类型，是基本数据类型

那么复杂的数据类型是怎么处理的呢？

# 2.4 数组 Array

// 数组
// 这是一个字符串数组，只能往里面放字符串，写别的类型会报错
let persion:string[] = ['poetries', 'jing']
// 另一个写法 
let persions:Array<string> = ['poetries', 'jing']

// 如果数组里放对象呢
let persionObject:Array<object> = [{name:'poetries',age:22}]
let persionObjects:object[] = [{name:'poetries',age:22}]

// 在数组中放string、number、boolean、object
let arr:Array<number|object|string|boolean> = [22, 'test', true, {name:'poetries'}]

// 数组中放什么都可以
let arrAny:Array<any> = ['test',12,false]

@前端进阶之旅: 代码已经复制到剪贴板

# 2.5 元组类型tuple

什么是元组类型？其实元组是数组的一种。
有点类似解构赋值，但是又不完全是解构赋值，比如元组类型必须一一对应上
元组类型是一个不可变的数组，长度、类型是不可变的

// 元组类型tuple
// 什么是元组类型？其实元组是数组的一种
let per :[string,number,object] = ['poetries',22,{love: 'coding'}]

@前端进阶之旅: 代码已经复制到剪贴板

# 2.6 枚举类型enum

什么是枚举？枚举有点类似一一列举，一个一个数出来。一般用于值是某几个固定的值

// 枚举类型enum

enum sex {
    BOY='男孩',
    GIRL='女孩'
}
console.log(sex)

@前端进阶之旅: 代码已经复制到剪贴板

// 转化为es5语法
// 我们顺便看看实现的原理

var sex;
(function (sex) {
// 首先这里是一个自执行函数
// 并且把sex定义为对象，传参进给自执行函数
// 然后给sex对象添加属性并且赋值
    sex["BOY"] = "\u7537\u5B69";
    sex["GIRL"] = "\u5973\u5B69";
})(sex || (sex = {}));
console.log(sex);

@前端进阶之旅: 代码已经复制到剪贴板

比如我们实际项目中，特别是商城类，订单会存在很多状态流转，那么非常适合用枚举

enum orderStatus {
    WAIT_FOR_PAY = "待支付",
    UNDELIVERED = "完成支付，待发货",
    DELIVERED = "已发货",
    COMPLETED = "已确认收货"
}

@前端进阶之旅: 代码已经复制到剪贴板

到这里，我们会有一个疑虑，为什么我们不这样写呢？

let orderStatus2 = {
    WAIT_FOR_PAY : "待支付",
    ...
}

@前端进阶之旅: 代码已经复制到剪贴板

如果我们直接写对象的键值对方式，是可以在外部修改这个值的，而我们通过enum则不能修改定义好的值了

# 2.7 任意类型 any

any有好处也有坏处，特别是前端，很多时候写类型的时候，几乎分不清楚类型，任意去写，写起来很爽，但是对于后续的重构、迭代等是非常不友好的，会暴露出很多问题，某种程度来说，any类型就是放弃了类型检查了

比如我们有这样一个场景，就是需要获取某一个dom节点

let btn = document.getElementById('btn');
btn.style.color = "blue";

@前端进阶之旅: 代码已经复制到剪贴板

此时我们发现在ts中会报错

因为我们取这个dom节点，有可能取到，也有可能没取到，当没取到的时候，相当于是null，是没有style这个属性的。
那么我们可以给它添加一个类型为any

// 添加一个any类型，此时就不会报错了，但是也相当于放弃了类型检查了
let btn:any = document.getElementById('btn');
btn.style.color = "blue";

@前端进阶之旅: 代码已经复制到剪贴板

// 可以赋值任何类型的值
// 跟以前我们var let声明的一模一样的
let person:any = "poetries"
person = 22

@前端进阶之旅: 代码已经复制到剪贴板

# 2.8 null undefined类型

// (string | number | null | undefined) 相当于这几种类型
// 是 string 或 number 或 null 或 undefined

let str:(string | number | null | undefined)

str = 'poetries'
str = 28
str = null 
str = undefined

@前端进阶之旅: 代码已经复制到剪贴板

# 2.9 void类型

void表示没有任何类型，一般是定义函数没有返回值

// void 不能再函数里写return
// 怎么理解叫没有返回值呢？此时我们给函数return一个值
function say(name:string):void{
    console.log('hello:', name)
    // return "ok" 会报错
    return undefined;
    return //不会报错
}
say('poetries')

// 返回一个字符串类型
function say1(name:string):string {
    return 'ok'
}

@前端进阶之旅: 代码已经复制到剪贴板

# 2.10 never类型

这个用得很少，一般是用于抛出异常

function error(message:string):never {
    throw new Error(message)
}
error('errorMsg')

@前端进阶之旅: 代码已经复制到剪贴板

# 2.11 我们要搞明白any、never、void

any是任意的值
void是不能有任何值
never永远不会有返回值

any比较好理解，就是任何值都可以

let str:any = "hello poetries"
str = 28
str = true

@前端进阶之旅: 代码已经复制到剪贴板

void不能有任何值(返回值)

function say():void {
  
}

@前端进阶之旅: 代码已经复制到剪贴板

never则不好理解，什么叫永远不会有返回值？

// 除了上面举例的抛出异常以外，我们看一下这个例子
// 这个loop函数，一旦开始执行，就永远不会结束
// 可以看出在while中，是死循环，永远都不会有返回值，包括undefined

function loop():never {
    while(true){
        console.log("陷入死循环啦")
    }
}

loop()

// 包括比如JSON.parse也是使用这种 never | any
function parse(str:string):(never | any){
    return JSON.parse(str)
}
// 首先在正常情况下，我们传一个JSON格式的字符串，是可以正常得到一个JSON对象的
let json = parse('{"name":"poetries"}')
// 但是有时候，传进去的不一定是JSON格式的字符串，那么就会抛出异常
// 此时就需要never了
let json = parse("iamswr")

@前端进阶之旅: 代码已经复制到剪贴板

也就是说，当一个函数执行的时候，被抛出异常打断了，导致没有返回值或者该函数是一个死循环，永远没有返回值，这样叫做永远不会有返回值。

实际开发中，是never和联合类型来一起用，比如

function say():(never | string) {
  return "ok"
}

@前端进阶之旅: 代码已经复制到剪贴板

# 三、函数

# 3.1 函数定义

function sayHello(name:string):void {
    
}

@前端进阶之旅: 代码已经复制到剪贴板

# 3.2 函数参数处理

# 第一部分 Typescript基础

# 一、typescript 安装

npm i typescript -g

@前端进阶之旅: 代码已经复制到剪贴板

全局安装完成后，我们新建一个hello.ts的ts文件

// hello.ts内容
let a = "poet"

@前端进阶之旅: 代码已经复制到剪贴板

接下来我们在命令行输入tsc hello.ts来编译这个ts文件，然后会在同级目录生成一个编译好了的hello.js文件

// hello.js内容
var = "poet"

@前端进阶之旅: 代码已经复制到剪贴板

那么我们每次都要输tsc hello.ts命令来编译，这样很麻烦，能否让它自动编译？答案是可以的，使用vscode来开发，需要配置一下vscode就可以。

首先我们在命令行执行tsc --init来生成配置文件，然后我们在目录下看到生成了一个tsconfig.json文件

这个json文件里有很多选项

target是选择编译到什么语法
module则是模块类型
outDir则是输出目录，可以指定这个参数到指定目录

更多细节 https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html

接下来我们需要开启监控了，在vscode任务栏中

Typescript在线编辑器

建议使用在线编辑器练习 http://www.typescriptlang.org/play/index.html

# 二、数据类型

js是弱类型语言，强弱类语言有什么区别呢？typescript最大的优点就是类型检查，可以帮你检查你定义的类型和赋值的类型。

# 2.1 布尔类型boolean

// 在js中，定义isFlag为true，为布尔类型boolean
let isFlag = true;
// 但是我们也可以重新给它赋值为字符串
isFlag = "hello swr";

// 在ts中，定义isFlag为true，为布尔类型boolean
// 在变量名后加冒号和类型，如  :boolean
let isFlag:boolean = true
// 重新赋值到字符串类型会报错
isFlag = "hello swr" 

// 在java中，一般是这样定义，要写变量名也要写类型名
// int a = 10; 
// string name = "poetries"

@前端进阶之旅: 代码已经复制到剪贴板

# 2.2 数字类型number

let age:number = 28;
age = 29;

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 字符串类型string

let name:string = "poetries"
name = "iamswr"

@前端进阶之旅: 代码已经复制到剪贴板

以上boolean、number、string类型有个共性，就是可以通过typeof来获取到是什么类型，是基本数据类型

那么复杂的数据类型是怎么处理的呢？

# 2.4 数组 Array

// 数组
// 这是一个字符串数组，只能往里面放字符串，写别的类型会报错
let persion:string[] = ['poetries', 'jing']
// 另一个写法 
let persions:Array<string> = ['poetries', 'jing']

// 如果数组里放对象呢
let persionObject:Array<object> = [{name:'poetries',age:22}]
let persionObjects:object[] = [{name:'poetries',age:22}]

// 在数组中放string、number、boolean、object
let arr:Array<number|object|string|boolean> = [22, 'test', true, {name:'poetries'}]

// 数组中放什么都可以
let arrAny:Array<any> = ['test',12,false]

@前端进阶之旅: 代码已经复制到剪贴板

# 2.5 元组类型tuple

什么是元组类型？其实元组是数组的一种。
有点类似解构赋值，但是又不完全是解构赋值，比如元组类型必须一一对应上
元组类型是一个不可变的数组，长度、类型是不可变的

// 元组类型tuple
// 什么是元组类型？其实元组是数组的一种
let per :[string,number,object] = ['poetries',22,{love: 'coding'}]

@前端进阶之旅: 代码已经复制到剪贴板

# 2.6 枚举类型enum

什么是枚举？枚举有点类似一一列举，一个一个数出来。一般用于值是某几个固定的值

// 枚举类型enum

enum sex {
    BOY='男孩',
    GIRL='女孩'
}
console.log(sex)

@前端进阶之旅: 代码已经复制到剪贴板

// 转化为es5语法
// 我们顺便看看实现的原理

var sex;
(function (sex) {
// 首先这里是一个自执行函数
// 并且把sex定义为对象，传参进给自执行函数
// 然后给sex对象添加属性并且赋值
    sex["BOY"] = "\u7537\u5B69";
    sex["GIRL"] = "\u5973\u5B69";
})(sex || (sex = {}));
console.log(sex);

@前端进阶之旅: 代码已经复制到剪贴板

比如我们实际项目中，特别是商城类，订单会存在很多状态流转，那么非常适合用枚举

enum orderStatus {
    WAIT_FOR_PAY = "待支付",
    UNDELIVERED = "完成支付，待发货",
    DELIVERED = "已发货",
    COMPLETED = "已确认收货"
}

@前端进阶之旅: 代码已经复制到剪贴板

到这里，我们会有一个疑虑，为什么我们不这样写呢？

let orderStatus2 = {
    WAIT_FOR_PAY : "待支付",
    ...
}

@前端进阶之旅: 代码已经复制到剪贴板

如果我们直接写对象的键值对方式，是可以在外部修改这个值的，而我们通过enum则不能修改定义好的值了

# 2.7 任意类型 any

any有好处也有坏处，特别是前端，很多时候写类型的时候，几乎分不清楚类型，任意去写，写起来很爽，但是对于后续的重构、迭代等是非常不友好的，会暴露出很多问题，某种程度来说，any类型就是放弃了类型检查了

比如我们有这样一个场景，就是需要获取某一个dom节点

let btn = document.getElementById('btn');
btn.style.color = "blue";

@前端进阶之旅: 代码已经复制到剪贴板

此时我们发现在ts中会报错

因为我们取这个dom节点，有可能取到，也有可能没取到，当没取到的时候，相当于是null，是没有style这个属性的。
那么我们可以给它添加一个类型为any

// 添加一个any类型，此时就不会报错了，但是也相当于放弃了类型检查了
let btn:any = document.getElementById('btn');
btn.style.color = "blue";

@前端进阶之旅: 代码已经复制到剪贴板

// 可以赋值任何类型的值
// 跟以前我们var let声明的一模一样的
let person:any = "poetries"
person = 22

@前端进阶之旅: 代码已经复制到剪贴板

# 2.8 null undefined类型

// (string | number | null | undefined) 相当于这几种类型
// 是 string 或 number 或 null 或 undefined

let str:(string | number | null | undefined)

str = 'poetries'
str = 28
str = null 
str = undefined

@前端进阶之旅: 代码已经复制到剪贴板

# 2.9 void类型

void表示没有任何类型，一般是定义函数没有返回值

// void 不能再函数里写return
// 怎么理解叫没有返回值呢？此时我们给函数return一个值
function say(name:string):void{
    console.log('hello:', name)
    // return "ok" 会报错
    return undefined;
    return //不会报错
}
say('poetries')

// 返回一个字符串类型
function say1(name:string):string {
    return 'ok'
}

@前端进阶之旅: 代码已经复制到剪贴板

# 2.10 never类型

这个用得很少，一般是用于抛出异常

function error(message:string):never {
    throw new Error(message)
}
error('errorMsg')

@前端进阶之旅: 代码已经复制到剪贴板

# 2.11 我们要搞明白any、never、void

any是任意的值
void是不能有任何值
never永远不会有返回值

any比较好理解，就是任何值都可以

let str:any = "hello poetries"
str = 28
str = true

@前端进阶之旅: 代码已经复制到剪贴板

void不能有任何值(返回值)

function say():void {
  
}

@前端进阶之旅: 代码已经复制到剪贴板

never则不好理解，什么叫永远不会有返回值？

// 除了上面举例的抛出异常以外，我们看一下这个例子
// 这个loop函数，一旦开始执行，就永远不会结束
// 可以看出在while中，是死循环，永远都不会有返回值，包括undefined

function loop():never {
    while(true){
        console.log("陷入死循环啦")
    }
}

loop()

// 包括比如JSON.parse也是使用这种 never | any
function parse(str:string):(never | any){
    return JSON.parse(str)
}
// 首先在正常情况下，我们传一个JSON格式的字符串，是可以正常得到一个JSON对象的
let json = parse('{"name":"poetries"}')
// 但是有时候，传进去的不一定是JSON格式的字符串，那么就会抛出异常
// 此时就需要never了
let json = parse("iamswr")

@前端进阶之旅: 代码已经复制到剪贴板

也就是说，当一个函数执行的时候，被抛出异常打断了，导致没有返回值或者该函数是一个死循环，永远没有返回值，这样叫做永远不会有返回值。

实际开发中，是never和联合类型来一起用，比如

function say():(never | string) {
  return "ok"
}

@前端进阶之旅: 代码已经复制到剪贴板

# 三、函数

# 3.1 函数定义

function sayHello(name:string):void {
    
}

@前端进阶之旅: 代码已经复制到剪贴板