TypeScript 笔记

目录

• 前言
• 笔记

前言

ts 和 js 的区别

ts 是静态语言，而 js 是动态语言。一个是强类型语言，一个是弱类型语言。 强类型，弱类型的区别
最大的区别就是 检查类型 上的区别

为什么要学习 ts

其实我写这个心里是没谱的， 因为公司项目不大，也没有使用 ts。但是 ts 可以使得项目的 bug降低(类型检查)，还有更好的划分模块化(命名空间)，降低维护成本。

• 官网称 ts 是 js的 超集,ts使得我们能够以 js 的方式实现自己的构思，ts 对面向对象的支持也非常完善，它拥有面向对象编程语言的所有特性。
• 而ts对es6语法的支持也非常友好，所以降低了 熟悉 js开发人员的学习成本。
• js 是 弱类型 并且没有 命名空间，导致很难模块化，使得其在大型的协作项目中不是很方便
• ts 已经很成熟、不管是编辑器的支持也好、各种资料也好，都非常多。

最重要的是
js 能做的，它能做。
js 不能做的，它也能做。

本来想将文档目录列出来，每个标题写几次例子，但是写完基础类型后，发现好像没有意义，因为也只是重敲一遍官网上的example而已。 所以除了基础类型外，其他都写自己的理解，这样更能明白自己在学什么。

笔记

1. 基础类型
2. 变量声明
3. 接口
4. 类
5. 函数
6. 泛型
7. 枚举
8. 类型推论
9. 类型兼容性
10. 高级类型
11. Symbols
12. 模块
13. 命名空间
14. 模块解析

1.基础类型

1. boolean、
2. number、
3. string
4. Array
5. tuple
6. enum
7. any
8. void
9. null 和 undefined
10. never
11. object
12. 类型断言

// 1. boolean
let idDone: boolean = false
//idDone = 'this is error'

/ / 2. number
let decLiteral: number = 6

// 3. string
let name: string = 'Gavin'

//  4. Array
let num1List: number[] = [1, 2, 3]
let num2List: Array<number> = [1, 2, 3]

let str1List: string[] = ['1', '2', '3']
let str2List: Array<string> =  ['1', '2', '3']

let anyList: any[] = [1, 2, 'str']

// 5. tuple
var tuple: [number, string] = [123, 'string']

// 6. 枚举
enum Flag {
   error,
   success = 1,
}
let falg1: Flag = Flag.success   // 赋值 返回 val
let falg2: Flag = Flag.error  // 如果 没有赋值 则返回 下标

// 7. any
// 在对现有代码改写的时候， any 类型十分有用，因为它允许你在编译时选择包含或移除类型检测
let notSure: any = 1
notSure = 'right'
notSure = true

// 8. Void
// 在某种程度上来说， void 类型像是与 any 类型相反， 它表示没有任何类型。通常用于函数没有返回值的情况。
function warnUser(): void {
	console.warn('this is warning message')
}

// 9. Null 和 undefined
通常用于你在某处想传入 string 或 null 或 undefined。

let unSure: string | undefined | null = undefined | null
unSure = '124'
unSure = undefined
unSure = null

// 10. never
// 网上说 这个类型是你永远得不到的 爸爸， 恩 很形象。
// 返回 never 的函数必须存在无法到达的终点
function error(msg: string): enver {
	throw new Error(msg)
}
// 推断的返回值为 never
function fail() {
	return error('someThing failed')
}
// 循环
function infiniteLoop(): never {
	while (true) {
	}
}

// 10. object
// object 表示非原始类型，

let obj: object = {
    a: 124
}

declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create("string"); // Error

// 11. 类型断言
1. as 语法
let someValue: any = 'this is a string'
let strLength: number = (someValue as string).length

2. 尖括号
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

2. 变量声明

let、var、const、 跟 js 一样， 好的 next->
最早的块级作用域是 try catrh，但是不能捕捉异步

3. 接口

1、对象/函数 的抽象类型，用来描述 函数/对象。
2、interface和 type可以互相 extends
3、可以设置 只读 和 可选属性

//使用 interface 关键字声明
interface User {
    name: string
    age?: number
    readonly sex: number
}
const gavin: User = {
    age: 1,
    name: 'gavin',
    sex: 1
}

4. 类

1、自从 es6开始 js也能使用 基于类的面对对象方式，更让熟悉 Java C#　C++等使用强类型语言的开发者开始喜欢上 js和 ts，
2、比 js多了 public、 private、protected等概念。默认 public，而 js提案可能以后会通过，现在一般使用 _name表示私有

private
表示 私有属性，不能在外部访问
protected
表示 派生属性，定义在当前 Animal 时，通过继承这个 Animal 得到的 Dog 可以访问

class Animal {
    private name: string;
    protected　age: number;
    constructor(theName: string, theAge: number) { 
        this.name = theName; 
        this.age = theAge;
    }
}
var monkey = new Animal('monkey', 1)
// console.log(
//     monkey,
//     monkey.age, // error: 只能在子类访问
//     monkey.name // 只能在 Animal 中访问，
// )
class Dog extends Animal {
    constructor(theName: string, theAge: number) { 
        super(theName, theAge)
    }
    getNameAndAge(): string {
        return `
            ${this.name}, // error
            ${this.age}   // success
        `
    }
}
var dog = new Dog('dingding', 2)
console.log(
    dog.getNameAndAge(),
)

5. 函数

好像和 js 差不多
1、注意类型定义，和返回值
2、支持，剩余参数、默认参数等。。。
3、还是通过 arguments实现重载。

6. 泛型

1、我理解的就是 当我们要复用一个 通用逻辑时，将定义的值,eg: number 改成 any，
2、但是 如果传入的是 array || Object时，要注意类型约束

7. 枚举

1、类似字典
2、使用时，定义了 value, 返回 value，没则返回 index

8. 类型推断

像我们 js中，类型转换会调用 toString valueOf， 这里应该也是吧，(大写的捂脸)
1、不定义类型的时候，计算通过类型算法会考虑所有元素的候选类型，并给出一个兼容所有候选类型的类型。

9. 类型兼容性

这个类型兼容性不是很理解。
大概就是，两个 类或其他两个之间，互相包含的 属性和类型，是否一样，

interface Named {
    name: string;
    // age: number;
}

let x: Named;

// y's inferred type is { name: string; location: string; }
let y = { 
    name: 'Alice', 
    location: 'Seattle' 
};
// 1. Named 中 有 name 属性，而 y 中包含name属性，所以是 right
// 2. 如果 Named 中的 age 注释打开后， 而 y  中不包含 age， 则 error
x = y;

10. 高级类型

不知道怎么描述。。

11. Symbols 英译为记号

1、js 中的 第七种数据类型，用来表示唯一、且不可变，
2、无需通过 new关键字来创建、可用于 字符串 或 键值
3、有很多 Api可以操作 Symbols

12. 模块

1、大致和 es6 的 export 一致
2、不过 有模块声明通配符

declare module "*!text" {
    const content: string;
    export default content;
}
// Some do it the other way around.
declare module "json!*" {
    const value: any;
    export default value;
}

13. 命名空间

1、当我们定义在模块中的函数越来越多时，我们可能会再次对函数做一次分类、这时就可以通过命名空间在分层
2、定义在 namespace中的 属性/方法 来通过 export向其他需要引入的地方导出
3、不过好像很多人不建议使用 namespace，因为 export就已经是天然的命名空间了