TS个人学习笔记1---变量类型、数组和元祖、interface接口、函数

全局安装typescript

npm install -g typescript 

查看版本

tsc -v

把ts类型文件编译成js文件,在Git Bash中输入 tsc+文件名

tsc test.ts

---

定义变量

1. ts中所有的变量都需要定义类型

//输入的形参要定义类型
const hello = (name: string) => {
    return `hello ${name}`
}

hello('Typescript')
hello(123) // 传入其他类型会报错,但代码仍会运行

• 当定义类型后,编译器会自动提示类型的方法
  
• 如果使用类型不支持的方法则会报错

2. undefined 和 null 是所有类型的子类型,所以可以赋值给其他类型

let un : undefined = undefined 
let nu:null = null
let num:number = 123 
num = null
num = undefined //不会报错

3. 如果一个变量不能确定类型,可以使用any
但是如果明确了类型,应该尽量避免any,否则失去了typescript的意义

let notSure:any = 123
notSure = 'become to string'
notSure = true

4.类型推论 type inference
在变量没有明确声明类型的时候ts推断出变量的类型

let str = 'str'
//此时str推论为string类型,所以只能赋值string
str = 123 //报错:不能将类型“number”分配给类型“string”

5.联合类型 union types

let numOrStr:number | string
numOrStr = 123
numOrStr = '123'

此时变量只能使用联合类型中的共有方法或者属性

6.类型断言 type assertion
用as来告诉编译器用户确定变量的类型,并阻止报错

//类型断言
//定义一个返回长度的函数,返回值类型为number
//形参input为联合类型,所以需要用类型断言判断数值类型
function getLength(input:string|number):number {
	const str = input as string //把input判断为string类型,此时可使用string的方法length
	if(str.length) { 
		return str.length
	}else{
		const num = input as number
		return num.toString().length
	}
}

7.类型守卫 type guard
当遇到联合类型,使用判断语句的话,类型守卫会自动缩小类型范围,通过使用typeof , instanceof

//使用上面类型断言的例子,使用类型守卫改写
function getLength2(input:string|number):number {
	if(typeof input === 'string'){
		return input.length
	}else{
		return input.toString().length
	}
}

---

数组和元祖

- 数组

定义数组类型,可在[]前确定数组的类型
确定好类型后则可以使用类型的相关方法

//数字数组
let arrOfNum:number[] = [1,2,3]
arrOfNum.push(4,5,6) //如果push其他类型的值则会报错

//字符串数组
let arrOfStr:string[] = ['1','2','3']

- 类数组-arguments
有数组的属性:arguments.length等

function test(){
	console.log(arguments)
	arguments.length
	arguments[0]
}

但是没有一些数组的方法:forEach等

也不能赋值数组

- 元祖
如果需要定义明确的不同类型的数组,则可以使用元祖

//把类型按需要的顺序在[]中定义,而且定义多少个类型就要输入多少给元素
let user:[string,number,number] = ['Tom',20,1]
user = ['Tom2',21] //报错:不能将类型“[string, number]”分配给类型“[string, number, number]”。源具有 2 个元素，但目标需要 3 个。

//如果需要添加数值,只能添加已经定义的类型
user.push('Jerry',21)

user.push(true) //报错:类型“boolean”的参数不能赋给类型“string | number”的参数。ts(2345) 

元祖中也能定义可选参数,用?表示

let user2:[string,number,boolean?] = ['Penny',2]
user2.push(true)

但是必选元素不能在可选元素后定义

---

interface 接口

• 对对象的形状(shape)进行描述
• 鸭子类型(duck typing) 概念：如果某个东西长得像鸭子，像鸭子一样游泳，像鸭子一样嘎嘎叫，那它就可以被看成是一只鸭子。

//定义接口
//接口名称建议以大写I开头,表明是interface
interface IPerson {
	name:string;
	age:number;
}

//定义变量
//接口会对变量进行约束,多了或少了属性都需要与接口一致
let Tom:IPerson = {
	name:'Tom',
	age:18
}

//如果希望接口其中一个属性是可选的,则用?来表明属性是可选
interface IPerson2 {
	name:string;
	age:number;
	id?:number
}

let Jerry:IPerson2 = {
	name:'Tom',
	age:18
	//id不填也不会报错
}

//如果希望一个属性在定以后不能更改,需要在属性前加readonly 类似于const

interface IPerson3 {
	readonly name:string;
	age:number;
}

let Penny:IPerson3 = {
	name:'Penny',
	age:18
}

Penny.name = 'newPenny' //报错:无法分配到 "name" ，因为它是只读属性。

---

函数

//需要定义形参以及函数返回的类型
//在属参数后面加?来表明是可选参数,但必选参数一定要在可选参数前面定义

//声明写法
function add(x:number , y:number, z?:number):number {
	if(typeof z === 'string'){
		return x+y+z
	}else{
		return x+y
	}
}

//函数表达式写法
//采用函数表达式的话,ts会自动帮函数定义函数类型,const add2: (x: number, y: number, z?: number) => number
const add2 = (x:number , y:number, z?:number):number => {
	if(typeof z === 'string'){
		return x+y+z
	}else{
		return x+y
	}
}

//声明函数 用"=>"表明函数返回类型
let add3:(x:number,y:number,z?:number)=>number
add3 = add2

interface也可以描述函数类型

//新建interface
//interface中表明返回类型用":"来表示,而不是"=>"
interface ISum {
	(x:number,y:number,z?:number): number
}

add3:ISum = add2