TypeScript 自学笔记1 基础类型

发表于 | 更新于: | 分类于 | | 热度 ℃

前言

  • 现在Ts也是比较流行，想自学一下ts
  • 所以就一起来学习一下，做下笔记吧

笔记目录

  1. 安装ts
  2. 第一个ts
  3. 项目使用
  4. 五分钟上手ts
  5. 基础类型

安装ts

  1. 全局安装ts

    1
    $ sudo npm install -g typescript

  2. 全局安装编译环境tsc

    1
    $ sudo npm install -g tsc

第一个ts

  1. 创建 greeter.ts文件

  2. 文件内部写一个greeter的函数

    1
    2
    3
    4
    5
    6
    function greeter(person) {
        return "Hello, " + person;
    }

    let user = "Jane User";
    console.log(greeter(user))

  3. 编译

    1
    $ sudo tsc greeter.ts

  4. 运行查看

    1
    $ sudo node greeter.js

项目使用

  1. npm init -y 初始化

  2. 定义package

    1
    2
    3
    "build" : "tsc greeter.ts",
        "test" : "node greeter.js",
        "start" : "npm run build && npm run test"

  3. npm run start 就等于运行了全部

五分钟上手TypeScript

定义类型实现规范化，类型注解

1
2
3
4
5
6
7
8
9
10
11
// 给输入的类型添加约束
// 在函数参数接受的时候定义一个类型从而在编译时，把不真确的类型就会报错拦截下来
// 没有按照规定输入就会报错
// 从而更加的规范化
function greeter (person:string) {
    return "Hello, " + person;
}

let user = "YHF";

document.body.innerHTML = greeter(user);

接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 定义接口
interface Person {
    firstName: string;
    lastName: string;
}

// 函数
// 在接收函数时接受 接受这个约束的接口
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

// 输入时定义对象输入
let user = { firstName: "Y", lastName: "HF" };

console.log(greeter(user));

类

  • 可以使用类的方法对数据进行约束
  • 在构造函数的参数上使用public等同于创建了同名的成员变量
  • 在定义的时候也是可以使用数据约束的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class Student {
        fullName: string;
        constructor(public firstName,public middleInitial : number,public lastName) {
            this.fullName = firstName+ " " + middleInitial.toString() + " " + lastName; 
        }
    }

    // 等同于
    class Student {
        fullName: string;
        firstName: string;
        middleInitial: number;
        lastName: string;
    }

在web如何使用ts

  • 其实很简单就是调用ts打包出来的js文件就可以了

基础类型

布尔值

1
2
3
4
5
// 参数约束 后面直接跟布尔值
let isDoneNew : boolean = true;

// 像这样的写法是不严谨的是错误的 ，不能接受带有字符串的值
let isDoneString: boolean = "true";

数字

1
2
3
4
5
// 2,8,10,16进制都可以
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串

  • 单双引号无差别
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let name: string = "bob";
    name = "smith";

    // 也可以使用字符串模版，在开发的过程中也是常用的一种
    // 与字符串拼接效果相同的
    let name: string = `Gene`;
    let age: number = 37;
    let sentence: string = `Hello, my name is ${ name }.

    I'll be ${ age + 1 } years old next month.`;

数组

  • 可以定义类型数组，和定义范型
    1
    2
    3
    4
    // number数组
    let list : number[] = [1,2,3];
    // 范型
    let list2: Array<number> = [1, 2, 3];

元组 (其实还是数组)

  • 这个东西看起来很人性化
  • 在内部每一个位置你都可以定义类型，不相同的类型
  • 但是需要插入数据时要一一的对应
1
2
3
4
5
6
// 数组中定义每一个位的属性
let x: [string, number];
// 这样来赋值就是对的
x = ['hello', 10]; // OK
// 没有按相应的来就会报错
x = [10, 'hello']; // Error

枚举 （和js比起来容易实现很多）

  • 这个枚举呢说是对象也不像对象，说数值也不像数组
  • 用对象获取法，获取到的是对应的编号
  • 用数组获取法，获取到的是对应的文字
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 1. 对象获取，通过名字获取值
    enum Color {Red, Green, Blue}
    let c: Color = Color.Green; // 1

    // 2. 数组获取，通过便利枚举值得到名字
    enum Color {Red, Green, Blue}
    let colorName: string = Color[2]; // Blue


    // 3. 改变编号，默认为0
    // 改变后为 1，2，3
    enum Color {Red = 1, Green, Blue}
    let c: Color = Color.Green;

    // 4. 全手工赋值
    enum Color {Red = 1, Green = 2, Blue = 4}
    let c: Color = Color.Green;

Any （简称任意类型什么都可以支持）

1
2
3
4
5
6
7
8
let notSure: any = 4; // number
notSure = "maybe a string instead"; // String
notSure = false; // boolean

// 也可以用来数组上
let list:any[] = [1,true,"free"];
// 但是在第一个的类型确立了后再去改变是不可以的
list[0] = 'aaa' // 这个是错误的不可以这样用，虽然任意类型但是还是要注意

Void (不能拥有返回类型，就是无返回类型)

1
2
3
4
5
6
7
8
9
10
// 1. 函数
function warnUser(): void {
    console.log("This is my warning message");
    // return 这样呢可以编译通过
    // return 1 只要加上值这样就不可以了
}

// 2. 变量
// 只能接收null 和 undefined
let unusable: void = undefined;

null/undefined

  • 这个就不说了只可以接收自己本身null或undefined 或者 赋值给 void

Never (永远无法到达的类型…)

  • 简单的说就是一下常抛出异常
  • 数据永不为真时也是never类型
  • 任何类型除了never本身都不可以赋值给他
  • 但是never可以赋值给任何类型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 返回never的函数必须存在无法达到的终点
    function error(message: string): never {
        throw new Error(message);
    }

    // 推断的返回值类型为never
    function fail() {
        return error("Something failed");
    }

    // 返回never的函数必须存在无法达到的终点
    function infiniteLoop(): never {
        while (true) {
        }
    }

Object (简单点就是对象)

  • object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // declare 声明
    // declare function 在ts是声明函数的意思
    // 这里就是声明一个名为create 参数o类型为object 或null，的无返回函数
    declare function create(o: object | null): void;

    // 正确的调用方法
    create({ prop: 0 }); // OK
    create(null); // OK

    // 错误的调用方法
    create(42); // Error
    create("string"); // Error
    create(false); // Error
    create(undefined); // Error

类型断言 （明确类型）

  • 有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
  • 其实就是给他明确类型的意思，就是你知道这个是什么类型就直接写什么
  • 但是如果上面any定义的类型和你写的不一样，就会出现报错就是出不来
  • 两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。
1
2
3
4
5
6
7
8
9

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

// as 语法 和上面一样的,但是就这样运行跑不起来，等到后面jsx的时候再去看看
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

后记

  • 这个就是我学习Ts的第一天的笔记，欢迎更多的同行大哥指导交流
  • 欢迎进入我的博客：https://yhf7.github.io/
  • 如果有什么侵权的话，请及时添加小编微信以及qq也可以来告诉小编（905477376微信qq通用），谢谢！
-------------本文结束感谢您的阅读-------------
0%