您的位置:

TypeScript学习笔记

一、TS简介

TypeScript,简称TS,是微软开发的开源编程语言。它是JavaScript的超集,意味着任何有效的JavaScript代码都是有效的TypeScript代码。TS就像是在JS的基础上加入了类、接口、泛型等面向对象的特性。而这些特性使得TS在开发大型项目时具有更好的可读性、可维护性、可扩展性。事实上,大型项目完全可以用TS来代替JS。目前,Angular就是基于TS开发的。

相较与JS,TS的学习成本略高,因为要掌握额外的面向对象特性以及类型的概念。但学会TS,会使得你的代码更加简洁、安全,并且提升团队的协作效率。所以推荐开发者学习TS。

二、TS的环境配置

要学习TS,首先需要搭建开发环境。

1. 安装Node.js

TS需要依赖Node.js环境,所以需要先下载并安装Node.js。可以在Node.js官网下载最新版本:https://nodejs.org/zh-cn/。下载完成后,执行以下命令,检查Node.js是否安装成功:

    
    node -v 
    

输出Node.js版本号即表示安装成功。

2. 安装TypeScript

执行以下命令,安装TS:

    
    npm install -g typescript 
    

全局安装TS后,通过以下命令查看版本是否安装成功:

    
    tsc -v
    

输出当前TypeScript版本信息即表示安装成功。

三、TS的基本语法和特性

以下是TS的基本语法和特性:

1. 类型推断

如果变量有初始化值,TypeScript通过变量的值自动推断变量的类型:

    
    let str = 'hello';  //自动识别变量类型为string
    let num = 666;      //自动识别变量类型为number
    let flag = true;    //自动识别变量类型为boolean
    

2. 显式声明

除了类型推断,还可以显式声明变量的类型:

    
    let str: string = 'hello';  //显式声明变量类型为string
    let num: number = 666;     //显式声明变量类型为number
    let flag: boolean = true;  //显式声明变量类型为boolean
    

3. 接口

TS中的接口定义了一个代码约定,使得不同的组件可以协同工作。接口就像是一个合同,定义了“必须”提供哪些属性或方法,以及对应的类型。如下面定义了一个Person接口:

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

    let person: Person = {
        name: 'Mark',
        age: 18
    };
    

这里定义了一个Person接口,约定了它包含了name和age两个属性,并且分别对应string和number类型。然后通过将这个接口作为类型注解来声明一个person对象,表示该对象必须包含name和age属性,并且属性值符合类型约定。否则,将会编译出错。

4. 类和继承

定义类的方式与JavaScript基本一致,只是可以使用extends关键字实现继承:

    
    class Animal {
        name: string;
        constructor(name: string) {
            this.name = name;
        }
        move(distance: number = 0) {
            console.log(`${this.name} moved ${distance}`);
        }
    }

    class Snake extends Animal {
        constructor(name: string) {
            super(name);
        }
        move(distance: number = 5) {
            console.log("Snake is sliding...");
            super.move(distance);
        }
    }

    let snake = new Snake("Python");
    snake.move();
    

这里定义了一个Animal类,包含了name和move方法。然后通过extends关键字实现了Snake类对Animal类的继承。Snake类重写了move方法,并且通过super.move()调用了父类的move方法。

5. 泛型

泛型提供了一种定义函数、类和接口的方式,使得它们能够适用于多种数据类型,从而实现代码重用。下面是一个泛型函数的示例:

    
    function identity
   (arg: T): T {
        return arg;
    }

    let output1 = identity
    ("MyString");    //T指定为string类型
    let output2 = identity
     (666);           //T指定为number类型
    
     
    
   

函数名identity后面的<T>表示该函数使用泛型类型T。当调用该函数时,需要在函数名后面通过<T>来指定T的具体类型。

四、带有TS的React项目(示例代码)

以下是一个使用TypeScript的简单React项目示例:

1. 安装必要的库文件

    
    npm create react-app my-app --template typescript
    cd my-app
    npm start
    

2. App.tsx组件代码示例

    
    import React, {useState} from 'react';

    interface Props {
        name: string;
    }

    const App: React.FC
    = ({name}) => {
        const [count, setCount] = useState
    (0);

        const handleClick = () => {
            setCount(count + 1);
        };

        return (
            <div>
                <h1>Hello, {name}!</h1>
                <p>You clicked {count} times</p>
                <button onClick={handleClick}>Click me</button>
            </div>
        );
    };

    export default App;
    
    
   

这里定义了一个App React组件,组件的Props是一个name属性,表示需要传递一个名字参数。useState是React Hooks的一个方法,用于声明state变量和setter函数。这里的useState定义了一个number类型的count变量和与之对应的setCount方法。然后定义了一个handleClick函数,用于处理点击事件,使得count加1。最后返回了一个包含h1、p、button等React元素的div元素,并绑定了相关的事件处理。

3. index.tsx文件代码示例

    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import './index.css';

    ReactDOM.render(
        <React.StrictMode>
            <App name="Alice"/>
        </React.StrictMode>,
        document.getElementById('root')
    );
    

这里的index.tsx文件是React项目的入口文件,通过ReactDOM.render()方法将App组件渲染到指定的HTML节点上(即id为root的div元素)。

五、总结

TS作为JavaScript的超集,对开发者来说是一个很好的选择。TS有更多的类型控制和面向对象特性,使得代码更具可读性、可维护性和可扩展性。上述示例演示了如何在React项目中使用TS,但事实上,TS还有更广泛的应用,如Node.js服务器端开发、Angular项目开发等。在实际项目中,应该根据需求进行深入学习和实践。