typescript学习笔记(一)

本文介绍了TypeScript中的各种基本数据类型,包括布尔值、数字、字符串、数组、元组、枚举等,并探讨了任意值、空值、null与undefined的区别及应用场景。此外还涉及了变量声明、解构赋值、接口定义等内容。

数据类型:

布尔值,数字,字符串,数组,

eg:let a: number = 1

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

元组 Tuple:已知数组元素个数和类型的数组

eg: let arr: [string, number] = ['hello', 2]    // true

     let arr: [string, number] = [1, 'ddd']      //false

注:在访问已知类型的数组元素时,可以调用其拥有的方法,若该类型没有该方法会报错

      当访问一个越界数组元素时,会使用联合类型代替(arr[3] = 'aaa'  // true,arr[3]的类型为 number|string)

枚举

eg: enum Color {Red, Green, Blue}; let c: Color = Color.Green;

     默认情况下从0开始为元素编号,但是也可以自己定义

    enum Color {Red = 1, Green, Blue};let c: Color = Color.Green;

注:枚举类型可以通过值得到它的名字

eg: enum Color {Red = 1, Green, Blue}; let colorName: string = Color[2]; alert(colorName); // 显示'Green'因为上面代码里它的值是2

任意值:不清楚该值类型时

eg:let a: any = 1

       let arr: any[] = [1, 'dad']

空值:表示没有任何类型

eg:function fn(): void{没有返回值}

       let a: void = undefined | null(当给一个变量指定为void类型时,只能给它赋值为null或undefined)

null和undefined:在typescript中,null和undefined都有自己的类型:null和undefined,他们时任何类型的子类型

never:表示永不存在的值的类型,例如会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

eg:

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

变量声明:

let,const,var(同ES6)

解构:

数组解构:

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

对象解构:

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;
({ a, b } = { a: "baz", b: 101 });  // 注意要用()扩起来,因为js通常会将{起始的地方解释为一个块
let {a, b}: {a: string, b: number} = o;   // 指示类型

接口:

interface LabelledValue {
    label: string;
}
function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性:

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}
let mySquare = createSquare({color: "black"});

可选属性的优点:1. 可以对属性进行预定义

                        2. 可以捕获用了不存在属性时的错误(会报没有该属性的错误)

只读属性:

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

函数类型:接口也可以描述函数类型

仅需定义参数列表和返回值类型

interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
}    // 函数参数和接口定义属性名可以不同



TypeScript 作为 JavaScript 的超集,通过引入类型系统、泛型、接口等特性,为前端开发带来了更高的类型安全性与代码可维护性。对于初学者而言,掌握其基础知识和使用方法是迈向高效开发的第步。 ### 类型系统基础 TypeScript 的核心在于其强大的类型系统,包括基本类型(如 `number`、`string`、`boolean`)、数组类型、元组类型、枚举类型等。例如,可以显式地声明变量的类型: ```typescript let age: number = 25; let name: string = "Alice"; ``` 此外,还可以使用联合类型(Union Types)来表示个值可以是几种类型之: ```typescript let id: number | string; id = 123; // 合法 id = "abc"; // 合法 ``` ### 接口与类型别名 TypeScript 提供了 `interface` 和 `type` 两种方式来定义自定义类型。`interface` 更适合用于描述对象的形状,而 `type` 则适用于定义联合类型或更复杂的类型组合。例如: ```typescript interface User { name: string; age: number; } type ID = number | string; ``` 两者都可以实现类型定义,但在某些场景下选择其中之更为合适。比如,`interface` 支持继承和实现,适合定义类的结构;而 `type` 更加灵活,可以用于定义联合类型。 ### 泛型 泛型允许在定义函数、接口或类时,不预先指定具体的数据类型,而是在使用时再指定。这种机制提高了代码的复用性和灵活性。例如,定义个通用的数组函数: ```typescript function identity<T>(arg: T): T { return arg; } let output = identity<string>("Hello"); // 返回类型为 string ``` ### Vue 3 中的 TypeScript 使用 在 Vue 3 中,TypeScript 可以与 Composition API 结合使用,提供更强大的类型推导能力。例如,在组件中使用 `ref` 和 `defineComponent`: ```typescript import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const message = ref('Hello, Vue with TypeScript!'); return { message }; } }); ``` 通过显式指定泛型参数,可以确保类型的安全性。例如,声明个字符串数组: ```typescript const list = ref([] as string[]); ``` ### 实战建议 1. **快速掌握核心**:建议在 2 小时内通读基础类型、接口、泛型以及 Vue 3 组件的 `props` 和 `emits` 类型声明。 2. **实战开发**:使用 Vite 创建 Vue 3 + TypeScript 项目,实现个带表单验证的组件,结合 `ref`、`computed` 和类型断言。 3. **深入生态**:学习 Vue Router 和 Pinia 的 TypeScript 用法,完成个简单的单页应用(如博客列表 + 用户状态管理)。 ### 学习资源推荐 - **官方文档**:TypeScript 官方文档和 Vue 3 + TypeScript 官方指南是权威的学习资料。 - **工具链**:TypeScript Playground 可用于在线调试 TypeScript 代码,而 Vue Language Server 是 VSCode 中 Vue + TypeScript 的最佳插件。 通过以上内容的学习和实践,可以快速上手 TypeScript,并在实际项目中应用其特性,提升代码质量和开发效率[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值