【前端库】typescript 入门笔记

安装

安装typescript的编译器

如果在编辑器内编辑好了以后，那么怎么编译成javascript了，就得在node的cnpm安装编译器，通过命令行，将ts后缀文件编译成javascript。

// 安装
cnpm install -g typescript

在编辑器内安装typescript 编辑插件，比如：在Sublime Text 3 中 按ctrl+shift+p ，然后安装插件那样安装，在输入typescript

编译命令行

将typescript文件.ts的后缀 编译成javascript 。命令：

// 编译单个文件.ts的后缀，比如下面的main文件
tsc main.ts

// 编译多个文件.ts的后缀，比如下面的main和workers文件
tsc main.ts worker.ts

// 编译全部的文件.ts的后缀，
tsc *.ts

// 可以使用 --watch来自动编译typescript文件，比如下面的main文件：
tsc main.ts --watch

多行字符串

使用多行字符串

// 使用 `` 可以在字符串内生成换行，比如正常的时候
var str = '
字符串拼接
'
// 上面只样是不正确，会报错，那么对于多行字符可以减少。


var str =`
\n正确
\n哈哈哈
`
// 上面只有使用多行字符串是正确的

字符串模板

调用声明好的字符串或者是函数。然后使用 表达式${} 来调用

==注意：表达式内，必须得使用单引号才能解析变量或者方法，如果是双引号的话，解析的是字符串。==

var str = '我是var的字符串';
function str () {
    return '我是函数return的字符串'
}
console.log('开始调用 ${str}'); // 调用字符串
console.log('开始调用 ${str()}'); // 调用方法

自动拆分字符串

function fn (name,age,sex) {
    console.log('打印name',name);
    console.log('打印age',age);
    console.log('打印sex',sex);
}

var age = 12;
var sexFn = function  () {
    return '男';
}

fn `youer name is 金 ${age} ${sexFn()}`;

参数的新特性

参数类型

参数后面使用冒号来指定参数类型，只能是提醒，编译后，JavaScript 正常执行

var name:string = '金山';
name = 123; // 这里会给你报错

// 自动化检测类型，当你了赋值其他的了类型，会提醒你
var name = '金山';
name = 123; // 这里也会报错


// typescript 定义任何类型都可以的，比如将一个字符串变数值就必须得是 any定义类型
var name:any = '金山';
name = 1231; // 这里就不会报错.

下面是常用的类型

==默认情况下null和undefined是所有类型的子类型。就是说你可以把 null和undefined赋值给number类型的变量。在某处你想传入一个 string或null或undefined，你可以使用联合类型==

var sex:boolean = true;// 定义一个变量sex，类型为布尔。
var name:string = '金山';// 定义一个变量name，类型为字符串
var num:number = 88888; // 定义一个数值类型的变量。可以是浮点小数，正整数，二进制，十进制，十六进制
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
var o : any = 1231; // 定义一个任何可以改变的变量。
let u: undefined = undefined; // 定义一个undefined类型的变量
let n: null = null; // 定义一个null的变量


// 下面是定义数组类型
let arr:number[] = [1,3,4,5]; // 定义数组全是数字的类型。还可以定义其他的，比如var list:any[] = [1, true, "free"];。或者下面也是可以这样写
let arr:Array<number> = [3,4,5,6,7,8,0b1010,0o744]; 

// 下面是空类型，表示没有任何类型，使用viod，与any是相反的。只能为它赋予undefined和null
let unusable: void = undefined;
// 下面定义一个函数不需要的返回值的类型也使用 viod
function ts ():void {
    return ''; // 这样就会报错，声明类型为不返回值。
}

// 下面还可以指定其他类型返回值，比如：返回一个string类型的值
function fn ():string {
    return '';
}

// never类型，never类型表示的是那些永不存在的值的类型。比如：总是会抛出异常、根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
function error(message: string): never {// 返回never的函数必须存在无法达到的终点
    throw new Error(message);
}
function fail() {// 推断的返回值类型为never
    return error("Something failed");
}
function infiniteLoop(): never {// 返回never的函数必须存在无法达到的终点
    while (true) {
    }
}

// 还可以使用参数弄类型调用
function fn (name:string):number {
    return 12;
}
fn('金山');// 这里必须得 是字符串传进去

// 其他的都可以试试。

// 下面是自定义一个类型,比如自定义一个pp的类型，里面的name是字符串，age是数字的类型
class pp () {
    name:string;
    age:number
}
// 使用
var p = new pp();
p.name = '金山';
p.age = 123;

// 使用enum 枚举 ，前面加上枚举的enum ，遍历第几个，但是这个不是json哦
enum jia { r,q,f };
let msg:jia = jia.r;// 赋值msg变量
console.log(jia.r); 
conosle.log(msg);
// 但是可以直接赋值是可以的;

综合使用以上

let msg:any = 88888;
var str:string = '我是';
function run (_ws:number) {
    return _ws+'名码农';
}
console.log(`${str}${run(1)}${msg='，真的是了'}`);

默认传参和可选参数

var str:string = '张三';
function fn (can:string,can2:number,can3:string = '默认参数') {
    console.log(can);
    console.log(can2);
    console.log(can3);
}
fn('我是参一','我是参二'); // 如果参数不传的话，则报错。而第三个参数可以使用默认参数，那么就可以不报错


// 如果默认参数在前面的话，可以使用传参的话，可以使用逗号隔开.


// 使用可选参数，使用问号就可以变成可选。
function fn (can:string,can2?:number,can3:string = '默认参数') {
    console.log(can);
    console.log(can2);
    console.log(can3);
}
fn('一个参数');// 可选参数的话，只要一个就可以了。

变量

申明多个变量及值，等等

// 使用[变量1, 变量2] = [值1,值2] ; 变量1对应值1； 
let [a,b] = [1,6];
console.log(a);
console.log(b);

// 声明少量的变量，让最后一个变量将剩余变量值存起来。使用 ... 来将剩余的变量值给他。
let [name,...color] = ['金山','红色','绿色','白色','黄色'];
conosle.log(name);
console.log(color);

//