基础语法

更新: 8/1/2025 字数: 0 字 时长: 0 分钟

JS的基本类型有布尔值，数值，字符串，null，undefined，Symbol（ES6）,BigInt（ES10）

布尔类型

let flag:boolean=false  //boolean类型

和Java一样，Boolean和boolean并非同一种类型

数值类型

let num:number=5

ts支持二进制和八进制

字符串类型

let str:string='232323'

空值

ts中使用void表示空值，这样也就解决了函数没有返回值的问题

function fun():void{
	alert('12')
}

null与undefined

在ts中null和undefined用null和undefined类型来表示

let u: undefined = undefined;
let n: null = null;

这里的null与undefined是所有类型的子类

any类型

ts中any类型是所有类的父类，也就是说你的所有类型的值都可以被赋值给一个any类型的变量

类型推断

let num=1  
console.log(num)

这样的写法是被允许的，因为ts会根据后面的值自动推断类型

联合类型

ts允许一个变量可以是多个类型，这种写法称之为联合类型(Union Type)

let a:number|string=1
a='12'

接口

ts中实现了接口，用来对一个类的形状进行定义

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

这里的age是一个可选属性，表示这个接口的实现类可以没有这个属性

任意属性

存在一种语法叫做任意属性，用来进一步开放接口，通过定义任意属性，我们可以让一个接口的实现类中存在多个定义之外的属性，

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

以上代码的含义就是Person的实现类中除了name和age外还可以有其他自定义的参数，但是要求参数的key必须是string类型，value必须是any类型

值得注意的是，任意属性的要求对已经定义的属性仍然生效，因此你不能这么写

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

这样的话任意属性中的value会与已定义的age中的number类型冲突，进而导致报错

只读属性

你可以通过给接口的属性前面添加readonly关键字来将这个属性声明为只读属性，只读属性只能在实现类创建的时候进行一次定义

数组类型

ts中的数组存在多种定义方式

let ars1:number[]=[1,2,3]
let ars2:Array<number> =[1,2,3]

或者使用接口的方式

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

不过需要记住的是，js中的类数组，再ts中也是不能当作数组处理的，因此不能直接加入到数组中

函数

ts的函数与kotlin中的相似

function sum(x: number, y: number): number {
    return x + y;
}

函数表达式

ts的函数表达式与ES6中的定义一致，要求使用箭头表达式

let myFun:(x:number,y:number)=>number=function(x:number,y:number){
	return x+y
}

接口定义函数

我们也可以使用接口定义函数

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

默认参数

同样的，ts也支持默认参数，你可以给参数添加一个默认值进而来避免传这个参数

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');
cat=buildName(lastname='cat')

可选参数

ts可以给函数定义可选参数，但是要求可选参数必须在函数的末尾

function fun(x:number,y?:number,z?:number){
    console.log(x,y,z)
}

fun(1)
fun(1,2)
fun(1,2,3)

rest参数

ts可以使用rest参数传入一个数组，但要求rest参数必须作为函数的最后一个值

function fun(a:number,...b:number[]){  
    b.push(a)  
    console.log(b)  
}  
  
fun(1,1,2,3,4,5,6,)

函数的重载

ts允许重载函数，但是写法有点怪，他是通过union type实现的

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

我们需要先写两个模板，然后再写一个公用的函数

类型断言

ts使用 值 as 类型 来让我们告诉编译器一个值是什么类型的

这一语法让我们在使用一些union type的时候可以将其指定为一个类型再进行处理，进而避免编译器的报错

类型别名

使用type关键字可以让我们给一个类型添加别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

这种做法可以避免我们去写一个很长的函数类型或者联合类型

字符串字面量类型

我们还可以使用type定义string的限定区间

type FruitKind='apple' | 'banana' | 'orange'

let fruit:FruitKind='apple' //√
fruit='potato' //×

元组

ts这添加了元组这一语法，你可以指定数组中的每个位置都是什么类型

let arr:[string,number,boolean]=['1',1,true]

枚举

ts中添加enum类型，作用也是和C#中的enum类似

enum Days {  
    MON=1,  
    TUE='TUE',  
    WED='WED'  
}  
  
console.log(Days.MON)

我们可以为枚举中的值进行赋值，直接使用会使用你付的值

类

作为一个面向对象的语言，ts对js原本的语法进行了思考，并完善了类的写法

class Person {
    age:number
    name:string
    constructor(name:string,age:number) {
        this.age=age
        this.name=name
    }
}

这里的属性age和name其实是可以不用给属性，因为我们可以使用构造函数来进行明确（一点点js的影子）

继承

一个类也可以继承另一个类，只需要使用extends关键字

class Person {
    age:number
    name:string
    constructor(name:string,age:number) {
        this.age=age
        this.name=name
    }
}

class Student extends Person{
    constructor(name:string,age:number) {
        super(name,age);
    }
    
    sayHi(){
        console.log("hi,i am student")
    }
    
}

get & set

我们也可以使用get set方法来为参数定义如何存取

class Person {
    age:number
    name:string
    constructor(name:string,age:number) {
        this.age=age
        this.name=name
    }
	get name(){
		return this.name
	}
}

静态方法

静态方法与静态属性只需要使用static关键字进行修饰即可

属性的可见度

ts中属性的可见度只有三个private public protected，三者分别代表了仅自己可用，所有人可用，子类与自己可用

这里的可用就是可见度的一种说法，其实就是在什么地方可以通过“点”来获得这个属性

只读属性

只读属性也被保存了下来，这里就不多提了

接口与类

之前我们提到ts中的接口其实是用来描述一种形状的（其实js也是），这里ts为了更加符合其他语言的语法特点，接口也可以被类用来实现

interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

这里我们使用implements关键字来声明这个类是实现了这个接口的，接口的实现类中要实现接口中的所有函数

与Java类似，接口还可以继承接口

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

泛型

由于引入了严格的类型限制，现在ts的泛型也是十分有必要的，其作用类似于Java中的泛型，写法也类似

function test<T,U>(a:T,b:U){
    console.log(a,b)
}

同样的我们也可以定义泛型类

class Person<T>{  
    name:T  
    constructor(name:T) {  
        this.name=name  
    }  
}

我们还可以给泛型指定一个类型呢

class Person<T=string>{  
    name:T  
    constructor(name:T) {  
        this.name=name  
    }  
}

这种写法用来表示我们在不指定泛型时这个泛型默认是什么类型