TypeScript - 技术栈

安装ts

npm i -g typescript

HelloWorld

TypeScript 复制代码

// 类型的注解
// 以前的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

函数

TypeScript 复制代码

// 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 = name
    this.age = age
}
var p = new Person('张三',99)
// 函数的返回值 规定函数的返回值的类型
function fun6(a:number,b:number):number{
    return 123
}

type类型别名

TypeScript 复制代码

// 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
    },
]

接口的基本使用

TypeScript 复制代码

// 声明一个接口需要使用关键字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);

泛型

TypeScript 复制代码

// 方法的泛型
// 我们需要一种方法使返回值的类型与传入参数的类型是相同的 
// 这里，我们使用了 类型变量，它是一种特殊的变量，只用于表示类型而不是值。
// 我们把这个特殊变量称为 类型变量，它用字母 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:string
    age?:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
}
var p = new Person('张三')

可选链

TypeScript 复制代码

// <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);
}