[JavaScript知识库]写给移动客户端开发者的TypeScript快速入门教程（一）、基础类型和变量声明

目前其实移动端与前端的界限在慢慢的模糊，很多公司已经将移动端和前端整体统称为大前端了，而整体的技术栈和技术人员，也在逐步趋于全面和面对整个大前端技术栈。虽然技术终究是细分的，但是了解更多知识，有一个完整的大前端知识体系，也能够在大前端整体技术突进中脱颖而出，达到意想不到的效果。

本身我是做Android开发的，这系列文章也是作为一个我学习的笔记。😄希望前端大佬看到勿喷！！当然作为学习，还是建议大家优先以学习typescript官网为第一手资料。

1、基础类型

1-1、 bool 类型

let isDone: boolean = false;

1-2、 number 类型

let decLiteral: number = 6;

1-3、 string 类型

let firstName: string = 'bob';
let secondName: string = 'tim';
let username: string = `Hello, my name is ${firstName}. ${secondName}`; //注意这里是使用反引号

字符串支持使用通配符展示，但是字符串整体必须使用``括起来。

1-4、 array 类型

let list: number[] = [1,2,3]; //普通类型
let list2: Array<number> = [1,2,3]; //使用范型

1-5、 tuple(元组) 类型

let x: [string, number];
x = ['hello world', 1] //ok
x = ['hello', 'world']; //error : Type 'string' is not assignable to type 'number'

使用元组

x[0]  //根据下标取值

1-6、 enum(枚举) 类型

enum Enum {
    RED, GREEN, BLUE  //枚举的元素编号默认从0开始
}

1-7、 any 类型

let anyType: any = 'string message';
let objType2: object = 2;
let anyType2: any = 2;
objType2.toFixed()  //Property 'toFixed' does not exist on type 'object'.
anyType2.toFixed()

any 和 object的区别：any的话，可以使用对应类型的方法，而object的话，不能调用对应类型的方式使用。比如上面例子中，定义的object的不能识别到toFixed方法。

1-8、 Void 类型

let unusable: void = undefined

1-9、 Null和Undefined

默认情况下，null和undefined是所有类型的子类型。你可以把null和undefined赋值给其他类型(比如number)的变量

1-10、 Never 类型

Never标识那些用不存在的内容，比如箭头函数的返回值，抛出异常的返回值等。

2、变量声明

2-1、 var和let

function f(shouldInit: boolean) {
    if (shouldInit) {
        var x = 10;
    } else {
        x = 20;
    }
    return x;   //shouldInit=true输出10，false输出20
}

对于java开发者来说，面对上面的肯定很困惑，因为x没有正常初始化。这里其实就要牵扯到Javascript的一个概念了： 变量提升。

在执行中，如果变量没有定义，这会先定义出来，只是没有赋值，本身是undefined值。

for (var i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(i);
    }, 100 * i);
}

对于这个结果输出，大家第一感觉是不是间断会输出0～9的值。但是实际发现会输出9个10。出现这种情况的原因就是变量的作用域。var声明的变量作用于全局的，而setTimeout是异步回调，所以输出之前i已经变成了10了。要让结果正确输出，可以使用如下方式，让作用域做区分。

for (var i = 0; i < 10; i++) {
    (function (result) {
        setTimeout(function () {
            console.log(result);
        }, 100 * result);
    })(i)
}

这里签到到javascript的一个语法：IIFE（立即执行的函数表达式）。在let出现之前，这确实是一个很好的处理类似问题的方法，但是使用起来还是不够直观。当然现在的话，我们有let，可以写出如果代码。

for (let i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(i);
    }, 100 * i);
}

结果输出和上面的IIFE方式一致，但是看起来更容易理解很多。

对于var和let声明，尽可能多的使用let

2-2、 const相比于let的优点是可以防止变量的二次赋值。

对于不希望改变的声明，尽可能使用const去声明。

2-3、 解构声明 & 展开

解构（解构赋值）是一种表达式，将数组或者对象中的数据赋予另一个变量

对象解构使用

const handleMenuClick = ({item, key, keyPath}: { item: Object, key: string, keyPath: string }) => {
    console.log(item, key, keyPath)
}
//或者使用
interface SomeObj {
    item: Object,
    key: string,
    keyPath: string
}

const handleMenuClick = ({item, key, keyPath}: SomeObj) => {
    console.log(item, key, keyPath)
}

设置默认值

const handleMenuClick = ({item = 100, key = 'key', keyPath}: SomeObj) => {
    console.log(item, key, keyPath)
}

数组解构使用

let nums = [1,2,3];
let [f,s, t] = nums;
console.log(f) //1

变量值交互

[f, s] = [s, f];
console.log(f) //2
console.log(s) //1

结构展开，结构展开操作其实刚好是相反操作，将一个集合赋值给一个变量使用

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };

2-4、 其他

声明一个属性

const girls: {name: string, age: number} = {
    name: 'meizi', age: 0
}

声明一个方法

function getTotal(one: number, two: number){
    return one + two;
}

type声明使用

type lady = {name: string, age: number};
const girls: lady[] = [
    {name: '小红', age: 22}, 
    {name: '小蓝', age: 28}
]

参考：
1、TypeScript中文网-手册指南-基础类型
2、TypeScript中文网-手册指南-变量声明
3、bilibili网站技术胖Typescript教程