TypeScript

安装ts

npm i -g typescript

HelloWorld

// 类型的注解
// 以前的js写法
var a = 'hello world'
// ts写法，给变量a添加类型注解
// String Array Number   tsc .\01HelloWorld.ts
var b:string = '小明'
var c:String = '哈哈'
console.log('b',b);
console.log('c',c);
var d:number = 123
var e:boolean = true
var arr1:number[] = [1,2,3]
// 元素类型允许表示一个已知元素数量和类型的数组
var arr:[string,number] = ['hello',123]
//数组的泛型
var arr2:Array<number> = [1,2,3]
var arr3:Array<string> = ['i','m']
// TypeScript 变量的命名规则：// - 变量名称可以包含数字和字母。
// - 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
// - 变量名不能以数字开头。
//  数字枚举默认是从0开始的，也可以手动指定
// 枚举一般首字母大写
enum Color{Red=1,Green,Blue
}
let c1:Color = Color.Green
console.log('c1',c1);
// void它表示没有任何类型，当一个函数没有返回值时，你通常会见到其返回值类型是 void:
// 如果一个函数有void返回类型
function fun():void{// return 12345
}
var dd = fun()
console.log('dd',dd);
// never类型表示的是那些永不存在的值的类型
// 回never的函数必须存在无法达到的终点
// 一般用于抛出错误
function error(message:string):never{throw new Error(message);
}
// any类型
let notSure:any='ppp'
var notSure1:string = notSure
// unknown未知类型 严格的any
// unknown类型只能被赋值给unknown和any类型，不能赋值给其他类型
var unknownVar:unknown = 123;
// var unknownVar1:number = unknownVar
// 相信我，我知道自己在干什么
// 类型断言 类型断言好比其他语言里的类型转换
var unknownVar2:string = unknownVar as string
// 类型断言有两种形式。其中一“尖括号”语法：
var unknownVar3:string = <string>unknownVar

函数

// ts是包含js的
function fun(a){console.log('a',a);
}fun(1)
function fun2(a:number,b:number){console.log('a',a);console.log('b',b);
}
fun2(123,999)// 函数的可选参数
function fun3(a:string,b?:number){console.log('a',a);console.log('b',b);
}
fun3('hello',12)// 默认参数
function fun4(a:number=2){console.log('a',a);
}
fun4(3)// 函数的剩余参数
function fun5(a:string,...c:any[]){console.log('a',a);console.log('c',c);
}
fun5('hello',1,2,3,4,'world',true)// 构造函数
function Person(name:string,age:number){this.name = namethis.age = age
}
var p = new Person('张三',99)
// 函数的返回值 规定函数的返回值的类型
function fun6(a:number,b:number):number{return 123
}

type类型别名

// var obj ={
//     name:'张三',
//     age:18
// }
// console.log('obj.name',obj.name);
// obj.sex = '男' // 不被允许这样写
var obj : {name:string,age?:number // 可选参数[key:string]:any // 索引签名允许定义对象可以具有任意数量的属性，这些属性的key和value数可变的// 索引签名常用语：描述类型不确定的属性（具有动态属性的对象）
}={name:'张三',sex:'男',class:12456
}
// 类型别名
type aa = string
var str:aa = 'hello'
// 联合类型
type bb =string|number|boolean
var cc:bb = true
let dd:string|number|boolean = '123'
// 类型别名的一个应用
type User ={name:string,age?:number
}
// 交叉类型 &
type User1={sex:string
}
type User2 = User & User1
var person:User ={name:'张三'
}
var person1:User2={name:'李四',sex:'男'
}
// 数组对象
var arrObj:User2[]=[{name:'王五',sex:"男"},{name:'王五',sex:"男"},{name:'王五',sex:"男"},
]
// 还有一种写法利用数组的泛型
var arrObj1:Array<User2>=[{name:'王五',sex:"男"},{name:'王五',sex:"男"},{name:'王五',sex:"男"},
]
// 数组对象的
type P ={name:string,age:number
}[]
var Person:P =[{name:'张三',age:18},{name:'张三',age:18},{name:'张三',age:18},
]

接口的基本使用

// 声明一个接口需要使用关键字interface
// interface接口可以进行继承
interface Child{name:string,age:number,sex:string
}
interface Father{money:number
}
interface Father{weight:number
}
interface Child extends Father{height:number
}
var obj:Child ={name:"张三",age:18,sex:"男",money:1000,height:180,weight:100,
}
console.log('obj',obj);
// 1.type可以声明基本类型，而interface不行
// 2.type可以进行交叉类型，而interface不行
// 3.interface可以进行继承而type不行
// 4.type在同一作用域下不能重复命名
// ts中定义方法
var count:(a:number,b:number)=>number
// ts中的=>表示函数类型，=>左边表示参数，右边表示返回值
count = (x,y)=>{return 123
}interface CountFun{(a:number,b:string):string
}
var countfun2:CountFun =(e,t)=>{return e+t
}
// 属性修饰符 只读属性 readonly
interface User{name:string,age:number
}
var person:User={name:'张三',age:18
}
person.name='李四'
console.log('person',person);

泛型

// 方法的泛型
// 我们需要一种方法使返回值的类型与传入参数的类型是相同的 
// 这里，我们使用了 类型变量，它是一种特殊的变量，只用于表示类型而不是值。
// 我们把这个特殊变量称为 类型变量，它用字母 T 来表示。
// 一般类型变量用A-Z 26个大写字母中的其中一个来表示
// function identity<T>(arg: T): T {
//     return arg;
// }
// 在fun1里面，D可以任意类型他就是类型变量，a是形参
function fun1<D>(a:D):D{return a
}
console.log('打印',fun1<number>(1));
fun1<string>('1')
fun1<boolean>(true)
// class 类
class Person{name:stringage?:numberconstructor(name:string,age:number){this.name = namethis.age = age}
}
var p = new Person('张三')

可选链

// <template>{{obj && obj.company && obj.company.name && obj.company.name.name}}<template>
// ts{{obj?.company?.name?.name}}
var obj={company:{name:{name:"小明"}}
}
if(obj && obj.company && obj.company.name && obj.company.name.name){console.log(obj.company.name.name);}
if(obj?.company?.name?.name){console.log(obj.company.name.name);
}