TypeScript入门笔记

TypeScript入门笔记

第一章 TypeScript简介

1.1 TypeScript简介

TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法，最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法。

TypeScript = Type + JavaScript（为JS添加了类型系统）

1.2 TypeScript安装

安装步骤：
1.打开cmd命令
2.输入安装命令：npm i -g typescript 敲回车，来安装（可以添加版本号）
3.安装查看: tsc -v / tsc --version

1.3 TypeScript开发工具

开发工具使用：Visual Studio Code，已安装汉化插件

第二章 TypeScript数据类型

变量格式一：

let 变量名：变量类型 = 初始化值；

变量格式二：

let 变量名：变量类型 | undefined;
变量名= 变量值

2.1 数字类型

• 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

2.2 布尔类型

• 布尔值 boolean true/false值

let isDone: boolean = false;

2.3 字符串类型

• string 单引号（推荐）或双引号或``都可以

let name: string = "bob";
name = "smith";

2.4 数组类型

• 数组; 开发中, 数组中的元素为同一类型
• 语法1：类型[]

// 表示数值数组
let list: number[];
let list: Array<number>;

let list: number[] = [1, 2, 3];

• 语法2：使用泛型写法，Array<元素类型>

// 表示字符串数组
let list: string[];
let list: Array<string>    

let list: Array<number> = ['a', 'b', 'c'];

扩展: 申明二维数组
let arr:number[][] = [
[1,2,3],[7,8,9]
]

2.5 对象类型

对象类型的基本使用

• js中属于对象的太多，添加object后等于是没有添加类型限制，开发很少用
• 示例1：

// {}也表示对象，表示变量o必须是一个对象类型，在其中可以指定属性类型
// 以下示例表示对象o中只能有指定的属性名称和类型，以及个数
// 在属性名后面加?，表示该属性可选
let o: {
	name: string, 
	age: number，
	sex?: string
};

o = {name: '孙悟空'，age: 18} // ok
o = {name: '孙悟空'} // 报错,少了一个age属性
o = {name: '孙悟空'，age: 18，sex: '男'} // ok

• 示例2：

// 需求：在一个对象中，我只有一个属性是有要求的，其他的属性名称、类型、个数都未知
let o: {
	name: string, 
	[propertyName: string]: any
}
/*
* 以上代码，[propertyName: string] 表示属性名是string（对象的属性名都是字符串类型）
* [propertyName: string]: any 表示该对象中的属性是任意类型，
*						如果any是string，表示该对象中的属性都必须是string类型
*/

• 实例3:

function getObj(obj: object):object {  
	// do something  
	return {    
		name:"卡卡西"  
	}
}

console.log(getObj({name:"佐助"}))
console.log(getObj(new String('字符串')))

对象类型中的函数写法

指定对象中, 函数的类型

1.写法一:sayHi(name:string):void

const user: {  
	name:string  
	sayHi(name:string):void
}  

user = {  
	name:'张三'  
	sayHi(name) {    
		console.log('你好,我叫' + name)  
	}
}

2.写法二: add(n1:number, n2:number) => number

const user: {  
	name:string  
	add(n1:number, n2:number) => number
}

user = { 
	name:'李四'  
	add: function(a, b){    
		return a+b  
	}
}

2.7 null 类型

• 表示此处不应该有值, 没有值了
• 在TS中, 可以给已有类型的引用数据类型变量, 重新赋值null

let n: null = null 

2.8 undefined类型

• 表示此处应该有值, 但是现在没有值
• 申明了一个变量, 但是未赋值, 这个变量就是undefined
• 在TS中, 可以给已有类型的基本数据类型变量, 重新赋值undefined

let u：undefined = undefined

TS新增类型

2.9 联合类型

• 把多个类型联合为一个类型 (表示取值可以为多种类型中的一种)
• 用 |隔开

// 表示入参param可以是number或者string类型
// 出参为string类型
function getSomeThing(param: number|string):string {    
	return param+''
}

getSomeThing(123)
getSomeThing("字符串")

type MyType = 1 | 2 | 3 | 4 | 5;

let a: MyType