TypeScript 初学笔记

因为很多工作岗位要求程序员会typescript了，毕竟也是个趋势，虽然本人是入门级别的程序员，也要赶上时代潮流，学习学习typescript。

主要是现在开发要引用很多的插件，想看看插件源码，按住alt点击函数，打开之后是ts文件，自己看不懂ts，有时也会出现不知道是不是自己哪里写错了之类的，技多不压身，学习ts势在必行

一、先配置简易的开发环境

1. 全局下载typescript

cnpm -g i typescript

2. vscode 插件

live server 热更新页面插件
typescript auto compiler 保存自动编译

3. 编译第一个文件

tsc test.ts tsc: typescript compile

4. 生成ts编译配置文件tsconfig.json

tsc --init 默认情况下，执行tsc会将当前目录下，以及子目录下的ts文件全部转换成js文件

5. 类型在typescript中定义， js中并不会编译出类型的限制的语句，只是在编译前进行类型检查

js并不会出现类型检查的语句，比如

if(typeof 123 !=='string'){
    throw 'Type 123 is not assignable to type 'string'
}

因为在编译之前就会执行检查

类型的学习

1. 定义类型

一个变量在一开始等于什么，往后他就是什么类型。

let num = 3;
num = 4;

//下面这句会报错！因为类型已经被定义成数字类型
num = true;

如果初始等于null， undefined，或者定义类型为:any, 就是类型随意，并且后续随便改

let a;
let b: any;
let udf = undefined;
let nl = null;
// 如果不赋值，或者是null， 就是any(也就是可以随意赋值)
a = 1;
a = 'a';
b = 2;
b = 'b';
udf = function () { };
udf = 0;
udf = true;
nl = setTimeout(() => { });
nl = function () { };

ts原型

// ts原型，原始值的原型是小写字母， string， boolean， number
// 使用冒号来定义类型
let num5: number = 5; // 数字
let boolean1: boolean = true; // 布尔值
let str: string = '你好'; //字符串

数字类型可以是十进制，小数，十六进制，二进制，八进制。

let num = 3;
let float = 1.00;
let hex = 0x6;
let binary = 0b1010;
let octal = 0o675;
// 默认类型是初始设置的类型；
// 一开始给他赋值是什么， 那么他后来就是什么类型的

引用值定义类型，类型的首字母要大写

let hworld: Array<string> = ['你好', '世界'];
let fun: Function = function () { };
let obj: Object = { name: 'lyz' };
let reg: RegExp = /\d/g;

2. 数组，元组，枚举

/* 数组 */
// 里面必须是字符串类型的, 定义全部的类型
let hworld: Array<string> = ['你好', '世界'];
···
元组 按照索引定义数组里面的类型
···
/* 元组 */
// 里面是任意类型的数组
let arr: any[] = [1, true, {}, [], 'abc']
// 按索引指定类型
let color: [string, number, number, number] = ['red', 255, 0, 0];
···
枚举（只能在指定的枚举对象里面挑数据）
···
/* 枚举 */
enum Vegetable {
    Broccly,
    Cucumber,
    Tomato
}
enum Fruit {
    Apple,
    Pear,
    Grape
}

let food1: Fruit = Fruit.Apple;
let food2: Vegetable = Vegetable.Broccly;
// 如果选错了枚举对象，会报错
// let food3: Fruit = Vegetable.Broccly; 
//报错类型错误： Type 'Vegetable.Broccly' is not assignable to type 'Fruit'

// 编译成js文件之后的枚举
var Vegetable;
(function (Vegetable) {
    Vegetable[Vegetable["Broccly"] = 0] = "Broccly";
    Vegetable[Vegetable["Cucumber"] = 1] = "Cucumber";
    Vegetable[Vegetable["Tomato"] = 2] = "Tomato";
})(Vegetable || (Vegetable = {}));

var Fruit;
(function (Fruit) {
    Fruit[Fruit["Apple"] = 0] = "Apple";
    Fruit[Fruit["Pear"] = 1] = "Pear";
    Fruit[Fruit["Grape"] = 2] = "Grape";
})(Fruit || (Fruit = {}));

var food1 = Fruit.Apple;
var food2 = Vegetable.Broccly;

打印下来的枚举

{ '0': 'Apple',
  '1': 'Pear',
  '2': 'Grape',
  Apple: 0,
  Pear: 1,
  Grape: 2 }

3. 函数

返回值类型
定义函数返回值
返回值不定义并不会报错
返回字符串

// 返回字符串
function foo(): string {
    return 'hello world';
}

// 返回空数组
function foo2(): Array<void> {
    return [];
}

// 什么都不返回
function foo3(): void {

}
//不定义返回值不会报错
function foo4() {
    return true;
}

函数参数类型

// 定义参数类型
// 参数类型不定义会报警告！
function getType(value: any) {
    // 相当于 var value1, value2
    return typeof value;
}

// function getType(value) {
//     return typeof value;
//     // 报警告 ： Parameter 'value' implicitly has an 'any' type.
// }

定义函数类型

//定义一个函数类型 (这个并不是件箭头函数)
let fn1 : (a: number, b: number) => number ;
//让这个函数类型等于一个函数
var foo = function (a, b) {
    return a + b;
}
fn1 = foo;
fn1 =(1,2);

//编译前的ts
let fn2: (a: number, b: number) => number = (a, b) => {
    console.log(this);
    return a + b;
}
fn2(2);

let rectanglePerimeter: (a: number, b: number) => number = function (width, height) {
    console.log(this);
    return (width + height) * 2
}

rectanglePerimeter(10, 20)

//编译之后
var _this = this;
var fn2 = function (a, b) {
    console.log(_this);
    return a + b;
};
fn2(2);
var rectanglePerimeter = function (width, height) {
    console.log(this);
    return (width + height) * 2;
};
rectanglePerimeter(10, 20);

对象

注意定义类型要使用分号

// //定义对象类型
let student: { name: string, age: number } = {
    name: "lyz",
    age: 24
};

// // 修改对象
student = {
    name: 'jelly',
    age: 25
}

let hybridObj: { data: number[]; getPow: (pow: number) => number[] } = {
    data: [1, 2, 3],
    getPow: function (pow) {
        return this.data.map((ele) => {
            return ele ** pow;
        })
    }
}

console.log(hybridObj.getPow(2))

或者使用type关键字

type obj2Type = { data: number[]; getPow: (pow: number) => number[] };

let hybridObj2: obj2Type = {
    data: [1, 2, 3],
    getPow: function (pow) {
        return this.data.map((ele) => {
            return ele ** pow;
        })
    }
}

console.log(hybridObj2.getPow(2));