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和nulllet unusable: void = undefined;// 下面定义一个函数不需要的返回值的类型也使用 viodfunction 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);//