TypeScript入门指南（基础篇）

写在前面
ts是拥有类型系统的js的超集，近年来非常火热。可以这么说，ts才是真正意义上的js。虽然ts的官方文档非常全面，但是对于原来没有接触过ts的同学来说，全篇通读下来需要耗掉不少时间，这篇文章旨在为尝试入门ts的同学使用。

本文将从以下几部分进行总结：

TypeScript的优势
强类型与弱类型的区别
动态类型与静态类型的区别
基础类型
接口类型
函数
类
泛型

TypeScript的优势
1.帮助更好地重构代码
一个好的代码习惯是常常对自己写的代码进行小的重构，使得代码可维护性更强。但是对于很多线上运行的代码，代码测试覆盖率往往不是很高，有时候哪怕一个变量名的改动，都会牵一发而动全身。而对于使用ts编写的项目就不会有这种担心。ts的静态检查特性会帮助找出代码中有错误的部分。
2.vscode等IDE的提示更加智能
js是一门动态弱类型解释语言，变量声明后可以改变类型，而且类型需要在运行时才能确定。而ts的报错提示是在编译时，不是在运行时。所以使用ts带来的静态类型检查等特性将使得IDE的提示更加完善。
3.类型声明本身就是非常好的文档
当你接手一个有历史包袱的项目时，肯定会头疼于文档和代码注释的缺失，而对于ts来说，是可以做到代码即文档的，通过声明文件可以知道哪些字段的含义以及哪些字段是必填和选填的。举个简单例子，当封装一个button的组件时：

export interface ButtonProps {
style?: React.CSSProperties
className?: string
label?: React.ReactNode
type?: ‘primary’ | ‘default’ | ‘search’
size?: ‘sm’ | ‘md’ | ‘lg’ | ‘mini’
disabled?: boolean
title?: string
onClick?: ((e: React.MouseEvent) => void)
}
复制代码通过这些声明文件可以知道，当使用这个button文件时，style是一个可选值，表示一个可以自定义样式的style字段。type也是一个可选值，表示按钮的颜色类型，可以选择’primary’,‘default’,'mini’其中的一种。disabled也是一个可选值，传入的值必须是boolean类型。所以就可以看出类型声明本身就是非常好的文档。
强类型与弱类型的区别
强类型语言： 强类型语言不允许改变变量的数据类型，除非进行强制类型转换。
例如：如果定义了一个字符串变量str,如果没有进行强制类型转换，是把str不能当作布尔值，整型等非字符型进行处理的。c，c++，Java等都是强类型语言。
弱类型语言： 定义与强类型语言相反，一个变量可以被赋予不同数据类型的值。
var a = ‘111’;
var b = 222;
a = b;
console.log(a) // 222
复制代码如以上的js代码所示，a是一个字符串变量，b是一个整型变量，但是却可以把b赋值给a，把a打印出来的值是222。