TypeScript React（上）
目录
扩展学习资料
TypeScript设计原则
TypeScript基础
语法基础
变量声明
JavaScript声明变量
TypeScript声明变量
示例
接口 (标准类型-Interface)
类型别名-Type
接口 VS 类型别名
类型断言:欺骗TS，肯定数据符合结构
泛型、<大写字母>
扩展学习资料
| 名称 | 链接 | 备注 |
| TypeScript 官方文档 | TypeScript: Documentation - TypeScript for the New Programmer | 英文（中文翻译稍显落后） |
| 中文文档 | 基础类型 · TypeScript中文网 · TypeScript——JavaScript的超集 | 搭配英文一起看 |
| TypeScript 入门教程 | TypeScript 入门教程 | 相对比较好入门的文档 |
| 更好的理解 TS 泛型 | https://medium.com/@rossbulat/typescript-generics-explained-15c6493b510f | 英文 |
TypeScript（静态类型更适合管理复杂的应用）更严格、更高效的JavaScript（动态类型的编程语言)
TypeScript设计原则
- 静态识别可能出现错误的代码结构。
- 为大型应用的代码提供结构化的机制。
- 不增加程序运行时开销，保留JavaScript运行时行为这一特性。
- 语言层面提供可组合性、可推理性。
- 语法层面保持和ECMAScript提案一致。
- 不增加额外的表达式层面的语法。
TypeScript基础
语法基础
TS是JS超集
- 全平台支持
- 静态类型检测
- 可选的静态类型
- ES6（浏览器层面对domAPI 的支持）
- DOM支持
- 面向对象
变量声明
JavaScript声明变量
var name = '';
const money = 120;
const bool = true;TypeScript声明变量
const name: string = '';
const money: number = 120;
const bool: boolean = true;示例
// number数组
let list: number[] = [1,2,3];
let list2: Array<number> = [1,2,3];
// 元组类型
let complexVar: [number, string] = [1, '云'];//第一个只能是number, 第二个只能是string
// 枚举，从默认value：0开始
enum DateEnum {
// 0 1 2 3 4Mon, Tues, Wednes, Thurs, Fri
};
let data: DateEnum = DateEnum.Mon;
// 空类型void，通常用在函数没有返回值时使用
// 箭头函数() => void =
let setValue: () => void = () => {list2 = [2,3];
};
// 普通函数:void
let otherSetValue = function otherSetValue(): void {complexVar = [2,'云2'];
};
// 不确定类型
let simpleVar: any;
simpleVar = 3;
simpleVar = '云3';
// null空对象
// undefined 未定义类型
// never 永不存在值的类型， try catch(): never{}
接口 (标准类型-Interface)
// 标准类型-Interface
// 在面向对象语言中，接口(interfaces)是一个很重要的概念，
//它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。
// TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，
//也常用于对模型[Shape]进行描述。
// 接口定义一个数据结构
interface IProps {// 书写习惯：定义类型接口通常名字I开头name: string,gender: number,address: string,
}
const staff: IProps = {name: 'xiaoYun'gender: 1,address: 'beijing'
}
function register(): IProps {return {name: 'xiaoBai'gender: 2,address: 'shanghai' }
}类型别名-Type
// 类型别名-Type
// 类型别名用来给一个类型起个新名字。
// 字符串字面量类型用来约束取值只能是某几个字符串中的一个。
// type 可以扩展，但是不能继承
type Props {name: string,gender: number,address: string,
}
const staff: Props = {name: 'xiaoYun'gender: 1,address: 'beijing'
}
function register(): Props {return {name: 'xiaoBai'gender: 2,address: 'shanghai' }
}接口 VS 类型别名
接口：
- 可以继承，可以多态。接口的实现需要implements，接口可以继承。
- 既是‘抽象’也是‘约束’。
- 优先使用。
类型别名：
- 只是类型的别名，没有创建新类型。扩展通过‘ &’实现。
- 主要是约束作用，早起TypeScript主要用作函数、对象的约束。
类型断言:欺骗TS，肯定数据符合结构
// TypeScript允许你覆盖它的推断，并且能以你任何你想要的方式分析它，这种机制被称为【类型断言】。
// 通常用来手动指定一个值的类型。
// JSX不能使用'<>'
interface Hello {sayHello: () => void,name: string,
}
const a = {};
a.name = '1234'// 此时ts报错不存在属性name
a.sayHello()// 不存在sayHello方法// 类型断言1
const a = <Hello>{};
// 类型断言2
const b = {} as Hello;泛型<T>、<大写字母>
扩展组件和方法的复用型，不与any等同，存在约束性
interface IGProps {setName:<T>(str: T) => void
}
const nameWrapper: IGProps = {//<T>声明(str:T使用)setName:<T>(str:T) => {const userNameArr2: T[] = [];userNameArr2.push(str); },
};
nameWrapper.setName('yun');
nameWrapper.setName(1234);