ts基础

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40918961/article/details/95950626

ts是js的超集，运行ts需要安装ts运行环境

使用npm工具安装:

npm install -g typescript

ts文件通过tsc编译为js代码，tsc Test.ts,之后可通过node命令执行该js代码

ts中;是可选的，加上比较好

ts是一种oop语言

1.数据类型

any:表示任意类型

number：64位双精度浮点值

string:字符串

boolean

array:数组 []

元组：元素类型可以不同的数组

enum:枚举

void/null/undefined/never

2.变量声明与作用域

ts对变量声明作了更加精确的限制

有四种方式声明变量

声明变量的类型及初始值：

var [变量名] : [类型] = 值;

声明变量的类型及但没有初始值，变量值会设置为 undefined：

var [变量名] : [类型];

声明变量并初始值，但不设置类型类型，该变量可以是任意类型：

var [变量名] = 值;

声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];

TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误

var num:number = "hello"     // 这个代码会编译错误

类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式：

<类型>值

或:

值 as 类型

实例

1. var str = '1'
2. var str2:number = <number> <any> str //先将str变为任意类型any,再转换为number

关键字let:声明局部变量

关键字const:声明一个只读常量(final)

联合类型（Union Types）

联合类型（Union Types）表示取值可以为多种类型中的一种。

联合类型使用 | 分隔每个类型。

这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。

3.函数

ts新增一种函数声明方式

function function_name(param1 [:datatype], param2 [:datatype]):return_type { 
    // 语句
    return value; 
}

 可选参数：

TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？

function function_name(param1 [:datatype], param2？ [:datatype]):return_type { // 语句 return value; }

默认参数：

我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为：

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意：参数不能同时设置为可选和默认。

剩余参数：

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组（剩余参数数组）。

lambda，箭头函数

Lambda 函数也称之为箭头函数。

箭头函数表达式的语法比函数表达式更短。

函数只有一行语句：

( [param1, parma2,…param n] )=>statement;

以下实例声明了 lambda 表达式函数，函数返回两个数的和：

var foo = (x:number)=>10 + x console.log(foo(100)) //输出结果为 110

ts支持函数重载，只需限定相同函数名的返回类型不同即可

4.接口

这里的接口比较奇怪，与java中的不太一样

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

简单的例子

1. interface Person {
2. name: string;
3. age: number;
4. }
5. let tom: Person = {
6. name: 'Tom',
7. age: 25
8. };

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。

定义的变量比接口少了一些属性是不允许的：

1. interface Person {
2. name: string;
3. age: number;
4. }
5. let tom: Person = {
6. name: 'Tom'
7. };
8. // index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
9. // Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的：

1. interface Person {
2. name: string;
3. age: number;
4. }
5. let tom: Person = {
6. name: 'Tom',
7. age: 25,
8. gender: 'male'
9. };
10. // index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
11. // Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可见，赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

1. interface Person {
2. name: string;
3. age?: number;
4. }
5. let tom: Person = {
6. name: 'Tom'
7. };
8. interface Person {
9. name: string;
10. age?: number;
11. }
12. let tom: Person = {
13. name: 'Tom',
14. age: 25
15. };

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性：

1. interface Person {
2. name: string;
3. age?: number;
4. }
5. let tom: Person = {
6. name: 'Tom',
7. age: 25,
8. gender: 'male'
9. };
10. // examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
11. // Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

12.  

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

1. interface Person {
2. name: string;
3. age?: number;
4. [propName: string]: any;
5. }
6. let tom: Person = {
7. name: 'Tom',
8. gender: 'male'
9. };

使用 [propName: string] 定义了任意属性取 string 类型的值。

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

1. interface Person {
2. name: string;
3. age?: number;
4. [propName: string]: string;
5. }
6. let tom: Person = {
7. name: 'Tom',
8. age: 25,
9. gender: 'male'
10. };
11. // index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
12. // index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
13. // Index signatures are incompatible.
14. // Type 'string | number' is not assignable to type 'string'.
15. // Type 'number' is not assignable to type 'string'.

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

另外，在报错信息中可以看出，此时 { name: 'Tom', age: 25, gender: 'male' } 的类型被推断成了 { [x: string]: string | number; name: string; age: number; gender: string; }，这是联合类型和接口的结合。

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

1. interface Person {
2. readonly id: number;
3. name: string;
4. age?: number;
5. [propName: string]: any;
6. }
7. let tom: Person = {
8. id: 89757,
9. name: 'Tom',
10. gender: 'male'
11. };
12. tom.id = 9527;
13. // index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
14. 上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

1. interface Person {
2. readonly id: number;
3. name: string;
4. age?: number;
5. [propName: string]: any;
6. }
7. let tom: Person = {
8. name: 'Tom',
9. gender: 'male'
10. };
11. tom.id = 89757;
12. // index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
13. // Property 'id' is missing in type '{ name: string; gender: string; }'.
14. // index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
15. 上例中，报错信息有两处，第一处是在对 tom 进行赋值的时候，没有给 id 赋值。

第二处是在给 tom.id 赋值的时候，由于它是只读属性，所以报错了。

接口可使用extneds关键字进行继承

5.数组

最简单的方法是使用「类型 + 方括号」来表示数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];

6.类

使用class关键字进行声明

构造方法使用constructor(参数){}进行声明

内置方法:方法名():返回类型

声明对象var 变量名=new 类名(参数)

类也可以通过extends关键字进行继承，只能继承一个类

关键字super代表父类

关键字static声明静态方法/字段

关键字instanceof:A instanceof B 判断A是否是B的实例

三种访问修饰符:public,protected,private

关键字implements表示实现接口

7.对象

与js中的一样，对象就是变量key和值value的集合，key是变量名，value是任意类型的值

8.命名空间

关键字namespace用于声明一个命名空间，命名空间内的类和对象需要被导出的使用关键字export进行声明，同理，要引用其他的ts文件要在首部进行声明

1. namespace SomeNameSpaceName {
2. export interface ISomeInterfaceName { }
3. export class SomeClassName { }
4. }

1. namespace Drawing {
2. export interface IShape {
3. draw();
4. }
5. }

 

1. /// <reference path = "IShape.ts" />
2. namespace Drawing {
3. export class Circle implements IShape {
4. public draw() {
5. console.log("Circle is drawn");
6. }
7. }
8. }

9.模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

此外还有有 SystemJs 和 Webpack。

模块导出使用关键字 export 关键字，语法格式如下：

// 文件名 : SomeInterface.ts export interface SomeInterface { // 代码部分 }

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

import someInterfaceRef = require("./SomeInterface");