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超集

1. 全平台支持
2. 静态类型检测
3. 可选的静态类型
4. ES6（浏览器层面对domAPI 的支持）
5. DOM支持
6. 面向对象

变量声明

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     4
  Mon, 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);