5分钟快速上手TS

用户1741371748386
191 阅读4分钟

1、TS是什么？

TS是JS的超集，包含了JS的所有功能，比JS多了类型注解。

类型注解：一种轻量级为函数或者变量添加的约束。

js是动态类型的语言，例如初始定义了变量let a=1,后续可以修改a="js"。

let a = 1
a = "js"

ts是静态类型的语言。在编写代码时，在编译阶段就会进行类型检查，例如上面的例子此时会报错。

let a = 1
a = "js" //报错

2、TS中的基本类型

1、js已有类型：

基本类型：number、string、boolean、null、undefined、symbol。

对象类型：数组、对象、函数等对象。

// js已有类型
let num:number = 0
let str:string = "str"
let flag:boolean = true
let a:null = null
let b:undefined = undefined
const mySymbol = Symbol()

let arr1:number[] = [1，2]
let arr2:string[] = ["s"，"t"]

type MyObj = {
    name: string,
    age:number,
    score: number,
}
let obj:MyObj = {
    name: 'Aurora',
    age: 2,
    score: 100,
}

function getSum(n1: number, n2: number): number {
    return n1 + n2;
}

3、TS新增类型：联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等

  1. 联合类型 (Union Types)

联合类型允许一个变量可以是多种类型中的一种。

let value: string | number;
value = "Hello, TypeScript!";
console.log(value); // 输出: Hello, TypeScript!
value = 42;
console.log(value); // 输出: 42

  1. 自定义类型（类型别名） (Type Aliases)

类型别名可以使用 type 关键字定义。

type StringOrNumber = string | number;

let anotherValue: StringOrNumber;
anotherValue = "Hello";
console.log(anotherValue); // 输出: Hello
anotherValue = 123;
console.log(anotherValue); // 输出: 123

  1. 接口 (Interface)

接口可以定义对象的结构。

interface Person {
    name: string;
    age: number;
    greet(): string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    greet() {
        return `Hello, my name is ${this.name}`;
    }
};

console.log(person.greet()); // 输出: Hello, my name is Alice

接口继承extends

interface Person {
    name: string,
    age: number
}
interface Person2 {
    name: string,
    age: number,
    score: number
}

//此时可以使用继承方式，更简洁合理
interface Person2 extends Person { score: number }

  1. 元组 (Tuples)

元组是一种特殊的数组，定义了每个元素的类型。

let tuple: [string, number];
tuple = ["Hello", 42];
console.log(tuple); // 输出: ["Hello", 42]// 访问元组中的元素console.log(tuple[0]); // 输出: Helloconsole.log(tuple[1]); // 输出: 42

  1. 字面量类型 (Literal Types)

字面量类型可以是具体的字符串、数字或布尔值。

type Direction = "Up" | "Down" | "Left" | "Right";

let move: Direction;
move = "Up";
console.log(move); // 输出: Up
move = "Left";
console.log(move); // 输出: Left

  1. 枚举 (Enum)

枚举允许定义一组命名的常量，使用 enum 关键字。

enum Color { Red, Green, Blue }

let color: Color = Color.Green;
console.log(color); // 输出: 1 (枚举成员的默认索引值)// 使用字符串枚举enum Status {SUCCESS = "success",FAILURE = "failure",PENDING = "pending"
}

let status: Status = Status.SUCCESS;
console.log(status); // 输出: success

7. void 类型

void 类型通常用于表示没有任何返回值的函数。

function logMessage(message: string): void {console.log(message);
}

logMessage("This is a log message."); // 输出: This is a log message.

8. any 类型

any 类型可以表示任意类型，通常不建议使用，因为它会失去类型检查的优势。

let randomValue: any;
randomValue = "Hello";
console.log(randomValue); // 输出: Hello
randomValue = 42;
console.log(randomValue); // 输出: 42
randomValue = { key: "value" };
console.log(randomValue); // 输出: { key: 'value' }

4、TS其他特性

1、类型推论

TypeScript 会根据变量的初始值自动推断出变量的类型，这样开发者不需要显式地声明类型。

// TypeScript 会根据赋予的初始值推断出 number 类型
let num = 42;
// num 的类型被推断为 number
// num = "Hello"; // 这将会报错，因为 TypeScript 推断 num 为 number 类型

// 推断为 string 类型
let greeting = "Hello, World!";
// greeting 的类型为 string
// greeting = 100; // 这将会报错

// 推断为 boolean 类型
let isActive = true;
// isActive 的类型为 boolean
// isActive = "Yes"; // 这将会报错

// 当没有初始值时，类型推断为 any
let unknown;
unknown = "Could be anything"; // 类型为 any，此处不会报错
unknown = 99; // 依旧不会报错，因为类型是 any

2、类型断言as

类型断言允许你在编译时明确告诉 TypeScript 一个值的具体类型。这在你非常确定一个值的类型比 TypeScript 所推断的更明确时特别有用。

// 类型断言的格式：值 as 类型
let someValue: any = "I am a string";

// 使用类型断言，告诉 TypeScript 这实际上是一个 string
let strLength: number = (someValue as string).length;
console.log(strLength); // 输出: 12

// 另一种语法（不推荐，只作了解）：旧版类型断言写法（JSX 中不支持）
let anotherLength: number = (<string>someValue).length;
console.log(anotherLength); // 输出: 12


// 实际应用中，类型断言常用于 DOM 操作等情况
// 示例：断言 HTML 元素类型
let element = document.getElementById("myElementId");


// 使用类型断言来告诉 TypeScript element 是一个 HTMLDivElementlet divElement = element as HTMLDivElement;
if (divElement) {
    divElement.style.backgroundColor = "blue";
}

// 如果元素可能为 null，可以使用非空断言操作符 "!"
let definitelyDiv = document.getElementById("anotherElementId")!;
definitelyDiv.textContent = "This is definitely a div!";

使用注意事项

  • 类型推论：是 TypeScript 的一个强大功能，可以减少冗余的类型声明，从而提高代码的简洁性。在变量初始值明确的情况下尽量利用类型推论。
  • 类型断言：类型断言不会改变 runtime 的数据类型，只是在编译时帮助 TypeScript 理解开发者的意图。使用类型断言时需谨慎，确保你的断言是合理的和安全的，不然可能会导致运行时错误。

通过理解和适当利用类型推论与类型断言，可以让 TypeScript 更好地帮助你进行项目开发。

avatar
文章
阅读
粉丝