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 = [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{}

TypeScript & React(上)_第1张图片

接口 (标准类型-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 = {};
// 类型断言2
const b = {} as Hello;

泛型、<大写字母>

扩展组件和方法的复用型,不与any等同,存在约束性

interface IGProps {
    setName:(str: T) => void
}
const nameWrapper: IGProps = {
    //声明(str:T使用)
    setName:(str:T) => {
        const userNameArr2: T[] = [];
        userNameArr2.push(str);    
    },
};
nameWrapper.setName('yun');
nameWrapper.setName(1234);

你可能感兴趣的:(React相关,TypeScript学习,typescript,react.js,javascript)