首页 > 其他 > 详细

Typescript笔记

时间:2019-11-21 14:20:11      阅读:114      评论:0      收藏:0      [点我收藏+]

使用全局变量的声明文件时,如果是以 npm install @types/xxx --save-dev 安装的,则不需要任何配置。如果是将声明文件直接存放于当前项目中,则建议和其他源码一起放到 src 目录下(或者对应的源码目录下):

/path/to/project
├── src
| ├── index.ts
| └── jQuery.d.ts
└── tsconfig.json

如果没有生效,可以检查下 tsconfig.json 中的 filesincludeexclude 配置,确保其包含了 jQuery.d.ts 文件。

 

 需要注意的是,声明语句中只能定义类型,切勿在声明语句中定义具体的实现

 

TypeScript 中,boolean JavaScript 中的基本类型,而 Boolean JavaScript 中的构造函数。其他基本类型(除了 null undefined)一样,不再赘述。

 

可选参数后面不允许再出现必需参数了

 

Initializer:初始设定式=等号

 

类型断言的用法:在需要断言的变量前加上 <Type> 后面加上as TYPE

 

类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的

 

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能

通常我们会把声明语句放到一个单独的文件(jQuery.d.ts)中,这就是声明文件

 

let声明出现在循环体里时拥有完全不同的行为。 不仅是在循环里引入了一个新的变量环境,而是针对 每次迭代都会创建这样一个新作用域 这就是我们在使用立即执行的函数表达式时做的事,所以在 setTimeout例子里我们仅使用let声明就可以了。

技术分享图片for (let i = 0; i < 10 ; i++) {

    setTimeout(function() {console.log(i); }, 100 * i);

}

会输出与预料一致的结果:0-9

 

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === ‘number‘) {
        return Number(x.toString().split(‘‘).reverse().join(‘‘));
    } else if (typeof x === ‘string‘) {
        return x.split(‘‘).reverse().join(‘‘);
    }
}

上例中,我们重复定义了多次函数 reverse,前几次都是函数定义,最后一次是函数实现。

注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确的定义写在前面。

 

 

 

技术分享图片

 

疑问:枚举

 

nullundefined是所有类型的子类型。 就是说你可以把 nullundefined赋值给number类型的变量(试了并不可以?)如下:

技术分享图片

 

 

never类型是任何类型的子类型,也可以赋值给任何类型(试了不可以,同上);然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never

 

any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object有相似的作用,就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法:

 

 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。

 

 

TypeScript具有ReadonlyArray<T>类型,它与Array<T>相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改:

技术分享图片let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

上面代码的最后一行,可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写

技术分享图片a = ro as number[];

 

 

然而,TypeScript会认为这段代码可能存在bug 对象字面量会被特殊对待而且会经过 额外属性检查,当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何目标类型不包含的属性时,你会得到一个错误。

 

一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

 

赋值的时候,变量的形状必须和接口的形状保持一致(属性不能多也不能少)

 

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
如上的NumberArray 表示:只要索引的类型是数字时,那么值的类型必须是数字

 

 

 

 

 

 

 

 

 

 

 

 

注解:对程序元素的说明,用于告诉工具和框架如何处理该程序元素。(注解具体有什么用?

技术分享图片

    技术分享图片

 

类型定义文件(*.d.ts)帮助开发者在typescript中使用已有的js工具包(jquery)(如何帮助,具体有何用?

两种使用方式:

1.找类型定义文件:

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

然后下载后,copy到项目文件夹

2.或者直接安装类型定义文件:

https://github.com/typings/typings

 

 

泛型 用于限制集合的内容

 

技术分享图片

 

接口: 用于约束属性和方法

interface和implements关键字

 

 

 

 

 

 

 

类的继承: extends

构造函数:实例化的时候执行,且只执行一次。子类的constructor中,必须用super()调用父类的constructor

访问控制符: public,private(内部才可访问?),pretected(内部?和子类可访问)。 默认是public

 

 

 

TypeScript是一种由微软开发的支持ES6标准的编程语言,它是Angular2的开发语言。它可以编译成纯JavaScript,可以在任何浏览器,任何计算机和任何操作系统上运行,并且是开源的。

 

js的超集

 

而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

 

TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。

 

TypeScript是为大型应用之开发而设计

 

js 支持es5

ts 支持es6

 

ts开发环境-compiler-浏览器不支持es6-在线compiler(官网playground)

 

开发环境:

一. 命令行方式:

1. npm install -g typescript    2. Tsc test.ts

二. IDE方式:

1.webstorm自带编译功能

2. Vscode 需要配置,配置方法自己搜!

 

字符串: 1.多行字符串 2.字符串模板 3.自动拆分字符串

技术分享图片

 

 

类型定义:

1. 几种基本类型

2. 自定义类型

技术分享图片

 

参数: 1.参数类型;2参数默认值;3.可选参数(1.记得可选参数没传情况要做处理 2.可选参数只能在必选参数后面!)

默认参数: (name:string = ‘joe’)

可选参数: (age?: number)

 

函数新特性:

技术分享图片

 

技术分享图片

typescript暂时不支持如下对象展开符语法

技术分享图片

 

generator函数(typescript暂不支持):yield控制函数执行过程(yield:放弃 类似于return)

技术分享图片

 

技术分享图片

 

 

 

对象的析构赋值:

 

技术分享图片

const {age:{age1}} = obj 等价于 const {age1} = obj.age

 

数组的解构赋值:

技术分享图片

 

箭头函数: this指向函数定义的作用域中的this!

 

 

 

forEach不输出属性,也不支持break关键字

For in 可用于数组,会输出数组的属性

For of 可用于数组和字符串,不用于对象。不会输出数组属性值,支持break

 

 

Typescript笔记

原文:https://www.cnblogs.com/ycxqdkf/p/11904816.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!