一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
换了工作，新公司要用react + ts，对于之前没有接触过react和ts的我来说，一切要从头学习，以下是本菜鸡的一些学习ts的总结，有不足的地方欢迎指正~：
简介：
TypeScript 是 JavaScript 的超集，这意味着它可以完成 JavaScript 所做的所有事情，它可以编译成纯JavaScript。
为什么需要ts?
JavaScript是一种动态类型语言，更改值的时候也可以更改他的类型，所以通过typeScript来给JavaScript添加静态类型，避免类型的更改和防止bug。
一、ts的类型：
- 布尔值：boolean
- 数值：number
- 字符串：string
- 数组：[]
- 元组Tuple: 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
- 枚举
- any
- void
- null 和 undefined
- never
- object
其中，boolean,number,string都是比较好理解的，
1、数组：可以这样定义：
let x:number[];
x = [1,2,3];
// x这个数组里面的值只能为number类型
也可以通过泛型来定义
let x:Array<number> = [12,4,5];
2、元组可以看下面的例子：
let x: [number, string];
// 定义了分别为number和string的元组
x = [10, 'ten']; //ok
x = ['hello', 20]; // error
3、其中还可以使用联合类型， | 来定义多种类型
let x: (number | string)[] = [1, 'hh', 3];
4、any: 使用any等同于没有使用ts了，要尽量避免使用any
5、void表示没有任何返回值，当一个函数没有返回值的时候，可以使用void:
interface someProps {
sayHello: () => void;
}
6、null 和 undefined
在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined
7、never表示永不存在的值的类型，
我木有怎么用到...
8、对象
定义对象的时候一般使用interface，可以帮助我们检查多个对象是否具有相同的特定属性和值类型：
interface obj {
name: string;
age: number;
}
const item1:obj = {
name: '小明'，
age: 25,
}
二、interface和type
在大多数情况下，我都是interface和type混着用的，他们好像区别不大
interface Props {
name: string;
age: number;
sex: string;
habbit: string[];
}
type Props = {
name: string;
age: number;
habbit: string[];
}
// 以上两种写法没有区别
type和interface都可以拓展, 使用extends:
拓展interfance
interface newProps extents Props {
sex: string;
}
cosnt obj:newProps = {
name: '王二狗',
age: 13,
habbit: ['baseball'],
sex: '男'
}
拓展type
type newProps = Props & {
family: string;
}
const obj2: newProps = {
name: '李二狗',
age: 17,
habbit: ['baseball'],
sex: '女'
}
总的来说，不知道用啥的时候可以先用interface
三、泛型
T 被称为类型参数，一般写作
泛型用于返回值的类型与传入参数的类型的对应关系，它是一种特殊的变量，只用于表示类型而不是值。
例子：
const verify = <T>(obj: T):T => {
return obj
}
// 表示传入的值和返回的值都一样
当这样写时： 会报错，因为T没有限定它的特定类型，比如传一个number会报错
const verify = <T>(val: T) => {
return val.length
}
需要进行这样的改写来进行泛型约束：
const verify = <T extends String>(val: T) => {
return val.length
}
verify('hello！ my boy') //
四、？可选链式符
在函数中，参数是选传的，可以在后面跟一个？，例如：
const fn = (index: number, code?: string) => {...}
fn(3)
不传code这个参数也不会报错
