目录
扩展学习资料
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(动态类型的编程语言)
TS是JS超集
var name = '';
const money = 120;
const bool = true;
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{}
// 标准类型-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 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'
}
}
接口:
类型别名:
// 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);