typescript基本语法、接口学习笔记

1.基本语法

javascript提供了基本的数值、字符串、布尔等结构。typescript也提供了额外的枚举类型

let isDone: boolean = true//布尔类型
let money: number = 123//数值类型
let name1: string ='bob'//字符串类型
let age: number = 22
let introduce: string = '我的名字是' + name1 +',今年' +age+'岁'   
let introduce1: string = `我的名字是${name1}，今年${age}岁`//模版字符串表达式
console.log(isDone,money,name1,introduce,introduce1)

枚举：

let arr: number[] = [1,2,3,4]
let arr1: Array = [1,2,3,4,5]
console.log(arr,arr1)
let yz:[number,string]
yz = [10,'aaaa']
console.log(yz)
enum Name {bob,vicky,alice}
let c: Name = Name.bob
console.log(Name,c)//{0:"bob",1:"vicky",2:"alice"}当然默认是从0开始，你可以让bob=1从1开始
//反之我们可以通过枚举的值得到他的名字
let myname: String = Name[1]
console.log(myname)

let price: any = 13445
price.toFixed(2)
console.log(price)
// let prettySure: Object = 4;
//prettySure.toFixed();//类型“Object”上不存在属性“toFixed”

let someValue: any = "this is a string";
let strLength: number = (someValue).length;
let strLength1: number = (someValue as string).length;
console.log(strLength,strLength1)

2.typescript与javascript声明方式的区别

typescript支持与javascript几乎相同的数据类型，此外还提供了其他额外的

2.1区别1：声明方式的不同

js: var money = 111;
ts: let money: number = 111

2.2区别2:元祖表示一个已知元素数量和类型的数组，各元素的类型不必相同

let yz:[number,string]
yz = ['10','aaaa']

2.3区别3:枚举类型：为一组数组赋予友好的名字，枚举的值默认从0开始，当然我们也可以直接赋值，可通过枚举值获取他的名字

enum Name {bob,vicky,alice}
let c: Name = Name.bob
console.log(Name,c)
let myname: String = Name[1]
console.log(myname)

2.4区别4:位置类型

js:let a;a为undefined
ts:let notSure: any = 4;
any和object都可以进行任何的赋值，但是不能调用object上面的任意方法
let price: any = 13445
price.toFixed(2)
console.log(price)
let prettySure: Object = 4;
prettySure.toFixed();//类型“Object”上不存在属性“toFixed”

2.5区别5:断言：类似于js中的typeOf,但是它只在编译时起作用

1.尖括号语法(.xx)
2.as语法
let someValue: any = "this is a string";
let strLength: number = (someValue).length;
let strLength1: number = (someValue as string).length;
console.log(strLength,strLength1)

3.接口

3.1基础用法

接口：可以描述js中对象拥有的外形，例普通对象、函数等。就是类型命名和你的代码进行一个定义契约，比如说传入的某个值要为什么类型

//下列就是传入一个infoObj对象，并且接口nameInterface说name要为string
function myName (nameInterface: {name: string}) {
     console.log('My name is ' +nameInterface.name)
 }
 let infoObj = { name :'vicky'}
 myName(infoObj)
//或者写成
interface nameInterface {
     name: string
 }
function myName (nameValu: nameInterface) {
     console.log(nameValu.name)
}
let obj = { name: 'alice', age: 18}
myName(obj)

3.2.可选属性

下面这种情况，我在接口里定义了两个值，但是传入的对象里面没有，所以就会提示说缺少属性“age"，那么有时候我们不想或者不传全部属性的时候，怎么避免这种情况呢？就是可选属性可选属性其实与基本用法差不多，就是在属性名字后面加一个？符号

interface nameInterface {
     name: string
    age: number
}
function myName (nameValu: nameInterface) {
     console.log(nameValu.name)
}
 let obj = { name: 'alice'}
 myName(obj)
 interface nameInterface {
     name?: string
    age?: number
}
 function myName (nameValu: nameInterface) {
    console.log(nameValu.name)
 }
 let obj = { name: 'alice'}
 myName(obj)

3.3.只读属性,属性名前加readonly

 interface point {
    readonly x: number,
    readonly y: number
 }
 let p:point = {x: 5, y: 10}
p.x = 1//[ts]无法分配到“x",因为它是常熟或只读属性
 console.log(p.x)

3.4.readonly与const两者都是不能改变其值了，但是我们怎么能分辨用哪个呢？

作为变量时我们使用const，作为属性时我们用readonly

3.5.可索引的类型

interface StringArray {
    [index: number]: string;
}
let myArray: StringArray; 
myArray= ["Bob", "Fred"]
let myStr: string = myArray[0];
console.log(myStr)