学习typescript
2019年6月21日11:22:22
阮一峰的书
阮一峰的typescript
安装typescript npm install -g typescript
tsc 是它一个命令 编译ts文件的
用法 tsc 文件名
基础部分
定义类型
js 类型有两种 原始数据类型boolean number String null undefined es6的Symbol 和对象类型
let isDone: boolean = false //定义成其他数据类型时 编译报错
let myName: string = 'Tom';
let myAge: number = 25;
let u: undefined = undefined;
let n: null = null;
function noThing():void{
console.log("just for consolelog something")
}
let unusable: void = undefined //也可以是null
任意类型Any
let aa:string = 'aili'
aa = 7
let bb:any = '1231asdfa'
bb = false
//未来声明的变量
let cc;
cc = 'aili'
cc = 123
类型推论
没有指定类型 编译会报错 但是ts会推测出类型 any类型不被做类型检查
联合类型
let a:string | number;
// a = false
a = 'aili'
// a = 7
number类型没有length属性 报错
function getLength(something: string | number): string {
return something.length
}
访问二者共有属性或者方法是可以的
function getLength(something: string | number): string {
return something.toString()
}
对象的类型 -- 接口
定义对象类型 接口这部分是难点
对行为的抽象 具体如何行动由类实现 其实看了基础部分回过头再来看 就是 定义 形状 的
// 接口 定义了多少属性方法 定义变量的时候得一致 不然报错 不能多不能少
// 赋值的时候，变量的形状必须和接口的形状保持一致。
interface Person {
name:String
age:number
sex:String
hasJob:boolean
}
let aili: Person = {
name: 'aili',
age:25,
sex:'male',
hasJob:true
}
// 上述定义有点问题 如果少一个多一个就报错 有点死板
// 可选属性
interface Person {
name:String
age:number
sex?:String
hasJob?:boolean
}
let aili: Person = {
name: 'aili',
age:25
}
// 任意类型
interface Person {
[propName: string]:string | number | boolean
}
let aili: Person = {
name: 'aili',
age:25,
hasJob:true
}
// 定义了三种类型 但是 定义变量的时候 给了any 这是会报错的
interface Person {
[propName: string]:string | number | boolean
}
let aili: Person = {
name: 'aili',
age:25,
hasJob:true,
sex: any = {
}
}
// 只读属性
interface Person {
readonly id: number
[propName: string]:any
}
let aili: Person = {
id:1234,
name: 'aili',
age:25,
hasJob:true,
sex: {
a:'male',
b:'female',
c:'unknown'
}
}
数组类型
方法比较多
// 数组类型
let arr: number[] = [1,2,3,4,5]
let arr: string[] = ['1','2','3','4','5']
let arr: Array<number> = [1,2,3,4,5] //泛型
interface mineArr {
[index: number]: string
}
let arr:mineArr = ['a','b','c','d','e'] //一下觉得好规范 严谨 慢慢感受到ts的类型检查的强大
let list:any[] = [1,'a',true,{name:'aili'}]
函数类型
函数可以看成跟数据类型一样 最灵活的
js函数式编程编程指南
这本书好像很牛皮的样子 一共10章
定义函数
- 函数声明
function sum(x, y) { return x + y; } - 函数表达式
let mySum = function (x, y) { return x + y; };
// 函数类型
let mySum = function (x: number, y: number): number {
return x + y;
};
// // 接口定义函数形状 你要对你将实现的函数 有个很明确具体的认识和实现思路 才可以把接口定义的很完美
interface Search {
(a:string,b:string): boolean
}
let mysearch: Search;
mysearch = (a:string,b:string)=>{
return a.search(b) !== -1
}
// 可选参数 还是跟类型定义一样 加个问号就可以了
// 可选参数后面不允许再出现 必须 参数了
// 顺序 必选参数... 可选参数
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
// 还有一种情况就是默认参数不受参数位置影响 默认参数自动识别为可选参数
function buildName(firstName: string = 'Tom', lastName: string) {
return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');
// 剩余参数
// 用到了es6的rest参数 和析构
function push(array: any[], ...items: any[]) {
items.forEach(function(item) {
array.push(item);
});
}
let a = [];
push(a, 1, 2, 3);
声明文件
合理使用第三方库 不冲突 我是这么理解的 定义一些全局方法 属性 变量 类等
具体写法具体查
文章参考的链接
箭头函数
函数参数的默认值
Rest参考值
symbol
